D3 in Depth covers version 6 of D3
Home About
Build a real-world, custom, interactive and beautiful data visualization from scratch using D3.
Over 50 online text-based lessons on D3, interaction, code architecture, state management, styling and more.
Visit course page

Introduction to D3

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

Most charting libraries (such as Chart.js and Highcharts) provide ready made charts whereas D3 consists of building blocks with 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.

chart.js example

Creating a similar chart with D3 is more involved and requires experience with JavaScript, HTML, SVG and CSS.

If you require a standard bar, line or pie chart you should consider a library such as Chart.js. However if you require bespoke charts or have very precise needs then D3 should be considered.

D3’s features include:

  • data-driven modification of HTML/SVG elements
  • loading and transforming data (e.g. CSV data)
  • helpers for generating 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

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:


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.

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