Data viz - Choropleth Map (React + TS)

JavaScript
1

This is the GitHub repository: Choropleth-map.

Main error (1):

image
image749×166 9.71 KB

I can’t seem to figure out why, but my path ‘d’ attribute is null when it shouldn’t be by any means (that I can think of).

If I comment out the statement that throws an error if ‘dProp’ (the ‘d’ path attribute) is null, I get something more interesting…

image
image705×414 20.6 KB

I get an almost complete set of path attributes (not all console.logs are shown in the above photo), of which only the last is null. This is causing me a lot of confusion as I have no idea what could be causing it.

const proj = geoAlbersUsa();
        const path: GeoPath<unknown, Feature> = geoPath().projection(proj);

        const dProp = path(feature);
        console.log(dProp);
        if (dProp === null) {
          throw new Error(
            `dProp is not valid - has a value of ${
              dProp === "" ? "'empty string'" : dProp
            }`
          );
        }

I have tested the data being fetched and received a lot, and there seems to be no error with that - personally, I think the error may just be contained within the ‘Marks’ component. But who knows.

Error 2:
This is not so much an error, but the test saying “There should be at least 4 different fill colours used for the legend” is not passing, despite my color legend clearly using 9 different colours.

However, I think this might just be related to the Main error, causing a bit of havoc in the svg overall.

This has definitely been my hardest project yet, especially when trying to find workarounds in order to combine React, TS and D3 altogether.

If anyone has any suggestions, advice or solutions on how to fix these bugs, the help would be much appreciated.

2

This is the project link (I forgot to add it in the main post):