sunburst-chart

KO | EN

gitlite — search

#javascript #react #ai #llm #golang #rust #docker #nodejs #kubernetes #awesome-list #pytorch #mcp #ios #open-source

(★ 45)

A visualization for IBM Watson Personality Insights service output.

sunburst-chart 최신버젼 다운로드

최종 버전 다운로드 (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# Personality Sunburst Chart

[![npm-version](https://img.shields.io/npm/v/personality-sunburst-chart.svg)](https://www.npmjs.com/package/personality-sunburst-chart)
[![npm-license](https://img.shields.io/npm/l/personality-sunburst-chart.svg)](https://www.npmjs.com/package/personality-sunburst-chart)
[![Build Status](https://travis-ci.org/personality-insights/sunburst-chart.svg?branch=master)](https://travis-ci.org/personality-insights/sunburst-chart)
[![codecov.io](https://codecov.io/github/personality-insights/sunburst-chart/coverage.svg?branch=master)](https://codecov.io/github/personality-insights/sunburst-chart?branch=master)

Obtain a sunburst chart visualization for a personality profile.  For use in an HTML page.

![Personality Sunburst Chart](https://raw.githubusercontent.com/personality-insights/sunburst-chart/master/docs/screanshot.png)

## Usage
#### Importing through HTML
Include the library index.js script from the /dist folder and D3 (**v3**) in your HTML page.
```html
<script src="path/to/index.js"></script> 
```

Create an element to contain the chart in your HTML page.
```html
<div id='sunburstChart'></div>
```

Generate the visualization for a personality profile.
```JavaScript
  // Create the chart, specifying the css selector that identifies the element to contain the chart
  // and the version of Watson Personality Insights profile to use, v2 or v3.  Default is v2.
  var chart = new PersonalitySunburstChart({
    'selector':'#sunburstChart',
    'version': 'v3'
  });

// Render the sunburst chart for a personality profile (version as specified in creating the chart)
  // and optionally a profile photo.  The photo will be inserted into the center of the sunburst chart.
  chart.show('jsonObject', 'path/to/profile_photo.jpg');
```

Also works with DOM element input
```JavaScript
  var element = document.querySelector('#sunburstChart');
  var chart = new PersonalitySunburstChart({
    'element': element,
    'version': 'v3'
  });
  chart.show('jsonObject', 'path/to/profile_photo.jpg');
```

See the [complete example](./docs/index.html)

#### Importing through JavaScript
Use one of the following based on your version of Watson Personality Insights and D3
```javascript
// Watson Personality Insights Version 2, D3 Version 3
import PersonalitySunburstChart from 'personality-sunburst-chart/lib/charts/v2-d3v3';

// Watson Personality Insights Version 2, D3 Version 4
import PersonalitySunburstChart from 'personality-sunburst-chart/lib/charts/v2-d3v4';

// Watson Personality Insights Version 3, D3 Version 3
import PersonalitySunburstChart from 'personality-sunburst-chart/lib/charts/v3-d3v3';

// Watson Personality Insights Version 3, D3 Version 4
import PersonalitySunburstChart from 'personality-sunburst-chart/lib/charts/v3-d3v4';
```

## Development
Test changes in the browser:
```bash
npm start
```

Run unit tests:
```bash
npm test
```

## License

This library is licensed under Apache 2.0. Full license text is
available in [LICENSE](LICENSE).

## CHANGELOG

__10-05-2017__
 * Removed d3 from `window`
 * Added to package.json:
   * `"d3":"v3.5.14"`
   * `"d3-color":"^1.0.3"`

__26-01-2017__
 * Removed jQuery
 * Add support for selectors and DOM nodes

__15-01-2017__
 * Added support for v3 profiles - d3 tree json wrapper provided for v2 and v3 personality profiles to generate the input required by the d3 sunburst-chart created in lib/personality-chart-renderer.js
 * Only traits, needs and values will be displayed by the sunburst-chart.

sunburst-chart

sunburst-chart 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

sunburst-chart

sunburst-chart 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

Download README