SF Precincts: colored by BART district by enjalot

index.html

<!DOCTYPE html>
<meta charset="utf-8">
<head>
  <title>San Francisco Precincts / Prop F</title>
<style>

body {
    height: 100%;
    margin: 0;
    padding: 0;
    font-family: 'Lato', sans-serif;
    color: #272a2f;
}

#mapcanvas {
  width: 960px;
  height: 600px;
  margin: 10px 10px 10px 10px;

}
  
p {
   margin: 10px 10px 10px 10px;
  }
.precinct {
  fill: #555;
}

.precinct-boundary {
  fill: none;
  stroke: #fff;
  stroke-width: none;
}

</style>

<link href='https://fonts.googleapis.com/css?family=Varela+Round' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'>
</head>

<body>
<div id="mapcanvas" ></div> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/topojson/1.6.19/topojson.min.js"></script>
<script src="https://d3js.org/queue.v1.min.js"></script>

<script>

var width = 960,
    height = 600;

// MERCATOR
var projection = d3.geo.mercator()
    .center([-122.433701, 37.767683])
    .scale(211000)
    .translate([width / 2, height/2]);

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


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

// Title inside the Map
svg.append("text")
    .attr("x", "50")             
    .attr("y", "29")
    .attr("text-anchor", "start")  
    .style("font-size", "16px") 
    .style("text-decoration", "none")  
    .text("San Francisco Precincts, Colored by BART district");

queue()
      .defer(d3.json, 'san_francisco_precinct_20120702.topojson')               
      .defer(d3.csv, 'san_francisco_precinct_20120702.csv') // REF
      .await(ready);

function ready(error, MAP, REF) {
  if (error) throw error; 
  console.log("map", MAP)  
  console.log("ref", REF)
  
  var refHash = {}
  REF.forEach(function(d) {
    refHash[d.id] = d;
  })
 
  var bart = d3.nest()
  .key(function(d) { return d.BART_district})
  .rollup(function(leaf) { return leaf.length })
  .entries(REF)
  
  var congress = d3.nest()
  .key(function(d) { return d.congressional_district})
  .rollup(function(leaf) { return leaf.length })
  .entries(REF)
  
  var bartColor = d3.scale.category10()
  .domain(d3.map(bart, function(d) {return d.key}))
  
  var bartscale = d3.scale.linear()
  .domain([0, d3.max(bart, function(d) { return d.values})])
  .range([0, 100])
  
  var legend = svg.selectAll("g.legend")
  .data(bart)
  .enter().append("g").classed("legend", true)
  .attr({
    transform: function(d,i) {
      return "translate(" + [20, 100 + i * 30] + ")"
    }
  })
  legend.append("text")
    .text(function(d) { return d.key })
  legend.append("rect")
  .attr({
    x: function(d,i) { return 25 },
    y: function(d,i) { return -13},
    width: function(d,i) { return bartscale(d.values) },
    height: 15,
    fill: function(d) { return bartColor(d.key)}
  })

  var precincts = topojson.feature(MAP, MAP.objects.precinct);  

  svg.append("g")
      .attr("class", "precinct")
      .selectAll("path")
      .data(precincts.features)
      .enter()
      .append("path")
      .attr("d", path)
      .style({
        fill: function(d){ 
          var ref = refHash[d.id]
          
          return bartColor(ref.BART_district)}
      })
      .append('svg:title').text(function(d) {        
         return ("GeoID: " + d.id); });

  //Borders 
  svg.append("path")
      .datum(topojson.mesh(MAP, MAP.objects.precinct, function(a, b) { return a !== b; }))
      .attr("class", "precinct-boundary")
      .attr("d", path); 
 
};

</script>
</html>