treeform · December 5, 2012 16:21
diff --git a/index.html b/index.html
 <html>
 	<head>
 		<title>Line graph over time with multiple data points using SVG and d3.js</title>
 		<script src="http://mbostock.github.com/d3/d3.v2.js"></script>
 		<style>
 			body {
 				font-family: "Helvetica Neue", Helvetica;
 			}
 		
 			/* tell the SVG path to be a thin blue line without any area fill */
 			path {
 				stroke-width: 1;
 				fill: none;
 			}
 			
 			.data1 {
 				stroke: green;
 			}

 			.data2 {
 				stroke: orange;
 			}
 			
 			.axis {
 			  shape-rendering: crispEdges;
 			}

 			.x.axis line {
 			  stroke: lightgrey;
 			}

 			.x.axis .minor {
 			  stroke-opacity: .5;
 			}

 			.x.axis path {
 			  display: none;
 			}
 			
 			.x.axis text {
 				font-size: 10px;
 			}

 			.y.axis line, .y.axis path {
 			  fill: none;
 			  stroke: #000;
 			}
 			
 			.y.axis text {
 				font-size: 12px;
 			}

 			
 			
 		</style>
 	</head>
 	<body>


 	<div id="graph" class="aGraph" style="position:absolute;top:0px;left:0; float:left;"></div>


 	<script>
 		/* implementation heavily influenced by http://bl.ocks.org/1166403 */
 		
 		// define dimensions of graph
 		var m = [80, 80, 80, 80]; // margins
 		var w = 1000 - m[1] - m[3];	// width
 		var h = 400 - m[0] - m[2]; // height
 			
 		/* 
 		 * sample data to plot over time
 		 * 		[Success, Failure]
 		 *		Start: 1335035400000
 		 *		End: 1335294600000
 		 *		Step: 300000ms	
 		 */
 		var data = [[2008,2002],[28,2001],[28,2005],[28,2004],[28,2002],[29,2001],[29,2004],[29,2002],[28,2001],[29,2004],[29,2000],[29,21],[29,24],[29,24],[30,24],[28,22],[28,21],[28,22],[28,24],[29,24],[28,22],[30,26],[31,22],[32,26],[30,24],[31,22],[30,27],[30,25],
 		[30,20],[31,23],[31,24],[30,25],[31,23],[31,27],[31,48],[33,32],[31,28],[32,39],[31,27],[32,24],[34,28],[32,29],[34,27],[34,28],[33,29],[34,28],[34,31],[36,27],[34,28],[35,28],[35,56],[37,42],[36,34],[38,38],[37,41],[37,35],[38,35],
 		[38,34],[39,33],[43,34],[42,37],[41,43],[44,89],[42,50],[41,39],[43,38],[42,37],[41,45],[42,42],[43,38],[42,37],[46,37],[47,39],[45,46],[44,40],[45,36],[45,104],[45,51],[45,40],[45,42],[45,46],[44,49],[44,52],[45,53],[44,54],[43,60],
 		[44,56],[44,53],[44,48],[43,51],[43,46],[42,43],[42,42],[41,43],[43,48],[43,44],[42,42],[41,38],[40,36],[41,40],[39,44],[39,41],[38,41],[36,37],[37,37],[35,40],[35,36],[36,41],[34,34],[32,35],[32,31],[32,32],[32,37],[31,30],[31,31],
 		[30,31],[30,29],[28,28],[29,31],[29,36],[30,50],[27,30],[25,29],[24,29],[23,29],[22,25],[22,24],[21,28],[20,23],[21,23],[21,24],[20,23],[19,19],[19,22],[20,26],[17,23],[18,20],[16,21],[15,17],[17,17],[15,20],[15,17],[14,21],[14,18],
 		[12,17],[12,17],[12,12],[12,15],[12,12],[11,14],[11,14],[11,13],[11,12],[11,14],[10,12],[11,14],[10,12],[10,12],[10,11],[9,12],[9,13],[9,9],[9,11],[8,9],[11,10],[8,9],[9,9],[8,10],[7,9],[7,8],[7,9],[7,7],[7,7],[7,7],[7,6],[7,6],[7,6],
 		[7,6],[6,8],[7,7],[7,6],[7,7],[7,7],[7,6],[7,6],[7,7],[7,9],[7,8],[7,7],[7,7],[8,6],[9,7],[8,8],[9,8],[9,7],[10,7],[10,8],[10,12],[11,13],[11,9],[12,11],[11,15],[12,13],[12,11],[12,13],[14,20],[14,22],[14,13],[15,15],[15,29],[17,17],
 		[16,18],[18,18],[16,38],[17,27],[19,27],[18,29],[19,23],[19,33],[19,27],[20,20],[20,21],[21,32],[20,27],[20,21],[21,19],[21,1009],[22,19],[22,22],[21,18],[23,20],[23,25],[24,38],[25,21],[24,44],[24,26],[24,22],[24,22],[25,46],[26,30],
 		[25,23],[25,24],[25,22],[25,21],[26,22],[26,20],[27,29],[27,23],[26,24],[26,23],[27,20],[28,22],[27,22],[28,29],[27,25],[27,26],[27,26],[28,27],[28,45],[27,46],[27,29],[28,44],[27,32],[29,32],[28,31],[29,28],[29,26],[28,24],[30,27],
 		[30,34],[30,27],[29,24],[30,25],[32,25],[32,24],[33,28],[30,26],[30,32],[30,26],[29,27],[31,56],[31,29],[31,29],[32,30],[32,26],[32,29],[33,28],[34,31],[32,29],[33,29],[32,31],[32,28],[32,28],[32,28],[33,28],[32,30],[32,29],[32,27],
 		[33,26],[34,30],[34,29],[33,30],[33,33],[35,55],[34,42],[34,34],[34,30],[34,33],[33,35],[34,30],[35,31],[35,34],[35,32],[35,29],[35,32],[35,30],[35,30],[35,29],[35,31],[36,30],[35,32],[36,32],[36,33],[38,34],[36,34],[37,32],[36,32],
 		[36,32],[37,34],[37,34],[37,40],[37,35],[38,33],[39,37],[40,34],[42,37],[39,39],[39,38],[40,35],[39,38],[41,90],[41,45],[41,39],[41,39],[42,49],[41,36],[43,41],[47,38],[46,44],[46,50],[43,55],[43,43],[44,64],[43,78],[44,48],[44,46],
 		[42,77],[43,82],[48,57],[48,53],[47,50],[45,54],[43,43],[45,91],[44,67],[43,40],[43,38],[41,41],[43,39],[47,45],[41,49],[44,42],[43,43],[44,62],[42,41],[39,40],[39,40],[39,57],[40,106],[39,68],[36,40],[36,39],[36,41],[39,40],[37,39],
 		[37,38],[35,34],[34,33],[34,41],[36,38],[33,35],[32,32],[31,33],[30,38],[30,37],[31,32],[28,30],[29,34],[27,33],[26,28],[25,28],[25,27],[24,27],[24,27],[22,24],[21,25],[20,22],[22,23],[21,26],[20,23],[19,23],[18,19],[18,19],[17,19],
 		[17,19],[16,17],[15,19],[15,14],[15,17],[14,18],[13,15],[13,16],[13,16],[12,14],[11,14],[13,12],[14,11],[12,14],[10,10],[10,13],[10,11],[10,13],[9,14],[9,10],[9,8],[9,11],[9,9],[8,8],[8,11],[8,10],[8,8],[8,10],[8,8],[8,9],[7,8],[7,8],
 		[7,7],[6,7],[6,7],[6,8],[6,6],[7,7],[9,7],[7,7],[6,7],[6,7],[6,7],[6,7],[6,7],[6,7],[5,5],[6,5],[5,6],[5,5],[6,6],[5,6],[6,6],[6,7],[6,6],[6,6],[7,6],[7,7],[7,6],[7,7],[8,7],[7,7],[7,7],[8,7],[8,7],[9,8],[8,8],[9,8],[10,8],[10,8],[10,8],
 		[10,8],[10,9],[10,9],[11,9],[10,10],[10,11],[10,11],[11,11],[11,10],[11,10],[12,14],[11,9],[11,10],[11,11],[12,10],[12,9],[11,9],[12,9],[12,14],[12,14],[12,10],[13,10],[13,11],[13,13],[12,23],[14,9],[13,9],[13,8],[13,11],[13,18],[14,9],
 		[14,8],[14,8],[15,15],[14,18],[15,10],[14,13],[14,10],[14,10],[14,11],[14,10],[14,8],[15,10],[15,12],[15,11],[15,11],[15,20],[14,15],[14,9],[14,11],[14,11],[14,11],[14,11],[16,11],[16,11],[15,10],[16,11],[16,12],[15,12],[16,24],[16,15],
 		[16,14],[15,12],[16,11],[16,11],[17,13],[17,12],[17,13],[16,12],[17,15],[16,31],[17,15],[17,12],[17,13],[18,14],[17,12],[17,13],[17,14],[17,14],[16,14],[17,16],[17,15],[17,14],[18,14],[17,16],[18,20],[18,26],[18,15],[19,16],[20,17],
 		[20,16],[19,15],[21,18],[19,14],[20,16],[20,16],[21,28],[20,34],[23,19],[24,21],[23,38],[23,27],[24,18],[24,25],[23,24],[25,24],[24,21],[25,21],[24,21],[27,24],[25,21],[25,28],[26,46],[25,25],[28,34],[27,51],[26,34],[27,30],[27,27],
 		[27,24],[28,26],[27,27],[26,31],[28,24],[28,22],[28,24],[30,24],[30,25],[30,25],[31,25],[30,38],[31,63],[32,37],[30,28],[30,63],[32,41],[32,33],[33,31],[34,25],[33,26],[32,27],[33,30],[34,37],[35,31],[35,31],[35,40],[35,57],[35,30],
 		[35,37],[38,39],[40,40],[38,36],[39,41],[39,33],[37,39],[39,74],[39,39],[40,35],[39,42],[39,45],[38,37],[39,34],[43,37],[42,32],[40,31],[40,35],[39,32],[39,36],[40,33],[40,29],[38,35],[40,36],[38,35],[39,73],[43,49],[41,43],[40,49],
 		[40,46],[38,38],[39,40],[38,40],[38,37],[35,33],[36,33],[35,30],[35,30],[36,31],[35,34],[35,32],[34,31],[33,35],[33,30],[33,32],[32,34],[30,32],[30,29],[29,27],[28,29],[29,32],[27,27],[26,31],[26,25],[25,27],[25,26],[24,25],[23,24],
 		[23,24],[21,21],[21,25],[21,21],[21,22],[21,22],[20,23],[19,20],[18,19],[17,16],[18,19],[17,21],[15,15],[15,17],[15,18],[14,15],[14,16],[13,14],[13,15],[14,13],[12,11],[12,11],[14,12],[13,12],[11,14],[10,10],[10,12],[10,10],[10,9],
 		[10,11],[9,8],[9,9],[9,8],[8,10],[8,10],[9,9],[8,9],[8,11],[8,9],[9,9],[8,7],[8,9],[7,7],[7,6],[7,7],[7,8],[7,6],[7,7],[7,6],[9,7],[7,5],[7,6],[6,6],[7,7],[6,6],[6,6],[6,5],[6,5],[6,6],[6,6],[6,5],[6,6],[6,5],[6,5],[6,6],[7,5],[7,5],
 		[7,5],[8,5],[8,5],[8,5],[8,5],[9,6],[9,7],[9,6],[9,7],[10,7],[10,6],[10,6],[10,6],[11,6],[11,7],[12,8],[12,8],[12,8],[13,9],[12,7],[13,7],[13,17],[13,10],[13,7],[12,8],[13,8],[14,10],[14,18],[13,17],[13,8],[13,8],[13,7],[13,8],[14,8],
 		[14,9],[14,8],[15,8],[14,8],[15,8],[14,10],[15,9],[15,7],[15,9],[15,11],[25,110],[16,9],[16,18],[25,138],[16,13],[18,25],[16,11],[16,9],[15,10],[15,9],[16,11],[16,10],[16,10],[17,11],[16,11],[16,12],[16,9],[16,11],[16,11],[17,12],
 		[15,11],[16,11],[16,10],[16,10],[16,9],[18,10],[16,10],[17,18],[17,17],[17,12],[18,27],[17,17],[17,16],[17,12],[17,15],[17,15],[18,13],[18,13],[17,13],[18,13],[18,15],[18,13],[18,13],[20,12],[19,13],[18,13],[18,12],[18,13],[18,13],
 		[19,14],[19,13],[19,13],[18,17],[19,27],[19,18],[19,16],[19,12],[20,13],[19,13],[19,13],[20,13]];
 		
 		var startTime = new Date(1335035400000);
 		var endTime = new Date(1335294600000);
 		var timeStep = 300000;
 		
 		// X scale starts at epoch time 1335035400000, ends at 1335294600000 with 300s increments
 		var x = d3.time.scale().domain([startTime, endTime]).range([0, w]);
 		x.tickFormat(d3.time.format("%Y-%m-%d"));
 		// Y scale will fit values from 0-10 within pixels h-0 (Note the inverted domain for the y-scale: bigger is up!)
 		var y = d3.scale.linear().domain([0, d3.max(data, function(d) { return d[1]; })]).range([h, 0]);

 		// create a line function that can convert data[] into x and y points
 		var line1 = d3.svg.line()
 			// assign the X function to plot our line as we wish
 			.x(function(d,i) { 
 				// verbose logging to show what's actually being done
 				//console.log('Plotting X value for data point: ' + d + ' using index: ' + i + ' to be at: ' + x(i) + ' using our xScale.');
 				// return the X coordinate where we want to plot this datapoint
 				return x(startTime.getTime() + (timeStep*i)); 
 			})
 			.y(function(d) { 
 				// verbose logging to show what's actually being done
 				//console.log('Plotting Y value for data point: ' + d + ' to be at: ' + y(d) + " using our yScale.");
 				// return the Y coordinate where we want to plot this datapoint
 				return y(d[0]); // use the 1st index of data (for example, get 20 from [20,13])
 			})
 			
 			var line2 = d3.svg.line()
 				// assign the X function to plot our line as we wish
 				.x(function(d,i) { 
 					// verbose logging to show what's actually being done
 					//console.log('Plotting X value for data point: ' + d + ' using index: ' + i + ' to be at: ' + x(i) + ' using our xScale.');
 					// return the X coordinate where we want to plot this datapoint
 					return x(startTime.getTime() + (timeStep*i)); 
 				})
 				.y(function(d) { 
 					// verbose logging to show what's actually being done
 					//console.log('Plotting Y value for data point: ' + d + ' to be at: ' + y(d) + " using our yScale.");
 					// return the Y coordinate where we want to plot this datapoint
 					return y(d[1]); // use the 2nd index of data (for example, get 13 from [20,13])
 				})


 			// Add an SVG element with the desired dimensions and margin.
 			var graph = d3.select("#graph").append("svg:svg")
 			      .attr("width", w + m[1] + m[3])
 			      .attr("height", h + m[0] + m[2])
 			    .append("svg:g")
 			      .attr("transform", "translate(" + m[3] + "," + m[0] + ")");

 			// create yAxis
 			var xAxis = d3.svg.axis().scale(x).tickSize(-h).tickSubdivide(1);

 			// Add the x-axis.
 			graph.append("svg:g")
 			      .attr("class", "x axis")
 			      .attr("transform", "translate(0," + h + ")")
 			      .call(xAxis);


 			// create left yAxis
 			var yAxisLeft = d3.svg.axis().scale(y).ticks(6).orient("left");
 			// Add the y-axis to the left
 			graph.append("svg:g")
 			      .attr("class", "y axis")
 			      .attr("transform", "translate(-10,0)")
 			      .call(yAxisLeft);
 			
  			// add lines
  			// do this AFTER the axes above so that the line is above the tick-lines
    		graph.append("svg:path").attr("d", line1(data)).attr("class", "data1");
    		graph.append("svg:path").attr("d", line2(data)).attr("class", "data2");

 			
 	</script>

 	</body>
 </html>
	<html>
	<head>
	<title>Line graph over time with multiple data points using SVG and d3.js</title>
	<script src="http://mbostock.github.com/d3/d3.v2.js"></script>
	<style>
	body {
	font-family: "Helvetica Neue", Helvetica;
	}

	/* tell the SVG path to be a thin blue line without any area fill */
	path {
	stroke-width: 1;
	fill: none;
	}

	.data1 {
	stroke: green;
	}

	.data2 {
	stroke: orange;
	}

	.axis {
	shape-rendering: crispEdges;
	}

	.x.axis line {
	stroke: lightgrey;
	}

	.x.axis .minor {
	stroke-opacity: .5;
	}

	.x.axis path {
	display: none;
	}

	.x.axis text {
	font-size: 10px;
	}

	.y.axis line, .y.axis path {
	fill: none;
	stroke: #000;
	}

	.y.axis text {
	font-size: 12px;
	}



	</style>
	</head>
	<body>


	<div id="graph" class="aGraph" style="position:absolute;top:0px;left:0; float:left;"></div>


	<script>
	/* implementation heavily influenced by http://bl.ocks.org/1166403 */

	// define dimensions of graph
	var m = [80, 80, 80, 80]; // margins
	var w = 1000 - m[1] - m[3]; // width
	var h = 400 - m[0] - m[2]; // height

	/*
	* sample data to plot over time
	* [Success, Failure]
	* Start: 1335035400000
	* End: 1335294600000
	* Step: 300000ms
	*/
	var data = [[2008,2002],[28,2001],[28,2005],[28,2004],[28,2002],[29,2001],[29,2004],[29,2002],[28,2001],[29,2004],[29,2000],[29,21],[29,24],[29,24],[30,24],[28,22],[28,21],[28,22],[28,24],[29,24],[28,22],[30,26],[31,22],[32,26],[30,24],[31,22],[30,27],[30,25],
	[30,20],[31,23],[31,24],[30,25],[31,23],[31,27],[31,48],[33,32],[31,28],[32,39],[31,27],[32,24],[34,28],[32,29],[34,27],[34,28],[33,29],[34,28],[34,31],[36,27],[34,28],[35,28],[35,56],[37,42],[36,34],[38,38],[37,41],[37,35],[38,35],
	[38,34],[39,33],[43,34],[42,37],[41,43],[44,89],[42,50],[41,39],[43,38],[42,37],[41,45],[42,42],[43,38],[42,37],[46,37],[47,39],[45,46],[44,40],[45,36],[45,104],[45,51],[45,40],[45,42],[45,46],[44,49],[44,52],[45,53],[44,54],[43,60],
	[44,56],[44,53],[44,48],[43,51],[43,46],[42,43],[42,42],[41,43],[43,48],[43,44],[42,42],[41,38],[40,36],[41,40],[39,44],[39,41],[38,41],[36,37],[37,37],[35,40],[35,36],[36,41],[34,34],[32,35],[32,31],[32,32],[32,37],[31,30],[31,31],
	[30,31],[30,29],[28,28],[29,31],[29,36],[30,50],[27,30],[25,29],[24,29],[23,29],[22,25],[22,24],[21,28],[20,23],[21,23],[21,24],[20,23],[19,19],[19,22],[20,26],[17,23],[18,20],[16,21],[15,17],[17,17],[15,20],[15,17],[14,21],[14,18],
	[12,17],[12,17],[12,12],[12,15],[12,12],[11,14],[11,14],[11,13],[11,12],[11,14],[10,12],[11,14],[10,12],[10,12],[10,11],[9,12],[9,13],[9,9],[9,11],[8,9],[11,10],[8,9],[9,9],[8,10],[7,9],[7,8],[7,9],[7,7],[7,7],[7,7],[7,6],[7,6],[7,6],
	[7,6],[6,8],[7,7],[7,6],[7,7],[7,7],[7,6],[7,6],[7,7],[7,9],[7,8],[7,7],[7,7],[8,6],[9,7],[8,8],[9,8],[9,7],[10,7],[10,8],[10,12],[11,13],[11,9],[12,11],[11,15],[12,13],[12,11],[12,13],[14,20],[14,22],[14,13],[15,15],[15,29],[17,17],
	[16,18],[18,18],[16,38],[17,27],[19,27],[18,29],[19,23],[19,33],[19,27],[20,20],[20,21],[21,32],[20,27],[20,21],[21,19],[21,1009],[22,19],[22,22],[21,18],[23,20],[23,25],[24,38],[25,21],[24,44],[24,26],[24,22],[24,22],[25,46],[26,30],
	[25,23],[25,24],[25,22],[25,21],[26,22],[26,20],[27,29],[27,23],[26,24],[26,23],[27,20],[28,22],[27,22],[28,29],[27,25],[27,26],[27,26],[28,27],[28,45],[27,46],[27,29],[28,44],[27,32],[29,32],[28,31],[29,28],[29,26],[28,24],[30,27],
	[30,34],[30,27],[29,24],[30,25],[32,25],[32,24],[33,28],[30,26],[30,32],[30,26],[29,27],[31,56],[31,29],[31,29],[32,30],[32,26],[32,29],[33,28],[34,31],[32,29],[33,29],[32,31],[32,28],[32,28],[32,28],[33,28],[32,30],[32,29],[32,27],
	[33,26],[34,30],[34,29],[33,30],[33,33],[35,55],[34,42],[34,34],[34,30],[34,33],[33,35],[34,30],[35,31],[35,34],[35,32],[35,29],[35,32],[35,30],[35,30],[35,29],[35,31],[36,30],[35,32],[36,32],[36,33],[38,34],[36,34],[37,32],[36,32],
	[36,32],[37,34],[37,34],[37,40],[37,35],[38,33],[39,37],[40,34],[42,37],[39,39],[39,38],[40,35],[39,38],[41,90],[41,45],[41,39],[41,39],[42,49],[41,36],[43,41],[47,38],[46,44],[46,50],[43,55],[43,43],[44,64],[43,78],[44,48],[44,46],
	[42,77],[43,82],[48,57],[48,53],[47,50],[45,54],[43,43],[45,91],[44,67],[43,40],[43,38],[41,41],[43,39],[47,45],[41,49],[44,42],[43,43],[44,62],[42,41],[39,40],[39,40],[39,57],[40,106],[39,68],[36,40],[36,39],[36,41],[39,40],[37,39],
	[37,38],[35,34],[34,33],[34,41],[36,38],[33,35],[32,32],[31,33],[30,38],[30,37],[31,32],[28,30],[29,34],[27,33],[26,28],[25,28],[25,27],[24,27],[24,27],[22,24],[21,25],[20,22],[22,23],[21,26],[20,23],[19,23],[18,19],[18,19],[17,19],
	[17,19],[16,17],[15,19],[15,14],[15,17],[14,18],[13,15],[13,16],[13,16],[12,14],[11,14],[13,12],[14,11],[12,14],[10,10],[10,13],[10,11],[10,13],[9,14],[9,10],[9,8],[9,11],[9,9],[8,8],[8,11],[8,10],[8,8],[8,10],[8,8],[8,9],[7,8],[7,8],
	[7,7],[6,7],[6,7],[6,8],[6,6],[7,7],[9,7],[7,7],[6,7],[6,7],[6,7],[6,7],[6,7],[6,7],[5,5],[6,5],[5,6],[5,5],[6,6],[5,6],[6,6],[6,7],[6,6],[6,6],[7,6],[7,7],[7,6],[7,7],[8,7],[7,7],[7,7],[8,7],[8,7],[9,8],[8,8],[9,8],[10,8],[10,8],[10,8],
	[10,8],[10,9],[10,9],[11,9],[10,10],[10,11],[10,11],[11,11],[11,10],[11,10],[12,14],[11,9],[11,10],[11,11],[12,10],[12,9],[11,9],[12,9],[12,14],[12,14],[12,10],[13,10],[13,11],[13,13],[12,23],[14,9],[13,9],[13,8],[13,11],[13,18],[14,9],
	[14,8],[14,8],[15,15],[14,18],[15,10],[14,13],[14,10],[14,10],[14,11],[14,10],[14,8],[15,10],[15,12],[15,11],[15,11],[15,20],[14,15],[14,9],[14,11],[14,11],[14,11],[14,11],[16,11],[16,11],[15,10],[16,11],[16,12],[15,12],[16,24],[16,15],
	[16,14],[15,12],[16,11],[16,11],[17,13],[17,12],[17,13],[16,12],[17,15],[16,31],[17,15],[17,12],[17,13],[18,14],[17,12],[17,13],[17,14],[17,14],[16,14],[17,16],[17,15],[17,14],[18,14],[17,16],[18,20],[18,26],[18,15],[19,16],[20,17],
	[20,16],[19,15],[21,18],[19,14],[20,16],[20,16],[21,28],[20,34],[23,19],[24,21],[23,38],[23,27],[24,18],[24,25],[23,24],[25,24],[24,21],[25,21],[24,21],[27,24],[25,21],[25,28],[26,46],[25,25],[28,34],[27,51],[26,34],[27,30],[27,27],
	[27,24],[28,26],[27,27],[26,31],[28,24],[28,22],[28,24],[30,24],[30,25],[30,25],[31,25],[30,38],[31,63],[32,37],[30,28],[30,63],[32,41],[32,33],[33,31],[34,25],[33,26],[32,27],[33,30],[34,37],[35,31],[35,31],[35,40],[35,57],[35,30],
	[35,37],[38,39],[40,40],[38,36],[39,41],[39,33],[37,39],[39,74],[39,39],[40,35],[39,42],[39,45],[38,37],[39,34],[43,37],[42,32],[40,31],[40,35],[39,32],[39,36],[40,33],[40,29],[38,35],[40,36],[38,35],[39,73],[43,49],[41,43],[40,49],
	[40,46],[38,38],[39,40],[38,40],[38,37],[35,33],[36,33],[35,30],[35,30],[36,31],[35,34],[35,32],[34,31],[33,35],[33,30],[33,32],[32,34],[30,32],[30,29],[29,27],[28,29],[29,32],[27,27],[26,31],[26,25],[25,27],[25,26],[24,25],[23,24],
	[23,24],[21,21],[21,25],[21,21],[21,22],[21,22],[20,23],[19,20],[18,19],[17,16],[18,19],[17,21],[15,15],[15,17],[15,18],[14,15],[14,16],[13,14],[13,15],[14,13],[12,11],[12,11],[14,12],[13,12],[11,14],[10,10],[10,12],[10,10],[10,9],
	[10,11],[9,8],[9,9],[9,8],[8,10],[8,10],[9,9],[8,9],[8,11],[8,9],[9,9],[8,7],[8,9],[7,7],[7,6],[7,7],[7,8],[7,6],[7,7],[7,6],[9,7],[7,5],[7,6],[6,6],[7,7],[6,6],[6,6],[6,5],[6,5],[6,6],[6,6],[6,5],[6,6],[6,5],[6,5],[6,6],[7,5],[7,5],
	[7,5],[8,5],[8,5],[8,5],[8,5],[9,6],[9,7],[9,6],[9,7],[10,7],[10,6],[10,6],[10,6],[11,6],[11,7],[12,8],[12,8],[12,8],[13,9],[12,7],[13,7],[13,17],[13,10],[13,7],[12,8],[13,8],[14,10],[14,18],[13,17],[13,8],[13,8],[13,7],[13,8],[14,8],
	[14,9],[14,8],[15,8],[14,8],[15,8],[14,10],[15,9],[15,7],[15,9],[15,11],[25,110],[16,9],[16,18],[25,138],[16,13],[18,25],[16,11],[16,9],[15,10],[15,9],[16,11],[16,10],[16,10],[17,11],[16,11],[16,12],[16,9],[16,11],[16,11],[17,12],
	[15,11],[16,11],[16,10],[16,10],[16,9],[18,10],[16,10],[17,18],[17,17],[17,12],[18,27],[17,17],[17,16],[17,12],[17,15],[17,15],[18,13],[18,13],[17,13],[18,13],[18,15],[18,13],[18,13],[20,12],[19,13],[18,13],[18,12],[18,13],[18,13],
	[19,14],[19,13],[19,13],[18,17],[19,27],[19,18],[19,16],[19,12],[20,13],[19,13],[19,13],[20,13]];

	var startTime = new Date(1335035400000);
	var endTime = new Date(1335294600000);
	var timeStep = 300000;

	// X scale starts at epoch time 1335035400000, ends at 1335294600000 with 300s increments
	var x = d3.time.scale().domain([startTime, endTime]).range([0, w]);
	x.tickFormat(d3.time.format("%Y-%m-%d"));
	// Y scale will fit values from 0-10 within pixels h-0 (Note the inverted domain for the y-scale: bigger is up!)
	var y = d3.scale.linear().domain([0, d3.max(data, function(d) { return d[1]; })]).range([h, 0]);

	// create a line function that can convert data[] into x and y points
	var line1 = d3.svg.line()
	// assign the X function to plot our line as we wish
	.x(function(d,i) {
	// verbose logging to show what's actually being done
	//console.log('Plotting X value for data point: ' + d + ' using index: ' + i + ' to be at: ' + x(i) + ' using our xScale.');
	// return the X coordinate where we want to plot this datapoint
	return x(startTime.getTime() + (timeStep*i));
	})
	.y(function(d) {
	// verbose logging to show what's actually being done
	//console.log('Plotting Y value for data point: ' + d + ' to be at: ' + y(d) + " using our yScale.");
	// return the Y coordinate where we want to plot this datapoint
	return y(d[0]); // use the 1st index of data (for example, get 20 from [20,13])
	})

	var line2 = d3.svg.line()
	// assign the X function to plot our line as we wish
	.x(function(d,i) {
	// verbose logging to show what's actually being done
	//console.log('Plotting X value for data point: ' + d + ' using index: ' + i + ' to be at: ' + x(i) + ' using our xScale.');
	// return the X coordinate where we want to plot this datapoint
	return x(startTime.getTime() + (timeStep*i));
	})
	.y(function(d) {
	// verbose logging to show what's actually being done
	//console.log('Plotting Y value for data point: ' + d + ' to be at: ' + y(d) + " using our yScale.");
	// return the Y coordinate where we want to plot this datapoint
	return y(d[1]); // use the 2nd index of data (for example, get 13 from [20,13])
	})


	// Add an SVG element with the desired dimensions and margin.
	var graph = d3.select("#graph").append("svg:svg")
	.attr("width", w + m[1] + m[3])
	.attr("height", h + m[0] + m[2])
	.append("svg:g")
	.attr("transform", "translate(" + m[3] + "," + m[0] + ")");

	// create yAxis
	var xAxis = d3.svg.axis().scale(x).tickSize(-h).tickSubdivide(1);

	// Add the x-axis.
	graph.append("svg:g")
	.attr("class", "x axis")
	.attr("transform", "translate(0," + h + ")")
	.call(xAxis);


	// create left yAxis
	var yAxisLeft = d3.svg.axis().scale(y).ticks(6).orient("left");
	// Add the y-axis to the left
	graph.append("svg:g")
	.attr("class", "y axis")
	.attr("transform", "translate(-10,0)")
	.call(yAxisLeft);

	// add lines
	// do this AFTER the axes above so that the line is above the tick-lines
	graph.append("svg:path").attr("d", line1(data)).attr("class", "data1");
	graph.append("svg:path").attr("d", line2(data)).attr("class", "data2");


	</script>

	</body>
	</html>