Dear Campers,
I am working on the Choropleth map project. I am faced with a challenge of loading and displaying the counties data using the code below. I get THIS FUNNY MAP with this error message on the console. Error: <path> attribute d: Expected number, "…4.0461927367667,NaNL844.75238520…". which doesn’t make sense to me
const urlCountyData = 'https://cdn.freecodecamp.org/testable-projects-fcc/data/choropleth_map/counties.json';
const width = 960,
height = 400;
d3.select('body').append('h1')
.text('Map of USA')
const svg = d3.select('body')
.append('svg')
.attr('width', width)
.attr('height', height)
const projection = d3.geoMercator()
const path = d3.geoPath().projection(projection);
d3.json(urlCountyData)
.then(data => {
const counties = topojson.feature(data, data.objects.counties)
svg.selectAll('path')
.data(counties.features)
.enter()
.append('path')
.attr('d', d => path(d))
})
When i try loading this data (it is similiar to the data provided by FCC for the project) using the same code as above, it loads perfectly fine
const worldData = 'https://unpkg.com/world-atlas@1.1.4/world/110m.json';
const width = 960,
height = 400;
d3.select('body').append('h1')
.text('World Map')
const svg = d3.select('body')
.append('svg')
.attr('width', width)
.attr('height', height)
const projection = d3.geoMercator() ;
const path = d3.geoPath().projection(projection);
d3.json(worldData)
.then(data => {
const countries = topojson.feature(data, data.objects.countries)
svg.selectAll('path')
.data(countries.features)
.enter()
.append('path')
.attr('d', d => path(d))
})
The pen is HERE
What am i missing in the first code? To me those two datasets are similar. The one provided by FCC is for the US and the second one is for the entire world. You can check them here and here