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