Built with blockbuilder.org
forked from romsson's block: simple grid
license: mit |
Built with blockbuilder.org
forked from romsson's block: simple grid
<!DOCTYPE html> | |
<meta charset="utf-8"> | |
<style> | |
body { | |
font-family: Helvetica; | |
font-size: 10px; | |
} | |
.point { | |
fill: black; | |
} | |
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 = 300; | |
var gridding = d3.gridding() | |
.size([width, height]) | |
.mode("grid"); | |
var data = d3.range(250).map(function(d, i) { | |
return {v: d}; | |
}); | |
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") | |
.attr("class", "square") | |
.attr("width", function(d) { return d.width; }) | |
.attr("height", function(d) { return d.height; }) | |
.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; }) | |
svg.selectAll(".index") | |
.data(griddingData) | |
.enter().append("text") | |
.attr("class", "index") | |
.style('text-anchor', 'middle') | |
.style('dominant-baseline', 'central') | |
.attr("transform", function(d) { return "translate(" + d.cx + "," + d.cy + ")"; }) | |
.text(function(d, i) { return d.v; }); | |
</script> | |
</body> |