Built with blockbuilder.org
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<script src="https://d3js.org/d3.v4.min.js"></script>
<style>
body { overflow: scroll }
</style>
</head>
<body>
<script>
// Feel free to change or delete any of the code you see in this editor!
var width = 2960;
var height = 2500;
d3.json("api-blocks.json", function(err, blocks) {
//d3.json("step600.json", function(err, points) {
d3.json("step1360.json", function(err, points) {
var xExtent = d3.extent(points, function(p) {return p[0]});
var yExtent = d3.extent(points, function(p) {return p[1]});
console.log("extent", xExtent, yExtent)
//var zExtent = d3.extent(points, function(p) {return p.coords[2]});
//var zScale = d3.scaleLinear().domain(zExtent).range([2, 10]);
var centerX = (xExtent[0] + xExtent[1]) / 2;
var centerY = (yExtent[0] + yExtent[1]) / 2;
var scale = Math.min(width, height) /
Math.max(xExtent[1] - xExtent[0], yExtent[1] - yExtent[0]);
scale *= .9; // Leave a little margin.
d3.selectAll("div.block").data(points)
.enter()
.append("div").classed("block", true)
.style("position", "absolute")
.style("top", function(p) {
y = -(p[1] - centerY) * scale + height / 2;
return y + "px"
})
.style("left", function(p) {
x = (p[0] - centerX) * scale + width / 2;
return x + "px"
})
.style("background", "rgba(100,100,100, 0.5)")
.style("border", "1px solid #111")
.append("img")
.attr("src", function(d,i) {
return blocks[i].thumbnail
})
.style("width", "20px")
})
})
</script>
</body>