# Loading and display data for Choropleth project

**URL:** <https://forum.freecodecamp.org/t/loading-and-display-data-for-choropleth-project/379145>\
**Category:** General\
**Created:** [April 26, 2020, 10:56am UTC](https://forum.freecodecamp.org/t/loading-and-display-data-for-choropleth-project/379145 "2020-04-26T10:56:21Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![nibble](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/nibble/32/123681_2.png) [@nibble](https://forum.freecodecamp.org/u/nibble)\
**Post date:** [April 26, 2020, 10:56am UTC](https://forum.freecodecamp.org/t/loading-and-display-data-for-choropleth-project/379145/1 "2020-04-26T10:56:21Z")

</div>

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](https://codepen.io/nibble0101/pen/dyYWNOG) with this error message on the console. `Error: <path> attribute d: Expected number, "…4.0461927367667,NaNL844.75238520…".` which doesn’t make sense to me

```auto

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](https://unpkg.com/world-atlas@1.1.4/world/110m.json) (it is similiar to the data provided by FCC for the project) using the same code as above, it loads perfectly fine

```javascript
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](https://codepen.io/nibble0101/pen/qBOmqvG)  
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](https://unpkg.com/world-atlas@1.1.4/world/110m.json) and [here](https://cdn.freecodecamp.org/testable-projects-fcc/data/choropleth_map/counties.json)

---

<div class="post-metadata">

**Author:** ![jeremy.kunzhou](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/jeremy.kunzhou/32/134560_2.png) [@jeremy.kunzhou](https://forum.freecodecamp.org/u/jeremy.kunzhou)\
**Post date:** [April 9, 2021, 10:29am UTC](https://forum.freecodecamp.org/t/loading-and-display-data-for-choropleth-project/379145/2 "2021-04-09T10:29:38Z")

</div>

> [@nibble](#):
>
> ```auto
> const projection = d3.geoMercator() ;                 
> const path = d3.geoPath().projection(projection);
> 
> ```

Need to be changed to  
const path = d3.geoPath()

I don’t know the reason why the projection is not working

---

<div class="post-metadata">

**Author:** ![ILM](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/ilm/32/363239_2.png) [@ILM](https://forum.freecodecamp.org/u/ILM)\
**Post date:** [June 1, 2021, 6:57pm UTC](https://forum.freecodecamp.org/t/loading-and-display-data-for-choropleth-project/379145/3 "2021-06-01T18:57:45Z")

</div>

Closed on June 1, 2021, 6:57pm UTC