Orleans Parish precincts by thomasthoren

index.html

<!DOCTYPE html>
<head>
<title>Orleans Parish precincts</title>
<meta charset="utf-8">
<style>

  .precincts {
    fill: none;
    fill-opacity: 0.7;
  }

  .precinct-border {
    fill: none;
    stroke: white;
    stroke-width: 1px;
    stroke-opacity: 0.4;
  }

  .parish-border {
    fill: none;
    stroke: #333;
    stroke-width: 1px;
    stroke-opacity: 0.8;
  }

</style>
</head>
<body>
<script src="//d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="//d3js.org/queue.v1.min.js"></script>
<script src="//d3js.org/topojson.v1.min.js"></script>
<script>

var width = 960,
    height = 500;

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

// Effectively the same projection as if center = (-91.6, 31.2) and rotate = (0,0)
// Rotation is needed for angle of projection, however.
var projection = d3.geo.albers()
    .center([0, 30.0])  // Can be found from Google Maps (reversed order)
    .rotate([89.9, 0])  // Amount to rotate counterclockwise (looking down onto North Pole)
    .parallels([29.85, 30.2])  // Affects amount of projection distortion. Aim for top and bottom.
    .scale(90000)  // Magnification. Higher == larger.
    .translate([width * 0.35, height * 0.55]);  // Placement on the web page.

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

var results;

queue()
  .defer(d3.json, "orleans.json")
  .defer(d3.json, "governor.json")
  .await(ready);

function ready(error, orleans, results) {
  if (error) throw error;

  // Draw precincts
  svg.append("g")
      .attr("class", "precincts")
    .selectAll("path")
      .data(topojson.feature(orleans, orleans.objects.orleans).features)
    .enter().append("path")
      .attr("fill", function(d) {
        var color = results.parishes[35].details[d.properties.precinctid].color_hex_code;
        return color;
      })
      .attr("d", path)
      .on('mouseover', function(d, i) {
        d3.select(this)
          .style({
            'fill-opacity': 1,
            'stroke': 'black',
            'stroke-width': 3,
            'stroke-opacity': 1
          });
      })
      .on('mouseout', function(d, i) {
        d3.select(this)
          .style({
            'fill-opacity': 0.7,
            'stroke': 'none',
            'stroke-width': 0,
            'stroke-opacity': 0
          });
      });

  // Draw precinct borders
  svg.append("path")
    .datum(topojson.mesh(orleans, orleans.objects.orleans, function(a, b) { return a !== b; }))
    .attr("class", "precinct-border")
    .attr("d", path);

  // Draw parish border
  svg.append("path")
    .datum(topojson.mesh(orleans, orleans.objects.orleans, function(a, b) { return a === b; }))
    .attr("class", "parish-border")
    .attr("d", path);
}

d3.select(self.frameElement).style("height", height + "px");

</script>