sabeehtaqi/.block

## .block
height: 600

## README.md

      
    Raw
  

              README.md
            
          
    Choropleth map for Countywise population of USA for the year 2016.
We can replace rate2016 in this line of code  "csv.forEach(function(d) {
data.set(d.id, { name: d.Area_Name, state: d.State, rate: +d.rate2016.replace(/,/g, '') });" with rate2010 or 2011 till 2016 and get a choropleth map
for these years.

  
## index.html
<!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([100, 100000])
    .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([10, 200, 1000, 2000, 5000, 10000, 20000, 40000, 50000])
        .range(["#fff7ec","#fee8c8","#fdd49e","#fdbb84","#fc8d59","#ef6548","#d7301f","#b30000","#7f0000"]);

  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>
	<!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([100, 100000])
	.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([10, 200, 1000, 2000, 5000, 10000, 20000, 40000, 50000])
	.range(["#fff7ec","#fee8c8","#fdd49e","#fdbb84","#fc8d59","#ef6548","#d7301f","#b30000","#7f0000"]);

	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>