displaying Percent

<!DOCTYPE html>
<meta charset='utf-8'>
<title>NY Counties 3</title>
<style>
body {
  margin: 0;
  background-color: #eee;
}

.info {
  position: absolute;
  top: 50px;
  left: 50px;
}
</style>
<div class="info"></div>
<svg width="960" height="500" stroke-linejoin="round" stroke-linecap="round">
  <defs>
    <filter id="blur">
      <feGaussianBlur stdDeviation="5"></feGaussianBlur>
    </filter>
  </defs>
</svg>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://unpkg.com/topojson-client@3"></script>
<script src="//d3js.org/d3-scale-chromatic.v1.min.js"></script>
<script>

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

var svg = d3.select("svg");

var defs = svg.select("defs");

// New York central state plane, EPSG: 2829
// (central meridian = - 76.5833..., latitute of origin = 40)
var projection = d3.geoTransverseMercator()
        .rotate([76 + 35 / 60, - 40]);

var path = d3.geoPath()
    .projection(projection);

var threshold = d3.scaleThreshold()
    .domain([1, 10, 50, 200, 500, 2000, 8000, 30000])
    .range(d3.schemeOrRd[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) { data.set(d.FIPS, d)})

svg.append("g").selectAll("path")
      .data(tx.features)
  	.enter().append ("path")
      .attr("d", path)
      .style("fill", function(d) { return threshold(data.get(d.properties.FIPS).Percent); });

// 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("class", "county")
      .attr("d", path)
      .attr('fill', '#fff')
      .attr("stroke", "#aaa")
      .attr("stroke-width", 0.5)
      .on('mouseover', function(d) { 
          console.log(d.id, data.get(d.id)); 
          svg.selectAll('path.county').attr("fill", "#fff");
          d3.select(this).attr("fill","crimson");
          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)));
  addLegend();
}

// Plot the boundary of the US
  svg.append("path")
      .attr("id", "nation")
      .attr("d", path(topojson.merge(us, us.objects.counties.geometries)))
      .attr("stroke", "#000")
      .attr("stroke-width", 2)

// Drop-shadow styling (this is blurred shadow)
  svg.append("use")
      .attr("xlink:href", "#nation")
      .attr("fill-opacity", 0.2)
      .attr("filter", "url(#blur)");

// Drop-shadow styling (this is white overlay)
  svg.append("use")
      .attr("xlink:href", "#nation")
      .attr("fill", "#fff");

// Plot the state boundaries
  svg.append("path")
      .attr("stroke", "#000")
      .attr("stroke-width", 1)
      .attr("fill", "none")
      .attr("d", path(topojson.mesh(us, us.objects.counties, function(a, b) { return a.properties.STATEFP !== b.properties.STATEFP; })));

// Plot the individual counties
  svg.selectAll('path.county')
      .data( newyork )
    .enter().append("path")
      .attr("d", path)
      .attr("class", "county")
      .attr("stroke", "#aaa")
      .attr("stroke-width", 1)
      .each(function(d) {
        var pop = data.get(d.properties.GEOID);
        var aland = d.properties.ALAND / 2589975.2356; // area in square miles
        d.populationDensity = pop / aland; // population per square mile
      })
      .attr("fill", function(d) { return threshold(d.populationDensity); })
      .on('mouseover', function(d, i) {
        d3.select(this).attr('stroke-width', 4).raise()
        d3.select(".info").html(d.properties.NAME + " County"
                              + "<br>Population density: "
                             + d3.format(",d")(d.populationDensity))
      })
      .on('mouseout', function(d) {
        d3.select(".info").html("")
        d3.select(this).attr('stroke-width', 0.5)
      });
}

function addLegend() {

var formatNumber = d3.format("d");

var x = d3.scalePow().exponent('.15')
      .domain([1, 80000])
      .range([0, 300]);

var xAxis = d3.axisBottom(x)
      .tickSize(13)
      .tickValues(threshold.domain())
      .tickFormat(formatNumber)

var g = svg.append("g")
      .attr('transform', 'translate(50, 120)')
      .call(xAxis);

g.select(".domain")
      .remove();

g.selectAll("rect")
    .data(threshold.range().map(function(color) {
      var d = threshold.invertExtent(color);
      if (d[0] == null) d[0] = x.domain()[0];
      if (d[1] == null) d[1] = x.domain()[1];
      return d;
    }))
    .enter().insert("rect", ".tick")
      .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 threshold(d[0]); });

g.append("text")
      .attr("fill", "#000")
      .attr("font-weight", "bold")
      .attr("text-anchor", "start")
      .attr("y", -6)
      .text("Population per square mile");
}

</script>

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

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

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