xxxxxxxxxx<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> // This demo modified slightly from https://bl.ocks.org/mbostock/4108203var 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; // Convert topojson to GeoJSON geojson = topojson.feature(json, json.objects.tracts); tracts = geojson.features; // Set the projection's scale and translate based on the GeoJSON projection.fitSize([960, 600], geojson); // Extract an array of features (one tract for each feature) tracts.forEach(function(tract) { var FIPS = tract.properties.COUNTYFP; var tractce = tract.properties.TRACTCE; pop = population.filter(function(d) { return (d[2] === countyfips) && (d[3] === tractce); }); pop = +pop[0][0]; var aland = tract.properties.ALAND / 2589975.2356;//area in square miles tract.properties.density = pop / aland; }); svg.selectAll('path.tract') .data(tracts) .enter() .append('path') .attr('class', 'tract') .attr('d', path) .style('fill', function (d) {return threshold(d.properties.density); }) .style('stroke', '#000') // 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]); // 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); }); 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