Choropleth Map... How to Tackle Without Copy/pasting?

I’m making my way through the Data Visualization projects and I’m at the Chloropleth Map part right now. So far in the prior data visualization projects I’ve spent a lot of time learning about d3 and whatnot. I can look at the raw data and learn what I should be doing in my code from studying it. But this project is just so convoluted with the arcs and geometry stuff, that I feel like all I can do is just copy and paste the example project code to an extent. But that’s not right because I learn practically nothing. plus well… it’s cheating.

So how would you guys go about learning what’s necessary to learn for this project?

1 Like

When I encountered the choropleth map, I spent a long time trying to look up how to do this. I couldn’t understand the original documentation. Not even looking at the actual code in the example helped me understand what was going on, so I gave up and moved on to the back-end certifications. Later, I came back and decided to tackle the map again, but with a new strategy:

Fork the example code (there’s no shame in doing this), and just start deleting the parts you know have nothing to do with drawing the map. You will reduce the code down to the bare-bones needed to draw the map, which is the hardest part of figuring out this project. Then start commenting out aspects of the bare-bones structure, changing values and variable names around to see what the effect is. That way you’ll ‘sort of’ know what each part is doing.

To save you time, because I can empathize with how extremely frustrating this project is, I’ll show you the few lines you need to draw the map:

  const path = d3.geoPath(); //the method that does the actual drawing, which you'll call later

      .selectAll("path")  // should be familiar, adding "path" for all data points, like adding 'rect'
      .data(topojson.feature(data2, data2.objects.counties).features) // here you convert topojson data to geojson data. I have no idea how the math works. Topojson is like a 'compressed' version of geojson
      .attr("d", path)  // don't know what 'd' is, but it seems analogous to "x-y-cordinates", and path seems to tell the coordinates where to go using magical math 

Once you have the actual map drawn, I’m sure you can figure out the rest as they’re nothing new. Well, maybe the color scale is new, but even if you don’t know how that works, you can brute force it by creating your own array of colors

Oh, and the above only adds county data. This alone will pass the tests. There’s another snippet of code in the example that adds state borders as well. You don’t need it, but you’re essentially doing the same thing, except you specify data2.objects.states instead of data2.objects.counties (again you can refer to the example code). If you study the json file, you’ll see that it’s broken up into states and counties. You’ll have to do a lot of scrolling though, and it’s easy to miss where counties end and states begin.


Oh, and another thing: “fips” in education data correspond to “id” in counties data, so when fips = id, then that means it’s the same county from each respective json. This isn’t immediately obvious just looking at the data as we’re dealing with 2 massive datasets here, so I think they should have clarified this.

And also note that you’ll need to import both data sets. If you’re using the import method shown to us in the challenges, then you can only import 1 json at a time. I’ll assume you already know about asynchronous functions and how to deal with those.

1 Like

Thanks a lot for the advice. I know enough about asynchronous stuff to get by. But honestly I don’t think FCC has taught about that yet; I learned it elsewhere.

I was also struggling with how to get started with this project , because, unlike the previous ones, there AREN’T any lessons in the course about how to render this kind of maps with D3 and all tutorials and guides about the topic I could find outside FCC seemed overly convoluted.

Your solution also did the trick for me, and with few and pretty easy to understand lines of code. Thanks a lot for sharing it!


let path = d3.geoPath()


1 Like

This helped me a lot!!

1 Like

the project itself seems to be a fork of this example from the d3 docs… , which is probably why there’s a variable called unemployment at the top.