I'm learning how to use projection with d3, so I was following FreeCodeCamp (from now on FCC) lessons and I stumbled upon a problem with the expected output from two different files.
I based my test on this project from Mike Bostock.
When I use the json file from this project everything work as expected, if I use one of the file from a FCC challenge I get a strange pattern.
This is the working code,
const width = 960;
const height = 500;
const projection = d3.geoAlbersUsa()
.scale(1300)
.translate([487.5,305]);
const path = d3.geoPath(projection);
const svg = d3.select("body")
.append("svg")
.attr("width", width)
.attr("height", height);
d3.json("https://cdn.jsdelivr.net/npm/us-atlas@3/counties-10m.json")
.then(data => {
svg.selectAll("path")
.data(topojson.feature(data, data.objects.states).features)
.join("path")
.attr("fill", "none")
.attr("stroke", "red")
.attr("d", path)
.attr('class', 'county');
}).catch(err => console.log(err));
When I use this json file the result is a mess. I'm trying to figure out what are the difference and how to tell when I need to use different source files.