D3 | Choropleth Map

Hello Everybody, i just completed my d3 project no 4 Choropleth Map
here is the link:

give me any feedback or advice


This is really good, i would suggest making the bar with the percentages bigger.


Hi Michael,
thanks for your feedback and please check it again i tried to fix it. :sweat:


Great map! I liked the transparency on the hover popover background.

  • Why the “don’t look at my code” comment? The code seemed very readable and not ugly at all. It was all nicely indented with newlines in useful places like inRange callback on Line 65.
  • Why lets instead of consts for the promise declarations on Lines 19 and 26? I think const is preferred if the variable is never reassigned.
  • The code could be DRY’d up a little more for those Promise bodies too. Could jQuery’s .ajax help with sending the request and automatically parsing the JSON formatted response body? http://api.jquery.com/jquery.ajax/

Happy coding!


thanks for your feedback Dave,
i forget to remove the comment “don’t look at my code” and i write it cos i think that my code is so ugly,
i use let cos its short in spelling from const,
i don’t know that how can i use jQuery’s .ajax but thanks for link its so helpful

1 Like

(hit the reply button or i do not get a notification)

1 Like

Hey there!

Nice work. I would make a few improvements here and there, though.

  1. The website is not responsive. Keep in mind a big percentage of people surf the web behind their phones.
  2. The tooltip is visible (at least in my phone) in the top left corner, before clicking on any county. See the screenshot.
  3. When I click on a county, the tooltip shows up correctly, but I miss some feedback on what county I clicked exactly. Changing the fill or giving it a stroke would help. This is specially useful when two or more adjacent counties are in the same range of education; they will look like a single county and, when clicking on one of them, you the user won’t know exactly where he/she clicked.
    Have a look at my Choropleth map to see what I’m talking about. Click on any county to check the difference.
  4. The most important of all. The counties are not correctly displayed on the map. For example, where it should say San Diego County, in California, it says Vinton County, in Ohio! :smiley:

Other than that, great job. D3 has a steep learning curve in my opinion and you’re doing great.


hi, Yago your choropleth map looks great its perfect and thanks for your advice
i tried a lot to make my choropleth responsive but i dont fix it sooo
i created a new choropleth map here it is:

its responsive , tooltip is invisible on mouseout and i think it shows correct county
but how can you add the stroke?
i don’t know how to add it, i need your help to add stroke

1 Like

maybe its better than first one

Thanks for the compliments!

Now, that’s a good Choropleth Map! Good job!

To highlight the selected county, you can change the fill property on the state hover selector, for example. This way, whenever you hover over a county it will highlight and also when tapping on a phone.

Okay thanks for your feedback and help i would work tommorow on it

1 Like

hi yago, i fix it check it again

Much better, yeah :wink:

Hello there,

May I ask if this project was part of a tutorial/online class?

If yes, is it possible to have the reference?

This looks great and I would like to give it a go :smiley:

Thanks in advance for your help,