While most charting libraries (such as Chart.js and Highcharts) provide ready made charts D3 consists of a large set of building blocks from which custom charts or maps can be constructed.
D3’s approach is much lower level than other charting libraries. Creating a bar chart with Chart.js is just a few lines of code.
Creating the same chart with D3 you need to:
- create SVG
rectelements and join them to the data
- position the
- size the
rectelements according to the data
- add axes
You might also want to:
- animate the bars when the chart first loads
- adapt the chart to the container size
- add a tooltip
This is all additional effort but it gives you complete control over the chart’s appearance and behaviour.
If a standard bar, line or pie chart is sufficient you should consider a library such as Chart.js. However if you wish to create a bespoke chart to an exact specification then D3 is worth considering.
D3’s features include:
- data-driven modification of HTML/SVG elements
- loading and transforming data (e.g. CSV data)
- generation of complex charts such as treemaps, packed circles and networks
- a powerful transition system for animating between views
- powerful user interaction support, including panning, zooming and dragging
Data-driven modification of HTML/SVG elements
Given an array of objects such as:
With D3 we can:
divelements based on the array length
- add a label and bar to each
- update the width of the bar based on the person’s score
D3 provides many functions for manipulating data. For example it has functions to request CSV (comma separated value) data and transform it into an array of objects.
Suppose you have a CSV file named films.csv on your server:
you can request it using:
D3 transforms the CSV data into an array of objects:
Notice that D3 has used the CSV column names (
Lead Studio etc.) as property names for each object.
(The CSV file is from Information is Beautiful.)
D3 is probably best known for its role in producing interactive data visualisations. These are typically made of up SVG (Scalable Vector Graphic) elements such as
Suppose you have co-ordinates
which you’d like to connect with lines. D3 can generate the SVG:
You can choose to interpolate the points with a curve:
D3 can also create axes:
As with most D3 elements, you have a lot of configuration available. For example you can change the axis orientation as well as the number and format of the tick marks:
D3 provides a number of layouts which are functions that help transform your data into a visual layout. For example, if we have hierarchical (or tree shaped) data, we can use layouts to create a tree view:
a packed circle view (with leaf nodes sized by revenue):
and a treemap:
Under the hood, a layout adds properties (such as position, radius, width and height) to each data element. These properties can then be used when updating the DOM elements.
D3 makes it easy to introduce a transition effect between DOM states. Not only can position and size (e.g. width, height, radius) be smoothly transitioned, but also colours:
As well as producing pleasing visual effects, transitions help users keep track of elements between different states.
D3 has some useful tools to enable effect user interaction such as voronoi grids (to optimise hover/click/touch areas), brushing, zooming and dragging.
For example, suppose we have a number of small points with a hover-over effect, it’s quite hard to position the mouse pointer exactly over a circle:
However if the voronoi grid is enabled (click ‘Enable Voronoi’ above) polygons are enabled which help determine the closest point to the user’s hover/click/touch. It’s now much easier to locate a point. (Click ‘View Voronoi’ to see the underlying polygons.)