tmcw · December 1, 2012 00:05
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <meta charset="utf-8">
 <style>

 body {
  font: 10px sans-serif;
 }

 .axis path,
 .axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
 }

 .bar {
  fill: steelblue;
 }

 .x.axis path {
  display: none;
 }

 .legend line {
  stroke: #000;
  shape-rendering: crispEdges;
 }

 </style>
 <body>
 <script src="http://d3js.org/d3.v3.min.js"></script>
 <script>

 var width = 300,
    height = 300;

 var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height)
  .append("g");

 var canvas = d3.select("body").append("canvas")
    .attr("width", width)
    .attr("height", height);

 var ctx = canvas.node().getContext('2d');

 var dots = [];
 for (var x = 0; x < 300; x += 3) {
    for (var y = 0; y < 300; y += 3) {
        dots.push([x,y]);
    }
 }
 var color = d3.scale.category20();

 var g = svg.selectAll("g.dot")
    .data(dots)
  .enter().append("g")
  .attr("class", "dot")
  .attr("fill",function(d,i){return color(i);})
  .attr('transform', function(d) {
      return 'translate(' + d + ')';
  });
 g.append('rect')
    .attr({ width: 2, height: 2 });

 var report = d3.select(document.body).append('div');

 function draw() {
    // draw svg
    var s_start = +new Date();
    var n = [(Math.random() * 300), (Math.random() * 300)];
    dots[0] = n;
    g.filter(function(d, i) { return i == 0; })
        .data([n])
        .attr('transform', function(d) {
            return 'translate(' + d + ')';
        });
    var s_dur = (+new Date()) - s_start;

    var c_start = +new Date();
    canvas.node().width = canvas.node().width;
    // draw canvas
    dots.forEach(function(d, i) {
        ctx.fillStyle = color(i);
        ctx.fillRect(d[0], d[1], 2, 2);
    });
    var c_dur = (+new Date()) - c_start;
    report.text('time to render - svg: ' + s_dur + 'ms, canvas: ' + c_dur + 'ms');
 }
 d3.timer(draw);

 </script>
	<!DOCTYPE html>
	<meta charset="utf-8">
	<style>

	body {
	font: 10px sans-serif;
	}

	.axis path,
	.axis line {
	fill: none;
	stroke: #000;
	shape-rendering: crispEdges;
	}

	.bar {
	fill: steelblue;
	}

	.x.axis path {
	display: none;
	}

	.legend line {
	stroke: #000;
	shape-rendering: crispEdges;
	}

	</style>
	<body>
	<script src="http://d3js.org/d3.v3.min.js"></script>
	<script>

	var width = 300,
	height = 300;

	var svg = d3.select("body").append("svg")
	.attr("width", width)
	.attr("height", height)
	.append("g");

	var canvas = d3.select("body").append("canvas")
	.attr("width", width)
	.attr("height", height);

	var ctx = canvas.node().getContext('2d');

	var dots = [];
	for (var x = 0; x < 300; x += 3) {
	for (var y = 0; y < 300; y += 3) {
	dots.push([x,y]);
	}
	}
	var color = d3.scale.category20();

	var g = svg.selectAll("g.dot")
	.data(dots)
	.enter().append("g")
	.attr("class", "dot")
	.attr("fill",function(d,i){return color(i);})
	.attr('transform', function(d) {
	return 'translate(' + d + ')';
	});
	g.append('rect')
	.attr({ width: 2, height: 2 });

	var report = d3.select(document.body).append('div');

	function draw() {
	// draw svg
	var s_start = +new Date();
	var n = [(Math.random() * 300), (Math.random() * 300)];
	dots[0] = n;
	g.filter(function(d, i) { return i == 0; })
	.data([n])
	.attr('transform', function(d) {
	return 'translate(' + d + ')';
	});
	var s_dur = (+new Date()) - s_start;

	var c_start = +new Date();
	canvas.node().width = canvas.node().width;
	// draw canvas
	dots.forEach(function(d, i) {
	ctx.fillStyle = color(i);
	ctx.fillRect(d[0], d[1], 2, 2);
	});
	var c_dur = (+new Date()) - c_start;
	report.text('time to render - svg: ' + s_dur + 'ms, canvas: ' + c_dur + 'ms');
	}
	d3.timer(draw);

	</script>