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()
.scale(x)
.orient(“bottom”);

var yAxis = d3.svg.axis()
.scale(y)
.orient(“left”)
.tickFormat(formatPercent);

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)
.append(“g”)
.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:

svg.append(“g”)
.attr(“class”, “x axis”)
.attr(“transform”, “translate(0,” + height + “)”)
.call(xAxis);

svg.append(“g”)
.attr(“class”, “y axis”)
.call(yAxis)
.append(“text”)
.attr(“transform”, “rotate(-90)”)
.attr(“y”, 6)
.attr(“dy”, “.71em”)
.style(“text-anchor”, “end”)
.text(“Frequency”);

svg.selectAll(“.bar”)
.data(data)
.enter().append(“rect”)
.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.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s