Data Visualization - counties don't render correctly in the Chloropleth project

[dariodisce]

when i try to display the county data all that displays is a big rectangle, even though i couldn’t find any differences between the code i wrote and the various examples i found online, am i missing something?

My code:

fetch(`https://cdn.freecodecamp.org/testable-projects-fcc/data/choropleth_map/counties.json`)
  .then(data => data.json())
  .then(data => {
  displayData(data)
})

function displayData(data) {
  let width = 1200, height = 1000;
  
  console.log(data)
  
  let svg = d3.select('#svg')
          .attr('width', width)
          .attr('height', height)
  
  let thing = topojson.feature(data, data.objects.counties).features
  
  let projection = d3.geoAlbersUsa()
  
  let path = d3.geoPath().projection(projection)
  
  console.log(thing)
  
  svg.selectAll('path')
     .data(thing)
     .enter()
     .append('path')
     .attr('d', path)
}

What renders:

[robheyays]

I looked at this exercise on data visualization and it dose not seem to indicate any required JavaScript although I ran the source with the replit IDE and it`s almost the same as your describing, nothing but a header and a link but no map. Again this was with the page source code example.

[dariodisce]

i don’t understand, what do you mean by “the exercise doesn’t seem to require JavaScript?”. isn’t building data visualizations with JavaScript the whole point of the Data Visualization projects?

[robheyays]

This is because , as I remember, their was no mention or I just misunderstood what they wanted even though I passed it without JS. You are correct in that data visualization is a JS program.

[dariodisce]

turns out the problem was the projection i was using, by not setting .projection the map renders correctly

code:

fetch(`https://cdn.freecodecamp.org/testable-projects-fcc/data/choropleth_map/counties.json`)
  .then(data => data.json())
  .then(data => {
  displayData(data)
})

function displayData(data) {
  let width = 1200, height = 1000;
  
  console.log(data)
  
  let svg = d3.select('#svg')
          .attr('width', width)
          .attr('height', height)
  
  let thing = topojson.feature(data, data.objects.counties).features
  
  const path = d3.geoPath();
  
  console.log(thing)
  
  svg.selectAll('path')
     .data(thing)
     .enter()
     .append('path')
     .attr('d', path)
}

what renders: