0 to d3 in 10 minutes or less

In this post, I will attempt to describe the core concept of D3 with plenty of examples that a experienced javascript programmer can skim in 10 minutes and have a basic understanding of how D3 is structured.

At its core, D3 is a framework that converts data into HTML/SVG elements. In order to accomplish this, we need to provide the following three functions.

Let’s take these three concepts one at a time.

The Data

We will be using the following dataset for illustration purposes:

function gen_data(){
  var data = [];
  for(var i = 0; i<10; i++){
  return data;

Basically, the function generates a array of 10 numbers between 0 and 100.


This is the first step where we bind data to DOM elements. First we use d3.select to select all the element we want to modify, then bind the data via d3.data. Finally, we define the enter (aka what happens when new data is added) behaviour.

So in this particular case, when we encounter a new data element, we want to set the width to be the value of the data, set height to be 10px, and the background color to be #abad3d

Putting it all together:

var data = d3.select('.app')    // select container .app
  .selectAll('div')             // select all elements to be bound to data
  .data(gen_data())             // supplies the data to be bound

  .enter()                      // marker to define what happens after new data is created
    .append('div')              // new data needs new elements
      width: function(d){ return d; }, // sets the width to be the data value
      height: 10,               // sets the height
      'background-color': '#abad3d' // and background

and it looks like this:

basic bars

How data changes

This part is easy, when the data changes (already is inserted), then we just want to modify the width.

    width: function(d){ return d; }

Wrapping the whole thing (before var data = ... to just after last line) in a setInterval, we can see the bars are dancing happily below:

dancing bars

How we remove data

The final part of the D3 trio of fundamental function is the .exit (corresponds to .enter).

Simply removing the element that has exited is very simple, the following code should suffice:


With some flourishes through the magic of .transition, we can make the exiting element animate and making it more obvious.

data.exit().transition(500).style('width', 0).remove()

The finished example is below:

Further Reading

The following execellent articles should cover various aspects of D3 in significant more depth than I can, and should be a must read if you want to really understand how D3 works.


Mike Bostock, who is the createor of d3, also happen to be a great teacher; He has kindly created a few wonderfully illustrative tutorials on various aspects of D3 that freqently trips up new comers:

That’s it for today! If you want some inspirations, hit D3 Gallery for some amazing visulizations that will keep you entertained for hours.