D3 Choropleth - Advice Needed

I am having much trouble with the Choropleth challenge. I’ve spent many-many hours trying to figure out how to do and finding the right information to make the Choropleth work within the latest version of D3 is proving very time consuming.

  1. How long should it take to finish a D3 challenge such as this one?

When I was trying to find information for this challenge, I saw that there was an FCC tutorial for how to make a Choropleth.

  1. Should I watch the tutorial video?

It takes me so long to complete these d3 challenges that it makes me feel that I’m not good enough or that I’m not going to get good enough if I’m not decent enough right now to get remote coding work, remote web development, work that I will enjoy doing.

The D3 projects are hard, new, and different. They are a significant jump in difficulty over the other front end stuff. Plus, it’s the introduction to asynchronous programming. So yes, you will need to do a good deal of research.

The choropleth is probably the hardest D3 project. It will take some time. You will most likely want to look at some examples, at least for how to use the data set because the data set is huge and it’s not immediately obvious that you need to use topojson to process the data. I spent a lot of time reading the D3 documentation and looking at examples before I understood what was happening.

The choropleth also has the added difficulty of processing two sets of data; one to draw the map and one to provide the per county education data. But once you can draw the map and stitch the data sets together, you can recycle much of your heatmap code to finish the project.

Thank You for replying. I came across topojson in the documentation under d3.geoPath() but I can’t find the link information to be able to put it in the HTML portion of Codepen. That portion of the doc said you can get the d3 js stand alone library for it, but when I click the link and look I don’t see any such link that will enable topojson .

You can add it to your codepen’s javascript just like you did d3; just click on the settings gear and search for topojson.


Thank you for your thoughts.

Thanks to God, I just completed the challenge this morning. My choropleth passes all 12 test. Yahoooo.

It would help if FCC specified in the challenge what version of D3 you should use and why you should use it; and it would help if they gave you some clues about what to do.

I wish there was a way that I could find out if my choropleth was properly done even though it passed the test because I’m not for sure if I did the legend right, in terms of the ticks and the corresponding data numbers.

If you would like to take a look at it for any reason, you can check out my D3 Choropleth - Percent Bachelors or Higher Education Per County

Keep on smiling, and keep on keeping on.

Looks good to me. I think there’s a low probability of something being wrong if it passes the tests that ensure that the data points are aligned (like county to tooltip, etc.). The legend looks fine. I don’t think there is a correct legend as long as it has a sufficient number of colors to pass testing. So as long as the tests pass and you’re satisfied, then that’s a success.

This is definitely one of the projects that force research before completion. I consider it unlikely that someone would have used a library like D3 enough to make a choropleth before doing a series of projects like this. As far as platforms and software versions are concerned, while the guidance would be nice, these are really just problems to be solved, without regard to the tools we decide to use. The only constraint is the stack test (HTML, CSS, JS); after that we can use what we want so that we get the opportunity to evaluate toolchains and technology stacks and use what we find most appropriate.

Jeremy, thank you for your input. I really appreciate it. I just want to be a great at writing code. D3 is pretty neat, but I had so much trouble finding the right information to get things to work and getting things to work.

I wish Mike Bostock and others who wrote Observable code examples would clearly specify what is Observable, D3 JS, Pure JS, and etc. code along with what version of D3 is being used because doing so would have probably made it a little easier to find the necessary information.

1 Like

I’ve been looking for explanation on using the topojson, should i go to youtube? I really want to do this on my own, is it possible without watching tutorials? Thanks