Data Visualization with d3.js: The Internet’s Best Kept Secret

Data Visualization with D3JS

Data Visualization with d3.js: The Internet’s Best kept Secret

Data Driven Documents or the D3.js v2.0 came out in the year 2011. It is a JavaScript library with great potential to aid dynamic and interactive data visualizations in web browsers. It makes use of the widely implemented CSS, SVG and HTML5 standards to manipulate the documents in a web browser using JS. But ever since its inception, there has been little to no justifiable lime light for such a revolutionary JavaScript library. However, despite the lack of mainstream lime light, it has prospered. You might have seen a multitude of modern and awwward winning Data visualization sites that sport powerful graphics and reactive data members. There is about a 60% probability that one of them came bundled with a d3.js library.

“D3.js is a JavaScript library for manipulating documents based on data. D3 helps you bring data to life using HTML, SVG and CSS. D3’s emphasis on web standards gives you the full capabilities of modern browsers without tying yourself to a proprietary framework, combining powerful visualization components and a data-driven approach to DOM manipulation.”

~the D3.js website ~

D3.js enables a developer to attach their data to Document Object Model (DOM) elements. Later; HTML, CSS3, and/or SVG can be used to showcase this data. D3.js data-driven transformations and transitions can provide a level of interactivity to the statistics.

Example: Check out the sequences sunburst data visualization  made by Kerry Rodden; a quantitative user experience researcher at Google.

A little back story for D3.js

In 2009 Mike Bostock; (a Ph.D student), Professor Jeff Heer (Ph.D, founder of Prefuse and Flare) and Vadim Ogievetsky (M.S Student) at the Stanford Visualization group compiled Protovis, a JavaScript library that could generate SVG graphics from data.

In 2011, work on Protovis was stopped, with an aim to completely re-imagine the Data Visualization tool. Bostock, Heer and Ogievetsky, developed and released D3.js, a more expressive framework that focuses on web standards and simultaneously, provides improved performance as compared to previous libraries.

Currently, work on the open source project; D3.js is being sponsored by The New York Times.

But it was not the only (or even the first) JavaScript DOM Library, why did it succeed when a lot others failed?

(i.e Protovis was the first stride in this direction, Manyeyes looked pretty but lacked graphics manipulation, while others like Prefuse, Quadrigram and Flare were also quite good but all three of them needed plug-ins to work)

Note: For the latest and greatest trends in web design technologies and professional practices visit the series on “Web Design“.

How d3.js is used?

Scale functions:

Scale functions in D3 make it easier to translate your data values into co-ordinates.

Suppose, that you have some consensual data for a particular country, to plot a graph against population within an 800 pixel area you can use:

// creates a scale function for datasetvar popScale = d3.scale.linear().domain([0, 1347100000]).range([0, 800]);popScale(1347100000); // returns 800 (China)popScale(64105654); // returns 38.13 (Britain)

Code Analysis:

D3 creates a function called popScale where the input is the population value whilst the output is a value in pixels on the graph.


Axes are those perpendicular normal lines that define a dimension. This may appear quite obvious but from a data visualization point of view, there are a multitude of factors that need to be addressed:

  • The Tick Intervals? and the number of Ticks?
  • Orientation? (Top, Bottom, Left or Right.)
  • Are the components reusable?
  • What happens if the scale changes?

D3 addresses these concerns with its axis component. To add a horizontal axis to the population example, we’d use:

// Create an axis generatorvar xAxis = d3.svg.axis().scale(popScale).orient(‘bottom’);// Append axis to SVG‘svg’).call(xAxis);


You can also change the label formatting by:

xAxis.tickFormat(function(d) { return d / 1000000000 + ‘bn’;});



D3 supplies components for most data visualization related tasks, including:

Choose & Implement

It’s easy to create effective d3.js systems by simply choosing the right mix of components. Scale functions are quite useful even when they are implemented as a standalone component.

Note: Need some professional Web Design help?

Not yet . . ? Check out our post on  AMP (Accelerated Mobile Pages).


 Why D3.js is the Next Big Thing!

  • First of all and a fact worth mentioning again; is that d3.js is open for everyone, all examples by contributors and the founding members are open source, either for educational or commercial use until or unless stated otherwise.
  • D3.js is completely based on JavaScript and uses a functional style that lets developers reuse code and add the appropriate functions as required in their particular project.
  • D3.js allows the developers to build the visualization framework that conveys their data more effectively. Graphic/ Data Visualization experts and Data scientist can find numerous uses for the D3.js library.

The simple answer to the above question lies in the fact that D3.JS “works on the web”. Data Visualizations only work if people actually get to see them. It does not need a plug-in, is light weight and integrates seamlessly with the existing web technologies to manipulate any part of the Document Object Model (DOM). This gives D3.JS a substantial advantage over simple SVG or canvas only based libraries like Raphael.js, Processing.js etc.

The release of d3.js is tailored to cater to the next generation of browsers and documents that are created using open standards rather than isolated plug-ins. d3 is a way to harness these new features to add interactivity to rather dull data sets.

However, shiny new features that work on new browsers to show awesome transitions aren’t the sole reason behind the innovative potential of D3.js. A complete documentation, a proactive community, detailed examples and dedicated contributors such as Mike Bostock, Kerry Roden, Justin Palmer and Joel Rodriguez as well as countless others. These are the life blood of this successful JavaScript library for Data Visualization.

D3 in action:

Editor’s Note: Did you like this post on d3Js.. ? Check out our section on the basics of Google Analytics.

Download the latest version (3.5.16) here:

Or, to link directly to the latest release, add this snippet:

<script src="//" charset="utf-8"></script>

The full source and tests are also available for download on GitHub.

Show your support for D3 by buying official stickers!


Leave a Reply


We're not around right now. But you can send us an email and we'll get back to you, asap.


Log in with your credentials

Forgot your details?