0

I am currently trying to draw a map of the US with the counties-albers-10m.json file found on the topojson repo. I initially got a solid rectangle and, after changing fill to none, I am getting specks here and there. Going through stack, I found that the winding order may be wrong so I incorporated turf.js, but nothing is really changing. Here is the code:

var margin = {top: 0, left: 0, right: 0, bottom: 0},
    height = 600 - margin.top - margin.bottom,
    width = 1200 - margin.left - margin.right;

  var svg = d3.select("#map")
    .append("svg")
    .attr("height", height + margin.top + margin.bottom)
    .attr("width", width + margin.left + margin.right)
    .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top +")");


  d3.json("counties-albers-10m.json").then(function(data) {
    console.log(data);

    var projection = d3.geoAlbersUsa();

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

    var counties = topojson.feature(data, data.objects.counties).features
    console.log(counties)

    counties.forEach(function(feature) {
      feature.geometry = turf.rewind(feature.geometry, {reverse:true});
    })

    svg.selectAll(".county")
      .data(counties)
      .enter().append("path")
      .attr("class", "county")
      .attr("fill", "none")
      .attr("stroke", "black")
      .attr("d", path);
  })

The dreaded black box

Ryan Xia
  • 1
  • Based on the file name, I'm guessing you have data that is already projected, and are now projecting that again as though it wasn't projected. Can you share the topojson or share what happens when you use a null projection (`d3.geoPath().projection(null)`) – Andrew Reid Sep 15 '20 at 18:06
  • Thanks Andrew, the data is already projected. Though could you explain what that exactly means? Does that just indicate that the projection is specified in the json already? – Ryan Xia Sep 15 '20 at 18:15
  • Does [this](https://stackoverflow.com/a/42430876/7106086) help? Essentially the projection takes spherical coordinates in degrees with a domain extent [±180,±90] and projects them to planar pixel coordinates, naturally doing the same operation with pixel coordinates as the input causes some issues - especially as most projected geometries will extend over much greater domains. – Andrew Reid Sep 15 '20 at 19:23

0 Answers0