COVID-19 World Map

Code Feedback
1

link : https://codepen.io/Koustubh26/pen/JjYrgKQ

Require feedback and improvement suggestions
Thank you

2

Hi Mate,
When i try to look at the full page view, codepen tells me i cant as you havent verified your account?
Ive checked the HTML and CSS, they seem 100%. JS is missing 2x semicolons, so thats also pretty darned good.
but i would like to see your site in fullscreen… :wink:

Screenshot 2020-05-07 at 13.01.24
Screenshot 2020-05-07 at 13.01.241784Ă—758 59.4 KB

3

Hi
I’ve verified my email
Can you please check again
Thanks
Also, any suggestions or modifications are welcomed

4

Hi Mate,
Its quite honestly brilliant, i dont know enough about JS so cant comment on that code.

some items to improve on perhaps;

  1. A text title somewhere on the page would be great, to show what the chart is…
  2. At Full screen view, the map is crushed into the top left, can this be made to fill the screen and be more centered?
  3. The time delay from hovering over a country until the stats appear should be cut down, possibly in half - there should be no lag if possible. Or else add a click event and change the cursor to a hand pointer to signal to the web user that the content can be clicked?
  4. The styling of the popup bubble could be improved a little, increase the text size - also on the popup it should be called “Country”, not “City”.
  5. There are no dates / times / data sources on the site. If this was a real news item that would be critical for credibility.
  6. It would also be good to find some method relevant to the data to colour the countries - instead of just gray - just a little more pleasing to the eye. e.g. colour counties based on… lockdown status for example?
  7. When you hover over France, somewhere in south America highlights as well.
  8. You have virtually no HTML for accessibility - remembering that a lot of people access the web in different ways (screen readers, keyboard only users etc).

Great work!

1 Like
5

Good job. I love d3.js. In addition to the comments above, it is important to give the svg element a height and width attribute because i notice some countries have been cut off (Or give the map a scale).

6

For JS

  • At line 15, what is g? A little description in the name would help.

  • At line 68, please put 187 into a descriptive constant variable, same goes for line 53.

  • At line 74, it should be more expressive to use string interpolation (backticks and ${variable})

  • From line 68 to 77 and 52 to 69, it’s probably a better idea to just put them into separate smaller functions/methods. It seems, mapFun is doing too many things. Do keep the function/method small.

7

Thanks all for your valuable suggestions.
I’ll try to implement it.
Thanks for taking time and reviewing my work

1 Like