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")




Compiler Extensions like chrome extensions !!

Well I am sure everyone must have come across many chrome or mozilla extensions like adblock, pocket etc… bus

but there is something called compiler extensions

compiler extensions are some features that are provided by specific compilers (like GCC) which are not a part standards of that particular language.

e.g:– typeof() is a compiler extension for C. it is used to find out the type of the variable. but this is not a standard ISO feature of C language, but just provided that compiler.

Continue reading

Port, Port …Socket!!!

When listening to  Computer Networks class today I got the following interesting doubts which I got clarified by my professor


Q) what is doubt:- when every browser is allocated a port number 80 then how can multiple tabs of chrome or any browser can talk through that when only when process can be listened through one port ?
Ans:– servers listen through port-80 for browsers but not on client side..on client side your  OS uses port numbers >5000 so every new tab(as for google it is a process..read the below) uses a unique port number —i.e one process one port

Continue reading

Vanilla JS –this is ridiculous !!

uhaa sometimes pun is a necessity else it will be a boring life

I was shocked to know that Vanilla Js (the much heard name) is just a pun kind of thing

here is a website which jokingly expresses the meaning of Vanilla JS

     It is nothing but –A name to refer to using plain JavaScript without any additional libraries like jQuery. People use it as a joke to remind other developers that many things can be done nowadays without the need for additional JavaScript libraries.
     Moreover if you download what they are showing in that page –it is just a plain file which gets downloaded –Extraordinary pun :v
Screenshot from 2016-02-07 09:25:52.png


Big-Hero six

Big-Hero Six an animated movie from Walt Disney Animation Studios is a first super hero film from walt disney which they got inspired from marvel comics.

 [[ spoilers ahead ]]

I would rate the film with  3 /5 stars. the whole movie had best animation and was a blend of inspiration, science and research and more saliently about nerds . I am sure kids would have been spellbound with the fictional science that is exhibited by the movie.but the true drawback of this film is one can speculate the next moves in the film.

Continue reading