bmount · December 1, 2012 09:04
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("id", function (d,i) { return "n-"+i; })
  .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');

 dots.forEach(function(d, i) {
    ctx.fillStyle = color(i);
    ctx.fillRect(d[0], d[1], 2, 2);
 });

 ctx.clearRect(0,0,2,2);
 var f0 = ctx.canvas.toDataURL()
 var tw0 = new Image()
 tw0.src=f0;
 ctx.fillStyle = 'rgba(0,0,0,1)';
 ctx.fillStyle = color(0);

 var moveable = d3.select("#n-0")

 function draw() {
    // draw svg
    var s_start = +new Date();
    var n = [(Math.random() * 300), (Math.random() * 300)];
    moveable.attr('transform', function(d) {
            return 'translate(' + n + ')';
          });
    var s_dur = (+new Date()) - s_start;
    var c_start = +new Date();
    // draw canvas
    ctx.clearRect(0,0,300,300);
    ctx.drawImage(tw0,0,0)
    ctx.fillRect(n[0], n[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("id", function (d,i) { return "n-"+i; })
	.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');

	dots.forEach(function(d, i) {
	ctx.fillStyle = color(i);
	ctx.fillRect(d[0], d[1], 2, 2);
	});

	ctx.clearRect(0,0,2,2);
	var f0 = ctx.canvas.toDataURL()
	var tw0 = new Image()
	tw0.src=f0;
	ctx.fillStyle = 'rgba(0,0,0,1)';
	ctx.fillStyle = color(0);

	var moveable = d3.select("#n-0")

	function draw() {
	// draw svg
	var s_start = +new Date();
	var n = [(Math.random() * 300), (Math.random() * 300)];
	moveable.attr('transform', function(d) {
	return 'translate(' + n + ')';
	});
	var s_dur = (+new Date()) - s_start;
	var c_start = +new Date();
	// draw canvas
	ctx.clearRect(0,0,300,300);
	ctx.drawImage(tw0,0,0)
	ctx.fillRect(n[0], n[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>
No results found