Introduction

D3 is an open source JavaScript library for:

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

DOM Manipulation

The Document Object Model (DOM) allows documents (typically specified by HTML, SVG etc.) to be manipulated (e.g. adding/removing/modifying elements) using JavaScript. D3 allows this manipulation to be carried out in a data-driven manner.

For example, 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
  }
]

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

Data transformation

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:

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

we 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 Scalable Vector Graphic (SVG) elements such as lines, circles, paths, text etc.

Supposing we have some co-ordinates

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

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:

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

Summary

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!

Comments