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
svg
.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
.enter()
.append("path")
.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.