tmcw/index.html

## 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>