Skip to content

Instantly share code, notes, and snippets.

@jfirebaugh

jfirebaugh/index.html

Created May 14, 2013 22:36
Show Gist options
  • Save jfirebaugh/5580230 to your computer and use it in GitHub Desktop.
Save jfirebaugh/5580230 to your computer and use it in GitHub Desktop.
Download ZIP
Similar to https://gist.github.com/jfirebaugh/5580143 but with SVG transform instead of CSS.
Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<body>
<script src="http://d3js.org/d3.v3.js"></script>
<div id="container">
</div>
<script>
var width = 1000,
height = 1000;
var container = d3.select("#container")
.call(d3.behavior.zoom()
.on('zoom', function() {
var tx = 'translate(' +
d3.event.translate[0] + ',' +
d3.event.translate[1] + ')';
g.attr('transform', tx);
}));
var svg = container.append("svg")
.attr("width", width)
.attr("height", height);
var g = svg.append("g");
var data = [];
for (var i = 0; i < 1000; i += 5)
for (var j = 0; j < 1000; j += 5)
data.push([i, j]);
var rects = g.selectAll('rect')
.data(data)
.enter().append('rect')
.attr('x', function(d) { return d[0]; })
.attr('y', function(d) { return d[1]; })
.attr('width', 4)
.attr('height', 4);
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment