Skip to content

Instantly share code, notes, and snippets.

@tmcw
Created December 1, 2012 00:05
Show Gist options
  • Save tmcw/4179660 to your computer and use it in GitHub Desktop.
Save tmcw/4179660 to your computer and use it in GitHub Desktop.
<!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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment