Project Final (library fixed)

<!DOCTYPE html>
<meta charset='utf-8'>
<title>US Counties</title>
<svg width="960" height="600" 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 Population_Estimate = d3.map();
 var path = d3.geoPath();
var x = d3.scaleLinear()
 .domain([100, 11000000])
 .rangeRound([600, 860]); 
 
var color = d3.scaleThreshold()
 .domain(d3.range(1000, 11000000))
 .range(d3.schemeBlues[9]);
 
var g = svg.append("g")
 .attr("class", "key")
 .attr("transform", "translate(0,40)");
 
g.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", function(d) { return x(d[1]) - x(d[0]); })
 .attr("fill", function(d) { return color(d[0]); }); 
 
g.append("text")
 .attr("class", "caption")
 .attr("x", x.range()[0])
 .attr("y", -6)
 .attr("fill", "#000")
 .attr("text-anchor", "start")
 .attr("font-weight", "bold")
 .text("Population Estimate");
 
g.call(d3.axisBottom(x)
 .tickSize(13)
 .tickFormat(function(x, i) { return i ? x : x })
 .tickValues(color.domain()))
 .select(".domain")
 .remove();
 
 var population = "https://raw.githubusercontent.com/sabeehtaqi/FINAL-PROJECT/master/Project%20Data.csv"; 
d3.queue()
 .defer(d3.json,"https://unpkg.com/us-atlas@1/us/10m.json")
 .defer(d3.csv, population, function(d) { population.set(d.id, +d.	rate2016); })
 .await(ready);
 
 function ready(error, us, csv) {
 if (error) throw error;
 console.log('here is the csv data:', csv);
 var counties = topojson.feature(us, us.objects.counties).features;
 console.log('json')
 svg.append("g")
 .attr("class", "counties")
 .selectAll("path")
 .data(topojson.feature(us, us.objects.counties).features)
 .enter().append("path")
 .attr("fill", function(d) { return color(d.rate = population.get(d.id)); })
 .attr("d", path)
 .append("title")
 .text(function(d) { return d.rate });
 
 
 console.log(counties[0]);
 svg.selectAll('path.county')
 .data( counties )
 .enter().append("path")
 .attr("d", path)
 .attr("stroke", "#aaa")
 .attr("stroke-width", 0.5);
 svg.append("path")
 .attr("stroke-width", 0.5)
 };
{
 svg.append("path")
 .attr("d", path(topojson.feature(us, us.objects.counties)));
 }
</script>

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

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

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