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';

let 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

zxqx/d3-concentric-circles