D3.js Graph

A D3.js graph and it’s explanation

D3.js is one of the most important javascript library, the other 2 being i)underscore.js and ii) Jquery

D3.js is a frontend chart making library which requires data to be fed in the form of either JSON, CSV, TSV or XML etc.. file formats

D3.js is most importantly used for Data visualisation

In this blog post I try to explain how I used D3.js to make a graph. D3.js is tough to get started and hence it requires significant amount of time digest



Let us understand how to create above graph

link to source code :- https://github.com/nikhilponnuru/D3.js-sample

Explanation of each line:-

— The code starts with defining character encoding meta tag. we need to specify character encoding to make the browser understand what type of characters are being used inside. this is an optional tag but it is a good practise to use, since we don’t know how and where our client uses our website

—  then we start with style tag:- in which body tag is defined with font size and font-family

—  And then we defined path attributes. here path is nothing but the graph line which we see between x and y axis.

—  And then we defined how the x and y axis must be appearing and hence it’s attributes are defined

—  In body part of the code we defined a script tag to load d3.js. the line which we used


the above code is d3.js CDN. instead of this we can even download D3.js from its official website and include it’s path. but if you constantly use internet, I would highly recommend a CDN path

—  Then we defined the width and height of the graph and canvas

— The file which we used is  “data.csv” — the format used inside this “Day-Month name-Year” and value of sales that day in lakhs

to format

"Day-Month name-Year" we use "%d-%b-%y"


— We have set the range of lengths of x and y axis, where x-axis displays time and y-axis as scale values

— And then we define axes values which are values range used on the axes and orient(“left”) and orient(“bottom”) are used …..for e.g:- look the images








— The below code

var svg = d3.select("body")
        .attr("width", width + margin.left + margin.right)
        .attr("height", height + margin.top + margin.bottom)
              "translate(" + margin.left + "," + margin.top + ")");</pre>


This Adds the SVG canvas. here we are appending svg (scalable vector graphics, it is a form of vector image which is not pixel dependent, hence zoom-in or zoom-out wont effect the image quality)

The SVG is provided with attributes of left, right, bottom, top.


— In the latter lines we fetch the csv data and parse the data which has date and values and then we plot them on the graph

here forEach (The forEach() method calls a provided function once for each element in an array, in order.) is used to iterate each and every value in the data.csv

— In the latter code parts we define attributes required to display X and Y axis

//ADD the X-axis
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")

// Add the Y Axis
.attr("class", "y axis")




How many process can be run simultaneously ?

well we in these days use multi-core processors like core i3 or i5 or i7 of intel rather than single core processors like Intel Pentium4 670

—for brevity of this article

   core i3-has two cores and hyper-threading

 core i5-for mobiles may have 2 cores and hyper-threading and desktop ones with 4 cores and no hyper-threading

core i7-all core i7 models will have hyper-threading and it may have from 2 cores to 8 cores

Continue reading