Data-Driven Documents

D3.js is a JavaScript library for manipulating documents based on data. D3 helps you bring data to life using HTML, SVG, and CSS. D3’s emphasis on web standards gives you the full capabilities of modern browsers without tying yourself to a proprietary framework, combining powerful visualization components and a data-driven approach to DOM manipulation.

In simple language, D3 allows you to bind arbitrary data to a Document Object Model (DOM), and then apply data-driven transformations to the document. For example, you can use D3 to generate an HTML table from an array of numbers. Or, use the same data to create an interactive SVG bar chart with smooth transitions and interaction.

Download d3.js from the following github link:-

https://github.com/mbostock/d3/releases/download/v3.5.6/d3.zip

Or, you can fork the repository from the given link:-

https://github.com/mbostock/d3

Or, to link directly to the latest release, copy this snippet:

https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js

To learn about d3.js, you can follow the official documentation or these tutorials:

https://github.com/mbostock/d3/wiki/Tutorials

A Simple Example of LineChart using d3.js:

d3.js, a JavaScript library for manipulating documents based on data in an interactive way. First off, we need to draw some axes using D3. For this, we’ll need SVG in our HTML page. SVG stands for Scalable Vector Graphics, is a XML based vector image format that offers support for interaction and animation. Notice the reference to D3 and the svg tag in the body of following code:

<!DOCTYPE html>
<html>
   <head>
      <meta charset = "utf-8">
      <script type="text/JavaScript" src= d3.js">
      <script src="jquery.js">
      <script src="d3.min.js">
      <script>
         $(function() {
	   InitChart();
	});

 	 function InitChart() {
		// Chart creation code goes here
         }
      </script>
   </head>
   <body>
      <svg id="visualisation" width="1000" height="500">
   </body>
</html>

d3.js has APIs to draw axis and here we’ll use d3.scale.linear, which is used to create quatitative scale. So, using this, we will define range and domain for each axis. The domain defines minimum and maximum values to be displayed on the graph.

xRange = d3.scale.linear().range([MARGINS.left, WIDTH - MARGINS.right])
		.domain([d3.min(sampleData, function(d) { return (d.x); }),
		d3.max(sampleData, function(d) { return (d.x); })
		]);

yRange = d3.scale.linear().range([HEIGHT - MARGINS.top, MARGINS.bottom])
		.domain([d3.min(sampleData, function(d) { return (d.y); }),
		d3.max(sampleData, function(d) { return (d.y); })
		]);

In order to scale two axes, use axis.scale

var xAxis = d3.svg.axis().scale(xRange).tickSize(5);
var yAxis = d3.svg.axis().scale(yRange).tickSize(5).orient("left");

To learn about SVGaxes, follow this: https://github.com/mbostock/d3/wiki/SVG-Axes Now, append the x and y axes to the SVG element via JavaScript:

vis.append("svg:g").attr('class', 'x axis').call(xAxis).attr('transform', 'translate(0, '+ (HEIGHT - MARGINS.bottom)+')');
vis.append("svg:g").attr('class', 'y axis').call(yAxis).attr('transform', 'translate('+ (MARGINS.left) + ',0)');

Because two line are overlapping each other, so we have used .attr('transform', 'translate(0,'+(HEIGHT - MARGINS.bottom)+)'), to make it visible.

Now, we also need some data to plot. So write these data values in script tag.

var sampleData = [{ "x" : 10, "y" : 10 },
				  { "x" : 20, "y": 20},
				  { "x" : 40, "y": 30},
				  { "x" : 60, "y": 40},
				  { "x" : 80, "y": 70 },
				  { "x" : 100,"y": 130}
				  ];

Id: visualisation, containing width, height and margins for SVG.

		var vis = d3.select("#visualisation");
		WIDTH = 1000,
		HEIGHT = 500,
		MARGINS = {
			top: 20,
			right: 20,
			bottom: 20,
			left: 50
			  },
		

Then, write the following function to draw a line as per the values available on the axes.

var lineFunc = d3.svg.line()
		   .x(function(d) {
			return xRange(d.x);
		})
		   .y(function(d) {
			return yRange(d.y);
		})
		.interpolate('linear');

	vis.append('svg:path')
	.attr('d', lineFunc(sampleData))
	.attr('stroke', 'blue')
	.attr('stroke-width', 2)
	.attr('fill', 'none');

	}

The interpolate(‘linear’) call tells D3 to draw straight lines. We have set the line color using stroke. The line’s width is defined using stroke-width. We have set fill to none.
Output will be like this:
a

In next post, we’ll learn how to give zooming effect in Chart/graph.

Advertisements

Published by

kaurdavinder

I am the one who discover myself daily through reading, writing, interacting with people and expressing my thoughts to inspire them if I would be able to bring a little change to the society through my work. I write blogs, participate in various social activities and want to be a Professional Speaker. Currently, I am pursuing my post graduation in Computer Applications from Guru Nanak Dev Engineering College, Ludhiana and I’m very much active in many technical & social communities.

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