Monthly Archives: November 2015

Data Visualisation with D3

Let set the expectation clear here, this is pragmatic overview for D3, target for the audience which never knew d3 before. If you like to get in depth of data visualization with d3, I would suggest Scott Murray website, great place to start.

List of other related articles

Introducing d3

This how Wikipedia defines it,

D3.js (or just D3 for Data-Driven Documents) is a JavaScript library for producing dynamic, interactive data visualizations in web browsers. It makes use of the widely implemented SVG, HTML5, and CSS standards. It is the successor to the earlier Protovis framework.

During the pre era in 90s, web browser were plain static with limit interactivity of scroll and click on links. Then comes the JavaScript, which brings the magic of interactivity to web pages. D3 developers use this language (JavaScript) to build a library, which could visually present data within web pages.

In order to understand what d3 is, I would rather first explain what it not to bring to clear picture in front of all

What it not?

  • It not just a charting library (though you can make charts with it)
  • It not just a map library (though you can make map with it)
  • It not a compatibility layer (It doesn’t work on all the bad browser)
  • It not an SVG abstraction layer (It doesn’t have its own way of making a line or a circle. it makes you deal with svg elements as svg elements. plus, you can deal with HTML elements and Canvas elements)

What is it?

  • D3 converts your data to document. That what’s is name states ‘data-driven-document’
  • It a general purpose visualization library, which help us to make charts, graphs and all other type of visualization to represent data.
    But, note d3 doesn’t come with any prebuilt visualization. There is no d3.barchart. It just low level visualization library
  • It JavaScript Library, hence, it would be with HTML, CSS and SVG in your web browser (Chrome, FireFox, etc.) rather on the server.
  • It have certain API’s to make awesome visualization (circles, rectangles, polygons, etc) with data
  • It under BSD license, and is open source with code on GitHub. Hence, you can use it for free

Show me how it looks

Here, a lot awesome examples at I have taken the screen shot of just few. I recommended to explorer and other examples on this page to understand the ability of d3.js. People have made plugin out of d3 which make lives, with multiple forms.

What d3 does?

D3 has the pre-built JavaScript functions to select elements, create SVG objects, style them, or add transitions, dynamic effects to it. It transforms data into information, data into documents, data into elements. d3 expects data to be in json format as expected by the chart you are trying to use, and renders the chart according on the web browser.

In d3 world, document means the DOM element, which when you view on the webpage (like this one), it parse into HTML and CSS. But it’s more than that; it’s a living, breathing thing. JavaScript can manipulate the DOM, creating and deleting pieces of it. It’s what enables web applications to be dynamic and interactive.

How it works?

Now, let’s get to the bare metal, here is a code example to demonstrate how d3 works

var dataset = [ 5, 10, 15, 20, 25 ];“body”).selectAll(“div”)

.data(dataset) //Binding it to the dataset

.enter() //For every data which exists in biding,

         //but do not see an element

.append(“div”) //append an element

.attr(“class”, “bar”); //and apply the css class ‘bar’

This would result in something like this

I have taken this example from the Scott Murray website, which host the excellent tutorial to learn d3.

What else D3 do?

As mention earlier, d3 is simple low level data visualization library. It has tons of API’s which allow you to select elements, create SVG objects, style them, or add transitions, dynamic effects to it or tooltips to them. Going to each of it would be cumbersome and outstretched for this post. But, by and large API are classified under the big bucket as below

If you want to explore yourself, you can see the entire list at

Else, you can alternative get on

Where do I go from here?

There are several places, to get hands dirty with d3. First place would be D3 website itself. Checkout the examples, and check out which you like the best. Most of the example would be hosted on Gists are a great way to share your work. You can share single files, parts of files, or full applications. Mike Bostock, one of the creators of d3 has developed great different visualization and host on, which is the simple viewer for code examples hosted on GitHub Gist. Didn’t make sense, read the sentence again.

Note: Warning, learning D3 involves steep learning curve, and but one you learn it, you never needs any other visualization library, it so powerful.

Pick, on your favourite visualization and download the code. Try to make sense of it (best of luck). Able to understand bit of it, give d3 a try, else, forget it.

Another way is to use the visualization as it is, without customizing look and feel. Just play with your data in json and voila, chart renders your data.


Reader feedback is important to me, please add the comments in the below section. If you think, I need to improve on any of the topics, and there something, which I didn’t know, do let me know. World is large, world is exploratory. Share your knowledge, illuminate other minds.

What is Data Visualization

Recently, I got an opportunity to work in data visualization field. In the process, I started understanding more about the data visualization. I though, it would be great to place my learning in blog post, as it will help other going though this roller coaster. I am planning to put this in series of blog post, where I would explain data visualization, technologies available today, and how to achieve it.

List of other related articles

Picture is worth thousand words

Here is the popular saying “Picture is worth thousand words”. This phrase is the nutshell for Data visualization. When ones have cones of data and needs to analyze it, it is very easy get lost without any means to represent it. Here, where the data science comes into picture. Data visualization is about mapping values to visual. It about taking the structure information and figuring out the ways to translate into visual those are more readily understood.

Data visualization is display of quantitative information. How best to represent underlying data visually using colour, size and shape. It turning about turning number into pictures which one can remember, analyze and connect.

Patterns in Data

Data visualization was about the finding patterns is series of data. That is, sequences of measurements that follow non-random orders.

Let take an example, does this data series make sense?

Let plot them in the graphically in scatter dots

Now, you can see patterns and make sense out of the data more easily. That’s the work of data visualization.

Pattern in data help you to do Trend analysis. Trend allows you to predict what will happen in future, based on the historical data. It can be used in many contexts like risk management where tracking variances in cost and schedule helps you to mitigate risk. It helps to increase sales by studying consumer purchase behaviours, find fashion treads, social patterns, in financial sector, it helps in stock performance tracking, and list is endless.

Storytelling and dimension to the data

Everybody loves story. Stories are memorable, impactful and personal. Not many among us remember the statistical figures, but many remember a story. Data visualization allows us to make data more visual which in turn allow us to explore and understand the data in difference ways. Good data visualization are able to make “aah” moments, I got it, which are more impactful to the audience. It allows one to add the meaning to the data visualization.

Very successful stories follow an arc. A clear flow turns a collection of facts into a compelling narrative. It glues them together into a structure that makes sense. And the rising action of a story arc makes it more engaging and memorable. Tell stories with data means following

  1. Add context to the data which Audience would understand. It answer basic question, what’s the purpose of the data.
  2. Then, comes to the exploratory scene where audience tends to get the sense of data, what data is, what it can tell you. It is process to connect data in interesting ways, look data with different angle in unbiased and unleading way.
  3. Final is the explanatory phase, where one derive the meaning for the data. It concludes the objective to showcase the entire visualization.


Data Storytelling – Jock Mackinlay, PhD, Robert Kosara, PhD, Michelle Wallace

Tell a Meaningful Story With Data – Daniel Waisberg

Edward Tufte: Books – The Visual Display of Quantitative Information

Three steps to become a visualization/infographics designer – Alberto Cairo, Facebook