Data visualization engine – Part 1: visualizing

June 27, 2011 by ted | 0 comments

I want to make a score visualization engine that would be use represent a huge amount of data using graphs and statistics. The option to generate custom on-the-go graphs is mandatory and should be simple to achieve. Ill divide the algorithm in three parts ( three articles).

Acquiring the data.
Saving and organizing the data.
Visualizing the data.

In this article I’ll start with how to visualize the data. Javascript and HTML5 will be the main technologies used in order to draw the graphs. I’ll start with a concrete example and I’ll go step by step to build the visualization engine with the example.

Context: A dart game where each players starts with 200 points and the goal is to get to the score of zero using 3 darts each round. In order to win, the players have to get zero or under.

Objective: I want to make a graph representing the sum of the darts from each players for each round for a game.

Data:

Round #	Ted (points)	Justin (points)
1	5 18 5	17 19 8
2	4 4 1	40 18 17
3	16 11 7	8 8 7
4	38 16 14	51 21
5	19 15 11	12 11 1

Method:

Let’s make a first graph that have the score on the Y axis and the round number on the X axis. Each player will be represented by a color. Each set of coordinate will be based on the collected data and represent a sum of darts at a precise round in the game. The graph sould look like this:

The previous graph used a point to point line and also a rectangle representing each point. In order to draw, I’ll use an HTML convas object to display the drawing and create a javascript script to draw on the on it.

Here’s the HTML code for the canvas:

<html>
	<head><head>
	<body>
		<canvas id="graph"></convas>
	</body>
</html>

Now I will start writing the javascript, I begin by assigning a variable to the canvas object and then declare a function that draw a line between two sets of coordinates:

var graph = document.getElementById("graph");
var g = graph.getContext('2d');
g.height = 400;
g.width = 600;

var drawLine = function(x1,y1,x2,y2, color)
{
	y1 = g.height - y1; //inverting y axis
	y2 = g.height - y2;
	g.beginPath();
	g.strokeStyle = color;
	g.lineTo(x1, y1);
	g.lineTo(x2, y2);
	g.stroke();
}

And here’s another useful function that draws rectangles instead of lines:

var drawRect = function(x,y,height,width,color)
{
 y = g.height - y;
 height = g.height - height;

 g.fillStyle = color;
 g.beginPath();
 g.rect(x,y,width, height);
 g.closePath();
 g.fill();
}

Given an fixed interval for the x axis that is all I needed in order to build this graph.

Here’s the code used in order to generate the previous graph, I started by declaring some data for the two players, then for each data I draw the line’s segment and the rectangle.

//x interval
var intervall = 20;

//data
var dataPlayer1 = new Array("41","18","33","36","7","17","19","59","67");
var dataPlayer2 = new Array("22","54","29","43","8","38","43","26","22");

//temporary variables used to draw lines, not rectangles
var tmpy1 = 0;
var tmpy2 = 0;
var tmpx1 = 0;
var tmpx2 = 0;

//controller for each data
for(var i = 1 ; i < dataPlayer1.length && i < dataPlayer2.length; i++)
{
 //draw lines
 drawLine(tmpx1, tmpy1, (i+1) * intervall, dataPlayer1[i], "#000000");
 drawLine(200 + tmpx2, tmpy2, 200 + (i+1) * intervall, dataPlayer2[i], "#FF0033");

 //draw rectangles
 drawRect(intervall * i, dataPlayer1[i], 0, intervall, "rgba(0,0,0,0.4");
 drawRect(200 + intervall * i, dataPlayer2[i], 0, intervall, "rgba(255,0,51,0.4)");

 //update temp variables
 tmpy1 = dataPlayer1[i];
 tmpx1 = (i+1) * intervall;
 tmpy2 = dataPlayer2[i];
 tmpx2 = (i+1) * intervall;
}

Grab the full sources here and check out the live example here.

There is an infinite way to draw graph using canvas. If you love the subject then maybe you should look into circular diagram or some 3D representations. Just remember that the code is executed by the client, so you need to avoid having a slow and heavy application.

Share this: