Category Archives: d3.js

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 https://github.com/mbostock/d3/wiki/Gallery. 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 ];

d3.select(“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 https://github.com/mbostock/d3/wiki/API-Reference#d3layout-layouts

Else, you can alternative get on http://devdocs.io/d3/#d3layout-layouts

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 https://gist.github.com. 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 http://bl.ocks.org/, 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.

Feedback

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.

Advertisements