1.1.12 • Published 8 years ago
d3-concentric-circles v1.1.12
D3 Concentric Circles
A concentric circles visualization plugin for the D3 library.
Installation
$ npm install d3-concentric-circles
Usage
import d3ConcentricCircles from 'd3-concentric-circles';
const data = [
{ label: 'Other', value: 77 },
{ label: 'Apps', value: 158 },
{ label: 'OS', value: 92 },
{ label: 'Hardware', value: 80 },
{ label: 'Network', value: 194 }
];
d3ConcentricCircles('.container', data);
Source the CSS stylesheet located at lib/d3-concentric-circles.css
.
Options
Pass an options
hash to override plugin defaults.
option | type | default | description |
---|---|---|---|
valueField | string | 'value' | The value field used to determine the radii of each circle. |
labelField | string | 'label' | The label field used for the legend label. |
colors | array | A list of colors to be used for the circles. | |
legend | boolean | true | Turn the legend on/off. |
onClick | function | A callback function to be fired when a circle is clicked. Receives an event argument containing the data for that circle. |
Using options:
d3ConcentricCircles('.container', data, {
valueField: 'value',
labelField: 'display',
colors: ['#08534c', '#28825f', '#fc8f32', '#dc4f00', '#f60202'],
legend: true,
onClick: e => console.log(e)
});
Methods
render()
Re-render the visualization; useful if bound data or container size has changed.
var viz = d3ConcentricCircles('.container', data);
// several moments later...
viz.render();
// viz re-rendered
Example
Generate an example in example/dist
:
$ npm run example
Standalone
Generate a standalone build in dist
(for use with <script>
tags and AMD module loaders):
$ npm run build:standalone
Test
Run tests with karma and mocha:
$ npm test
License
MIT