A visualization for IBM Watson Personality Insights service output. This widget displays personality trait values in a sunburst chart.
- Include the script in your page
<script src="path/to/personality-sunburst-chart.standalone.js"></script>
Also, be sure to include the JQuery
and D3js
script files.
- Add a container element in your HTML
<div id='sunburstChartContainer'></div>
- Generate the visualization for a profile.
var chart = new PersonalitySunburstChart('sunburstChartContainer');
chart.show(profile, 'path/to/profile_photo.jpg');
See the complete example code or try it live.
Public methods:
constructor :: (ContainerId[, Options])
- Creates thePersonalitySunburstChart
object.show :: (PIProfile[, ImageURL])
- Renders the visualization for the given profile, optionally including the image in the center.
Where:
ContainerID
is aString
and refers to theid
attribute of a HTML component.Options
is anObject
with may contain the following attributes:Options.scale
: The scale of the visualization. Default is1
.Options.width
: The width of the visualization container. Default is100%
.Options.height
: The height of the visualization container. Default is100%
.
PIProfile
is a IBM Watson Personality Insights profile which is basically the service JSON output, parsed into a JavaScriptObject
.ImageURL
is aString
containing the URL for the image to display in the center of the visualization. Supported formats are PNG, JPEG or SVG.
You can run gulp
command to build the component. Binaries will be
deployed to bin
.