Skip to content

Instantly share code, notes, and snippets.

@romsson

romsson/.block

Last active January 5, 2018 07:43
Show Gist options
  • Save romsson/c1ff4ac042dd32d6c89e1ac9c7b9f3ac to your computer and use it in GitHub Desktop.
Save romsson/c1ff4ac042dd32d6c89e1ac9c7b9f3ac to your computer and use it in GitHub Desktop.
Download ZIP
square grid overlap (grids)
Raw
.block
license: mit
Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>
rect {
fill: none;
stroke: black;
stroke-width: 1;
}
</style>
<body>
<script src="http://d3js.org/d3.v4.js"></script>
<script src="http://romsson.github.io/d3-gridding/build/d3-gridding.js"></script>
<script>
var width = 400,
height = 400;
var init_params = {
size: [width, height],
mode: "grid",
padding: 6.9
}
var gridding = d3.gridding()
.params(init_params);
var svgSquares = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height)
.append("g");
function draw(n = 9, params = init_params) {
var data = d3.range(n);
svgSquares.append("g").selectAll(".square")
.data(gridding(data))
.enter().append("rect")
.attr("class", "square")
.style("fill", "none")
.attr("width", function(d) { return d.width; })
.attr("height", function(d) { return d.height; })
.attr("transform", function(d) {
return "translate(" + d.x + "," + d.y + ")";
});
}
draw(1);
draw(2*2);
draw(4*4);
draw(5*5);
draw(6*6);
</script>
<p>
<a href="http://thegridsystem.net/">http://thegridsystem.net/</a>
</p>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment