D3 Examples - Oklahoma voting precincts

xxxxxxxxxx
 
<!DOCTYPE html>
<meta charset="utf-8">
<style>
​
body {
  margin: 0;
}
​
</style>
<body>
<script src="//d3js.org/d3.v3.min.js"></script>
<script src="//d3js.org/topojson.v1.min.js"></script>
<script src="colorbrewer.js"></script>
<script>
​
var width = window.innerWidth,
    height = window.innerHeight;
​
var scale,
    translate,
    area; // minimum area threshold for simplification
​
var clip = d3.geo.clipExtent()
    .extent([[0, 0], [width, height]]);
​
var simplify = d3.geo.transform({
  point: function(x, y, z) {
    if (z >= area) this.stream.point(x * scale + translate[0], y * scale + translate[1]);
  }
});
​
var zoom = d3.behavior.zoom()
    .translate([0, 0])
    .scale(1)
    .scaleExtent([1, 20]);
​
var canvas = d3.select("body").append("canvas")
    .attr("width", width)
    .attr("height", height);
​
var context = canvas.node().getContext("2d");
​
context.lineJoin = "round";
context.lineCap = "round";
​
var path = d3.geo.path()
    .projection({stream: function(s) { return simplify.stream(clip.stream(s)); }})
    .context(context);
​
d3.json("ok-precincts.json", function(error, ok) {
  if (error) throw error;
​
  topojson.presimplify(ok);
​
  var precincts = topojson.feature(ok, ok.objects.merged);
  var precinct_boundary = topojson.mesh(ok, ok.objects.merged, function(a, b) { return a !== b; });
​
  canvas
      .call(zoom.on("zoom", zoomed))
      .call(zoom.event);
​
  function zoomed() {
    translate = zoom.translate();
    scale = zoom.scale();
    area = 1 / scale / scale;
​
    context.clearRect(0, 0, width, height);
​
    context.save();
​
    context.beginPath();
    path(precincts);
    context.fillStyle = '#3182bd';
    context.fill();
​
    context.beginPath();
    path(precinct_boundary);
    context.strokeStyle = "#fff";
    context.lineWidth = .35;
    context.stroke();
​
    context.restore();
  }
});
​
</script>
​
    