block by arrayjam 6754483

Topojson voronoi problem

Full Screen

index.html

<!DOCTYPE html>
<meta charset="utf-8">
<style>

path {
  stroke-linejoin: round;
  fill: none;
}

.topojson {
  stroke: #222;
}

.geojson {
  stroke: red;
}

</style>
<body>
<script src="//d3js.org/d3.v3.min.js"></script>
<script src="//d3js.org/queue.v1.min.js"></script>
<script src="//d3js.org/topojson.v1.min.js"></script>
<script>
var width = 960,
  height = 600;

var ausCenter = [144.9, -37.8];
var parallels = [-36, -18];

var projection = d3.geo.albers()
    .translate([width / 2, height / 2])
    .scale(171600)
    .rotate([-ausCenter[0], 0])
    .center([0, ausCenter[1]])
    .parallels(parallels)
    .precision(0);

var path = d3.geo.path()
    .projection(projection);

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);

var zoom = d3.behavior.zoom()
    .translate(projection.translate())
    .scale(projection.scale())
    .on("zoom", zoomed);

svg.call(zoom);

d3.json("voronoi.topo.json", function(err, topo) {
  svg.append("path")
      .datum(topojson.mesh(topo, topo.objects.voronoi))
      .attr("class", "topojson")
      .attr("d", path);
});

function zoomed() {
  projection
    .translate(d3.event.translate)
    .scale(d3.event.scale);

  svg.selectAll("path").attr("d", path);
}
</script>