D3.js Template

by Douglas Duhaime

HTML

<canvas id="canvas" width="500" height="500"></canvas>

CSS

* {
  margin: 0;
  padding: 0;
  border: 0;
}

body {
  background: #fff;
}

JavaScript

var margin = {top: 20, right: 20, bottom: 20, left: 40},
    w = 100 - margin.left - margin.right,
    h = 100 - margin.top - margin.bottom;

    var canvas = d3.select("canvas")
      .node();

    var context = canvas.getContext('2d');
	
    var scale = d3.scale.linear()
	. range([0,w])
	.domain([0,h]);

  k = 0;
  context.beginPath();
  context.moveTo(0,0);
  context.strokeStyle="red";
  context.lineWidth="1";

function draw(j) {
  data = d3.range(6).map(function(){return Math.random()*250});
	data.forEach(function(d,i) {
 	  context.lineTo(scale(++k),scale(d)); 
	  context.stroke();
	});
  delete data;
  if(j < 1000) {
    setTimeout(function() { draw(j+1); }, 100);
  }
}
draw(0);