Rectangular binning with d3-rectbin based on d3-hexbin demo
Built with blockbuilder.org
Rectangular binning with d3-rectbin based on d3-hexbin demo
Built with blockbuilder.org
<!DOCTYPE html> | |
<head> | |
<meta charset="utf-8"> | |
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script> | |
<script src="https://cdn.rawgit.com/fabid/d3-rectbin/master/rectbin.js"></script> | |
<style> | |
body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; } | |
svg { width:100%; height: 100% } | |
</style> | |
</head> | |
<body> | |
<script> | |
var margin = { | |
top: 0, | |
right: 0, | |
bottom: 0, | |
left: 0 | |
}, | |
width = 960 - margin.left - margin.right, | |
height = 500 - margin.top - margin.bottom; | |
var randomX = d3.random.normal(width / 2, 80), | |
randomY = d3.random.normal(height / 2, 80), | |
points = d3.range(1000).map(function() { | |
return [randomX(), randomY()]; | |
}); | |
console.log(points); | |
var size = 20; | |
var rectbin = d3.rectbin() | |
.dx(size) | |
.dy(size); | |
// the result of the rectbin layout | |
var rectbinData = rectbin(points); | |
var color = d3.scale.linear() | |
.domain([0, d3.max(rectbinData, function(d) { | |
return d.length; | |
})]) | |
.range(["white", "steelblue"]) | |
.interpolate(d3.interpolateLab); | |
var x = d3.scale.identity() | |
.domain([0, width]); | |
var y = d3.scale.linear() | |
.domain([0, height]) | |
.range([height, 0]); | |
var yinv = d3.scale.linear() | |
.domain([height, 0]) | |
.range([height, 0]); | |
var svg = d3.select("body").append("svg") | |
.attr("width", width + margin.left + margin.right) | |
.attr("height", height + margin.top + margin.bottom) | |
.append("g") | |
.attr("transform", "translate(" + margin.left + "," + margin.top + ")"); | |
svg.append("g") | |
.selectAll(".square") | |
.data(rectbinData) | |
.enter().append("rect") | |
.attr("class", "square") | |
.attr("x", function(d) { return x(d.x); }) | |
.attr("y", function(d) { return y(d.y) - yinv(size); }) | |
.attr("width", x(size)) | |
.attr("height", yinv(size)) | |
.style("fill", function(d) { | |
return color(d.length) | |
}) | |
.style("stroke", "none"); | |
</script> | |
</body> |