113th Congressional Districts by syntagmatic

index.html

<!DOCTYPE html>
<meta charset="utf-8">
<title>113th US Congressional Districts</title>
<style>
body {
  background: #a4bac7;
}
path.district {
  fill: #d7c7ad;
  stroke: #766951;
  stroke-width: 1px;
}
path:hover {
  fill: #8d7f67;
}
text {
  font-size: 24px;
}
</style>
<svg width="960" height="500"></svg>
<script src="//d3js.org/d3.v2.js"></script>
<script>
var svg = d3.select("svg");

var projection = d3.geo.azimuthal()
    .mode("equidistant")
    .origin([-98, 38])
    .scale(1000)
    .translate([480, 260]);

d3.json("113-cong.json", function(collection) {
  svg.selectAll("path.district")
      .data(collection.features)
    .enter().append("path")
      .attr("class", "district")
      .attr("d", d3.geo.path().projection(projection))
      .on("mouseover", function(d) {
        svg.select("#district").text(d.properties.UID);
      });

  svg.append("text")
    .attr({
      "id": "district",
      "x": 220,
      "y": 420,
    });
});

</script>