- data-driven manipulation of the Document Object Model (DOM)
- working with data and shapes
- laying out visual elements for linear, hierarchical, network and geographic data
- enabling smooth transitions between user interface (UI) states
- enabling effective user interaction
Let’s unpick these one by one.
For example, given an array of objects such as:
D3 can help us:
- create a div element for each person
- add a label and bar to each div element
- set the text labels
- update the width of the div elements based on the person’s score
D3 provides many functions that help us manipulate data, usually to prepare data for visualisation.
For example it has functions to request Comma Separated Value (CSV) data from the server and transform it into an array of objects.
Supposing we have a CSV file named films.csv on our server:
we 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 Scalable Vector Graphic (SVG) elements such as lines, circles, paths, text etc.
Supposing we have some co-ordinates
which we would like to connect using linear segments. D3 can create a line generator which generates the necessary SVG for us:
D3 even lets us configure how the line generator interpolates the points. In this example we’ve used a natural cubic spline to interpolate our points:
As well as being able to create shapes such as pie segments and symbols, D3 can also create axes:
As with most D3 elements, you have a lot of configuration available. For example we 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.)
We’ve looked at a number of areas where D3 helps when working with and visualising data in the browser. Hopefully this both whets the appetite and gives an appreciation of the sort of things D3 can do for you.
You can work through this book sequentially or as a reference guide. Check out the contents page if you’d like to read more!