❤
npm
Sign UpSign In

d3-concentric-circles

1.1.12 • Public • Published

D3 Concentric Circles

A concentric circles visualization plugin for the D3 library.

Circle CI Coverage Status See Demo

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

Readme

Keywords

Package Sidebar

Install

npm i d3-concentric-circles

Repository

github.com/zakangelle/d3-concentric-circles

Homepage

github.com/zakangelle/d3-concentric-circles#readme

Weekly Downloads

12

Version

1.1.12

License

none

Last publish

Collaborators

  • zakangelle
Try on RunKit
Report malware