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