Built with blockbuilder.org
forked from romsson's block: centered rects size and position (grids)
license: mit |
Built with blockbuilder.org
forked from romsson's block: centered rects size and position (grids)
<!DOCTYPE html> | |
<meta charset="utf-8"> | |
<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 = 600, | |
height = 400; | |
var gridding = d3.gridding() | |
.size([width, height]) | |
.valueWidth(function(d) { return (width /2 - randomX()) / 3; }) | |
.valueHeight(function(d) { return (height /2 - randomY()) / 3; }) | |
.valueX("w") | |
.valueY("h") | |
.mode("coordinate"); | |
// Distribution from https://bl.ocks.org/mbostock/4248145 | |
var randomX = d3.randomNormal(width / 2, 100), | |
randomY = d3.randomNormal(height / 2, 100), | |
data = d3.range(400).map(function() { | |
return {w: randomX(), h: randomY()}; | |
}); | |
var griddingData = gridding(data); | |
var svg = d3.select("body").append("svg") | |
.attr("width", width) | |
.attr("height", height); | |
svg.selectAll(".square") | |
.data(griddingData) | |
.enter().append("rect") | |
.style("fill", "none") | |
.style("stroke", "black") | |
.attr("width", function(d) { return d.width; }) | |
.attr("height", function(d) { return d.height; }) | |
.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; }) | |
</script> | |
</body> |