latest block

<!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>
<div class="info" style="position: absolute; top: 20px; left: 20px"></div> 
<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>
  // 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 * 100; }))
    .range(d3.schemeBlues[9]);

// This demo modified slightly from https://bl.ocks.org/mbostock/4108203

var svg = d3.select("svg").append("g")
    .attr('transform', 'scale(4)translate(-700, -100)');

var path = d3.geoPath();

var filename = "https://raw.githubusercontent.com/qaisarmehmood/umbcvis/master/Newyork.population%20Data.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;

console.log('here is the csv data:', csv);

var counties = topojson.feature(us, us.objects.counties).features;

// Examine 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(counties[0]);

// NEW: Create a d3.map() so we can query CSV data by "id" = FIPS code
  var data = d3.map();
  csv.forEach(function(d) { return color (data.set(d.Percent, d)); });

// Get New York counties
  newyork = counties.filter(function(d) { return d.id.slice(0,2) === "36"; })

svg.selectAll('path.county')
      .data( newyork )
    .enter().append("path")
      .attr("d", path)
      .attr('fill', '#fff')
      .attr('fill-opacity', '0')
      .attr("stroke", "#aaa")
      .attr("stroke-width", 0.5)
      .on('mouseover', function(d) { 
          console.log(d.id, data.get(d.id)); 
          d3.select(".info").html(data.get(d.id)["County Name"]); 
      }); // NEW

svg.append("path")
      .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