Skip to content
A concentric circles visualization plugin for the D3 library.
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
example
lib
tasks
test
.gitignore
.jshintrc
Gruntfile.js
README.md
circle.yml
index.js
package.json

README.md

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

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

You can’t perform that action at this time.