D3 Examples - Australia polling booth voronoi and ocean overlay

xxxxxxxxxx
 
<!DOCTYPE html>
<meta charset="utf-8">
<style>
​
path {
  stroke-linejoin: round;
  fill: none;
}
​
.topojson {
  stroke: #222;
}
​
.voronoi {
  stroke: none;
}
​
.geojson {
  stroke: red;
}
​
.ocean {
  fill: steelblue;
}
​
</style>
<body>
<script src="https://d3js.org/d3.v3.min.js"></script>
<script src="https://d3js.org/queue.v1.min.js"></script>
<script src="https://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(20000)
    .rotate([-ausCenter[0], 0])
    .center([0, ausCenter[1]])
    .parallels(parallels)
    .clipExtent([[0, 0], [width, height]])
    .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);
​
​
queue()
  .defer(d3.json, "voronoi.json")
  .defer(d3.json, "ocean.json")
  .await(ready);
​
function ready(err, geo, ocean) {
​
  window.geo = geo;
  console.log(geo);
  svg.selectAll("path.geojson")
      .data(topojson.feature(geo, geo.objects.voronoi).features)
      .enter().append("path")
      .attr("class", "geojson")
      .attr("d", path);
​
  svg.append("path")
    .datum(topojson.feature(ocean, ocean.objects.ocean))
    .attr("class", "ocean")
    .attr("d", path);
​
  console.log(ocean);
}
​
function zoomed() {
  projection
    .translate(d3.event.translate)
    .scale(d3.event.scale);
​
  svg.selectAll("path").attr("d", path);
}
</script>
​
​
    