Final Project Blue

<!DOCTYPE html>
<meta charset='utf-8'>
<title>US Counties</title>
<body>
<div id="info" style="position: absolute; bottom: 45px; left: 5px;"></div>
<svg width="960" height="1500" fill="none" stroke="#000" stroke-linejoin="round" stroke-linecap="round"></svg>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://unpkg.com/topojson-client@3"></script>
<script src="https://d3js.org/d3-scale-chromatic.v1.min.js"></script>
<script>
  
var svg = d3.select("svg");
var layer1 = svg.append("g");
var path = d3.geoPath();
  
var x = d3.scaleLinear()
    .domain([0, 10000])
    .rangeRound([650, 1000]);
  
  var width;
  var text = svg.append('text')
 .attr('width', width)   
 .attr('x', "14em" )
    .attr('y', "1em")
    .style('font-size', '1.5em')
    .style('text-anchor', 'middle')
    .text('US Population Estimate 2016')
  	.style("fill", "black")   
  
// This color scale works for values ranging from 2 to 10
var color = d3.scaleThreshold()
    .domain(d3.range(2, 10).map(function(d) { return d * 1000; }))
    .range(d3.schemeBlues[9]);
  
  layer1.append("g")
    .attr('transform', 'translate(500, 5)')
    
	layer1.selectAll("rect")
  	.data(color.range().map(function(d) {
      d = color.invertExtent(d);
      if (d[0] == null) d[0] = x.domain()[0];
      if (d[1] == null) d[1] = x.domain()[1];
      return d;
    }))
  .enter().append("rect")
    .attr("height", 8)
    .attr("x", function(d) { return x(d[0]); })
    .attr("width", 150)
    .attr("fill", function(d) { return color(d[0]); });
  layer1.append("text")
    .attr("class", "caption")
    .attr("x", x.range()[0])
    .attr("y", 40)
    .attr("fill", "#000")
    .attr("text-anchor", "start")
    .attr("font-weight", "bold")
    .text("Population Estimate (persons)");
  
 
  layer1.call(d3.axisBottom(x)
       .tickSize(13)
    .tickFormat(function(x, i) { return i ? x : x  ; })
    .tickValues(color.domain()))
  .select(".domain")
    .remove();
  var filename = "https://raw.githubusercontent.com/sabeehtaqi/FINAL-PROJECT/master/PopulationData.csv";
  
d3.queue()
    .defer(d3.json,"https://unpkg.com/us-atlas@1/us/10m.json")
    .defer(d3.csv, filename)
    .await(ready);
function ready(error, us, csv) {
  if (error) throw error;
  // Inspect the CSV data in the developer console.
  console.log('here is one of the csv data rows:', csv[0]);
  // Get the data for one year -- reformat the string value into a number
  var data = d3.map();
  csv.forEach(function(d) {
    data.set(d.id, { name: d.Area_Name, state: d.State, rate: +d.rate2016.replace(/,/g, '') });
  });
  console.log('here is how the data map works', data.get(27069));
  var counties = topojson.feature(us, us.objects.counties).features;
  // Inspect one of the county features in the developer console.
  // The "id" attribute is a 5-digit GEOID (state + county).
  // See: https://www.census.gov/geo/reference/geoidentifiers.html
  console.log('here is a county:', counties[0]);
  svg.selectAll('path.county')
      .data( counties )
    .enter().append("path")
      .attr("d", path)
      .attr("stroke", "#aaa")
      .attr("stroke-width", 0.5)
      .attr("fill", function(d) { return color(data.get(d.id).rate); })
      .on('mouseover', function(d) {
        d3.select("#info").html(data.get(d.id).name + ", " + data.get(d.id).state )
      })
  svg.append("path")
      .attr("stroke", "#aaa")
      .attr("stroke-width", 0.5)
      .attr("d", path(topojson.mesh(us, us.objects.states, function(a, b) { return a !== b; })));
  svg.append("path")
      .attr("d", path(topojson.feature(us, us.objects.nation)));
}
</script>

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

https://unpkg.com/topojson-client@3

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