D3 Visualization Step by Step : Part 2

In general, if you have used jquery you might have got used to the concept of chaining. Since d3 extensively uses that knowledge on chaining would help. In addition you also need to learn little about the path element in html.

In the steps towards a simple line chart we would need the following:

a. Data [607,788,274,117,140,89,158,664] – No. of people killed in accidents in various cities till 2010 in TamilNadu, India
b. X-Axis
c. Y-Axis

The X-Axis will contain cities and the Y-Axis will contain the Number of people killed in the accident.

Step 1: Initially we will set the Height, width and margin of the graph

Step 2: Determine the scales using the d3.scale.linear() method for defining the scales of X-Axis and Y-axis. Linear scales are the most common scale, and a good default choice to map a continuous input domain to a continuous output range.

In our case we are providing input array as input to the domain and range methods, this will help set the values for y-axis.

var xAxis = d3.svg.axis()

var yAxis = d3.svg.axis()

Step 3: Now select the body element using the d3 method and append an SVG Graphic to the same. Height and width are passed as attribute to set the right width and height.

var svg = d3.select(“body”).append(“svg”)
.attr(“width”, width + margin.left + margin.right)
.attr(“height”, height + margin.top + margin.bottom)
.attr(“transform”, “translate(” + margin.left + “,” + margin.top + “)”);

Step 4: As we discussed now we are going to visualize the chart with the data using d3.tsv which loads data from a Tab Separated Value file

d3.tsv(“data.tsv”, type, function(error, data) {
x.domain(data.map(function(d) { return d.letter; }));
y.domain([0, d3.max(data, function(d) { return d.frequency; })]);

Step 5: Add all the components to the SVG area already defined as given below:

.attr(“class”, “x axis”)
.attr(“transform”, “translate(0,” + height + “)”)

.attr(“class”, “y axis”)
.attr(“transform”, “rotate(-90)”)
.attr(“y”, 6)
.attr(“dy”, “.71em”)
.style(“text-anchor”, “end”)

.attr(“class”, “bar”)
.attr(“x”, function(d) { return x(d.letter); })
.attr(“width”, x.rangeBand())
.attr(“y”, function(d) { return y(d.frequency); })
.attr(“height”, function(d) { return height – y(d.frequency); });

The final outcome is shown in the picture below:

Road Accidents till 2010 tamilnadu

This example has been done using d3 Library, HTML, CSS3 with WAMP. Certainly its complex for somebody to learn, I will try to evaluate the libraries d3 which can help improve the easy developing such graphs easily.

First d3.js Visualization: Step by Step-Road Accidents in cities by years 2010

Before you start?

You need to know what chart you need to draw.

What is D3?

D3.js is a Javascript Library developed by Mike Bostock. It’s a great tool for visualizing data.

D3 -> data, driven and documents.

Why would somebody would like to visualize data would need to learn these technologies?

Knowledge on HTML, CSS, JavaScript, JSON, PHP and Apache helps to build data visualization using d3.js You can develop your own visualization with a very fundamental knowledge on the same. You can go to w3school.com to get a good grip of these fundamentals.

Any d3 visualization would need the following 3 components:

What to present? How to present? Where to Present?

What to Present : Data: (Either through Json or passing data to Javascript)

How to Present: Structure: Using HTML & CSS

Where to Present: Layout: Specify how its to be generated using Javascript & D3.

Use case:

Now let’s try to depict the No. of people killed in accidents in important cities of the State TamilNadu in India by the year 2010.

Chennai City












Trichy City




Source: http://www.tn.gov.in/deptst/RoadAndTransport.pdf

Refer to the code available in : http://jsfiddle.net/seesiva/qjrZf/3/

We will see how to render the chart in my next post. Request your feedback. Thanks.