Choropleth Map - Data Missing and Styling

JavaScript
1

I have my map up and functioning as it should, but it isn’t loading all the county data so there are black holes in the map! I am not sure what is causing that as I believe the dataset that I’m using to build the map is created here:

   .data(topojson.feature(us, us.objects.counties).features)

and then looped through with some filter functions that should hit every county object. Any ideas what I am missing here? I don’t see anyone else having this specific problem!

One other thing that is driving me NUTS (and I’m not the best with styling or design as is) is that I cannot get the map to responsively center in it’s container. Any suggestions on that would be great as well.

Here’s a link to my codepen:

Current Choropleth Map

Challenge: Visualize Data with a Choropleth Map

Link to the challenge:

2

Google sent me here https://stackoverflow.com/questions/27303427/unusual-black-shapes-in-d3-choropleth. I took that idea and fiddled with the .states CSS fill color and it was definitely something with the states mesh that was the problem.

When I compared your pen and mine, I noticed that your line 142 had svg.append("path") and my line 291 was svg.append('g'). Changing that fixed the problem.

While I don’t know all the details, I believe your original code would append individual paths to the svg element and if they were not closed (they wouldn’t be because we’re not redrawing duplicate borders because of the function that is disallowing identical paths), it would partially color the states with the CSS fill color. Appending a group (g) inserted the path/mesh elements and allowed them to close and not use the fill color.

1 Like
3

Jeremy! Thank you so much! From my end, if I just change the state class to have a fill of none it solves the problem. Ahhhh !!! I promise you I googled that, but I was so sure that the problem was coming from just a partial read through of the json object :cowboy_hat_face: Sometimes it really helps to have a second person examine the problem. - much appreciated.

As far as groups vs. path, I think it does the same thing, right? Only groups would do it all at once and paths individually? I don’t seem to need to adjust that to make it workable.

I think to really understand what things are doing here I’m going to have to build another map with slightly different functionality to test the limits of my understanding :).

4

You’re right. If you look at mine, I had a .attr('fill', 'none') in the code where I was drawing the states and when I removed it, I had the black triangles. So that’s it. It should have been obvious since I was changing the fill values in CSS. Changing it from ‘path’ to ‘g’ probably just broke that bit and prevented the original problem with another problem.

I was confused about groups and paths, but upon further reading I realize that my group was just for translating the state boundaries to match the rest of the map and had nothing to do with closing the paths.

I think building other maps is the way to go; things definitely got easier as I progressed through the projects. At some point, I intend to try to draw a choropleth with just one state and its counties from this data and then see if I can add educational or unemployment or COVID-19 case data to the map in similar fashion.

1 Like
5

I just went through the treemap project, and I’ve still got a long way to go with d3, but I thought it really helped a lot with understanding groups and how to use them. Good luck with other map projects!