search

plouc / nivo

nivo provides a rich set of dataviz components, built on top of the awesome d3 and React libraries
https://nivo.rocks
MIT License
13.2k stars 1.03k forks source link

Getting NaN in Choropleth path from geoJSON file #1777

Closed mattandryc closed 2 years ago

mattandryc commented 3 years ago

Describe/explain the bug NaN values are pushed to the "d" attribute in path

To Reproduce Use the states.json file → https://github.com/mattandryc/geojson-states with the MyResponsiveChoropleth example from the documentation

import { ResponsiveChoropleth } from '@nivo/geo' import states from ".states.json"

const MyResponsiveChoropleth = ({ data / see data tab / }) => ( <ResponsiveChoropleth features={states.features} .../>

Error message Error: attribute d: Expected number, "…7.7845336326942,NaNL190.17653904…

plouc commented 3 years ago

@mattandryc could you please create a codesandbox reproducing the issue? It would help, thank you.

mattandryc commented 3 years ago

@plouc https://codesandbox.io/s/nivo-geo-demo-forked-rs4s2

plouc commented 3 years ago

Thank you @mattandryc, I'll try to have a look at this.

mattandryc commented 3 years ago

@plouc here's the source for the geoJson in case that's helpful.

https://observablehq.com/@d3/u-s-map

Converted topoJson to geoJson using the method below. topojson.feature(us, us.objects.nation)

mattandryc commented 3 years ago

Can anyone point to a nivo ResponsiveChoropleth successfully rendering something other than the world map (world_countries.json)?

mattandryc commented 3 years ago

@plouc I put together a hacky workaround using dirty-reprojectors in the sandbox below.

https://codesandbox.io/s/nivo-geo-albersusa-demo-uyit8

This is more of a feature request, less of a bug → a more succinct solution would be adding a GeoProjectionType for d3.geoAlbersUsa() on the GeoMap component.