sabeehtaqi/index.html

## index.html
<!DOCTYPE html>
<meta charset='utf-8'>
<title>US Counties</title>
<body>
<div id="info" style="position: absolute; top: 20px; left: 500px;"></div>
<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 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("class", "key")
    .attr("transform", "translate(0,0)");
	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", 100)
    .attr("fill", function(d) { return color(d[0]); });
  layer1.append("text")
    .attr("class", "caption")
    .attr("x", x.range()[0])
    .attr("y", 35)
    .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.rate2010.replace(',','') });
  });

  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>
	<!DOCTYPE html>
	<meta charset='utf-8'>
	<title>US Counties</title>
	<body>
	<div id="info" style="position: absolute; top: 20px; left: 500px;"></div>
	<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 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("class", "key")
	.attr("transform", "translate(0,0)");
	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", 100)
	.attr("fill", function(d) { return color(d[0]); });
	layer1.append("text")
	.attr("class", "caption")
	.attr("x", x.range()[0])
	.attr("y", 35)
	.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.rate2010.replace(',','') });
	});

	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>