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

 

001

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

http://d3js.org/d3.v3.min.js

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

orient(“left”)

001

 

orient(“right”)

 

02.png

 

 
— The below code




<pre>
var svg = d3.select("body")
    .append("svg")
        .attr("width", width + margin.left + margin.right)
        .attr("height", height + margin.top + margin.bottom)
    .append("g").attr("transform",
              "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
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);


// Add the Y Axis
svg.append("g")
.attr("class", "y axis")
.call(yAxis);

 
 

 

 

Advertisements