D3 Examples - Class 12

xxxxxxxxxx
 
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <title>md-geometry</title>
  <body>
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <script src ="https://d3js.org/topojson.v2.min.js"></script>
    <script src="https://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)
  
    // For d3 representation of various stateplanes, see: d3-stateplane
// We'll set the scale and translate later, based on the data
    
    var threshold = d3.scaleThreshold()
    .domain([1, 10, 20, 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>
    