Home About

Introduction to D3

D3 is a JavaScript library used to create bespoke, interactive charts and maps on the web.

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 rect elements and join them to the data
  • position the rect elements
  • size the rect elements 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:

[
  {
    "name": "Andy",
    "score": 37
  },
  {
    "name": "Beth",
    "score": 39
  },
  {
    "name": "Craig",
    "score": 31
  },
  {
    "name": "Diane",
    "score": 35
  },
  {
    "name": "Evelyn",
    "score": 38
  }
]

With D3 we can:

  • add/remove div elements based on the array length
  • add a label and bar to each div element
  • update the width of the bar based on the person’s score

Data transformation

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:

Film,Genre,Lead Studio,Audience score %,Worldwide Gross,Year
27 Dresses,Comedy,Fox,71,160.308654,2008
(500) Days of Summer,Comedy,Fox,81,60.72,2009
A Dangerous Method,Drama,Independent,89,8.972895,2011
A Serious Man,Drama,Universal,64,30.68,2009
Across the Universe,Romance,Independent,84,29.367143,2007
Beginners,Comedy,Independent,80,14.31,2011

you can request it using:

d3.csv('films.csv', function(err, data) {
  // Do something with the data
})

D3 transforms the CSV data into an array of objects:

[
  {
    "Film": "27 Dresses",
    "Genre": "Comedy",
    "Lead Studio": "Fox",
    "Audience score %": "71",
    "Worldwide Gross": "160.308654",
    "Year": "2008"
  },
  {
    "Film": "(500) Days of Summer",
    "Genre": "Comedy",
    "Lead Studio": "Fox",
    "Audience score %": "81",
    "Worldwide Gross": "60.72",
    "Year": "2009"
  },
  {
    "Film": "A Dangerous Method",
    "Genre": "Drama",
    "Lead Studio": "Independent",
    "Audience score %": "89",
    "Worldwide Gross": "8.972895",
    "Year": "2011"
  },
  {
    "Film": "A Serious Man",
    "Genre": "Drama",
    "Lead Studio": "Universal",
    "Audience score %": "64",
    "Worldwide Gross": "30.68",
    "Year": "2009"
  },
  {
    "Film": "Across the Universe",
    "Genre": "Romance",
    "Lead Studio": "Independent",
    "Audience score %": "84",
    "Worldwide Gross": "29.367143",
    "Year": "2007"
  },
  {
    "Film": "Beginners",
    "Genre": "Comedy",
    "Lead Studio": "Independent",
    "Audience score %": "80",
    "Worldwide Gross": "14.31",
    "Year": "2011"
  }
]

Notice that D3 has used the CSV column names (Film, Genre, Lead Studio etc.) as property names for each object.

(The CSV file is from Information is Beautiful.)

Shape generation

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 line, circle, path and text.

Suppose you have co-ordinates

var data = [[0, 50], [100, 80], [200, 40], [300, 60], [400, 30]];

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:

Layouts

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.

Transitions

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.

User interaction

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.)

Stay up to date with D3 related articles, tutorials and courses