Class Work 12

<!DOCTYPE html>
<meta charset='utf-8'>
<body>
  <script src="//d3js.org/d3.v4.min.js"></script>
  <script src="//d3js.org/topojson.v2.min.js"></script>
  <script src="//d3js.org/d3-scale-chromatic.v1.min.js"></script>
  <script>
    
    var width=960, height=500;
    var svg = d3.select('body').append('svg')
    .attr('width', width)
    .attr('height', height);
    
    var threshold = d3.scaleThreshold()
    .domain([1, 10, 50, 200, 800, 2000, 5000, 10000])
    .range(d3.schemeOrRd[9])

d3.queue()
.defer(d3.json, 'https://umbcvis.github.io/classes/class-12/tracts.json')
.defer(d3.json, 'https://umbcvis.github.io/classes/class-12/population.json')
.await(ready);
    
    var projection = d3.geoConicConformal()
    .parallels([38 + 18 / 60, 39 + 27 / 60])
    .rotate([77, -37 -40 / 60]);
    
    var path = d3.geoPath()
    .projection(projection);
    
    
    function ready(error, json, population) {
    if (error) throw error;
  
    geojson = topojson.feature(json, json.objects.tracts);
    tracts = geojson.features;
      
      projection.fitSize([960, 500],  geojson);
      
      tracts.forEach(function(tract) {
        var countyfips = tract.properties.COUNTYFP;
        var tractce = tract.properties.TRACTCE;
        pop = population.filter(function(d) {return (d[2] === countyfips)
                                            && (d[3] === tractce);
                                            });             
      
        pop = +pop[0][0];
        var aland = tract.properties.ALAND / 2589975.2356; // area in square miles
        tract.properties.density = pop / aland;
      });
      
      svg.selectAll('path.tract')
      .data(tracts)
      .enter()
      .append('path')
      .attr('class', 'tract')
      .attr('d', path)
      .style('fill', function(d) {return threshold(d.properties.density);})
      .style('stroke', '#000')
    }
  </script>

https://d3js.org/d3.v4.min.js

https://d3js.org/topojson.v2.min.js

https://d3js.org/d3-scale-chromatic.v1.min.js