Search code examples
javascriptjsonsunburst-diagrampersonality-insights

How to use personality-insights-chart?


I created my own API using the IBM Watson Personality Insights API. Then, I created a website that would retrieve the the JSON object from the API and display it in a sunburst diagram, just like in the Personality Insights Demo.

I have found a library that displays the information how I want from a JSON object: https://github.com/personality-insights/sunburst-chart . The problem is that the instructions say that I must insert this two lines of code into my HTML file:

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.14/d3.min.js"></script>
<script src="path/to/personality-sunburst-chart.standalone.js"></script>

I know the second line must be changed accordingly to where personality-sunburst-chart.standalone.js is, but that file doesn't exist in the library. I thought that maybe they had changed the library and forgot to update the instructions, so I tried pointing it to index.js file inside the /lib folder of the library. Once I did that the browser console started alerting me that the file couldn't be executed because it contained require() commands, that can't be executed in web JavaScript.

Where can I get the missing file?


Solution

  • I found the answer.

    Explanation

    In all 1.x.x versions of the library, the whole library came precompiled in the /bin directory in the form of a JavaScript file named "personality-sunburst-chart.standalone.js". The current version is 2.x.x, the installation method changed, but the instructions weren't changed.

    Current installation instructions for the 2.x.x version

    The current version doesn't come with a precompiled file. To get it, you have to follow the following instructions:

    You have to download the repository and run npm install to install all the necessary dependencies. After that, you must run npm run compile. Once that finishes, the standalone file will be in the /dist directory with the name index.js.

    The command script is: node_modules/.bin/browserify --full-paths -t [ babelify --presets [ es2015 ] ] --standalone PersonalitySunburstChart lib/index.js -o dist/index.js

    You can then change the name to "personality-sunburst-chart.standalone.js" if you want and copy it to your web page directory.

    Then, you can reference the final script with :

    <script src="personality-sunburst-chart.standalone.js"></script>