chart overview

Chart: Overview

d3.chart allows one to create a chart constructor that can then be instantiated many times. Those instances can live as standalone chart instances or be a part of a larger chart that they were attached to.

First, a chart constructor must be created like so:

d3.chart("RoundBarChart", {
  initialize: function() {

  }  
});

Read more about defining charts here.

Instantiation

Creating a constructor like we did above allows us to then create instances of that chart on top of a d3.selection like so:

var chart = d3.select("#vis")
  .append("svg")
  .chart("RoundBarChart");

A chart instance can then be drawn with some data:

chart.draw([1,3,4,5,10,12]);

The draw method can be called multiple times with different data and the chart will update appropriatly, taking care of handling entering/updating/exiting elements per the chart layers' specification.

chart.draw([1,3,4,5,10,12]);
chart.draw([13,24,35,5,63]);

Read more about instantiating a chart and drawing a chart.

Layers

A layer in d3.chart represents a set of elements that are drawn to data. A layer takes care of:

• binding data to elements
• inserting new elements
• handling lifecycle events and their callbacks

For example, in a scatterplot, the markers positioned along the x & y axis would be considered a layer.

Read more about layers.

Extension & Composing

Charts can be extended to create new charts that are built on top of the functionality that the original chart provides, like so:

d3.chart("RoundBarChart").extend("SquareBarChart", {
  initialize: function() {

  }  
});

Read more about extending charts and attaching charts.