D3 Examples - Class12

xxxxxxxxxx
 
<!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>top
  <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://raw.githubusercontent.com/umbcvis/classes/master/class-12/tracts.json")
        .defer(d3.json, "https://raw.githubusercontent.com/umbcvis/classes/master/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;
        var 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>
    