DEV Community

Cover image for React and D3: Dynamic COVID-19 Visualizations (Part 1: World Map)

React and D3: Dynamic COVID-19 Visualizations (Part 1: World Map)

Jesse Smith Byers on May 23, 2020

As a science teacher, I LOVE data visualizations. I love how a strong visualization combines the fields of art, science, mathematics, and humanitie...
Collapse
 
nibble profile image
Joseph Mawa

Thanks for this article. I can't believe this is the first time i am coming across Novel covid19 API.

Collapse
 
jessesbyers profile image
Jesse Smith Byers

I was impressed by how many data points were included for each country in this API, but overall, I think I prefer the API that I used for the bar charts because it has so many different specific endpoints for longitudinal data. Info about that API is in the second post.

Collapse
 
saswatamcode profile image
Saswata Mukherjee

This is really great! I used leaflet and react-leaflet to build something like this.

Collapse
 
jessesbyers profile image
Jesse Smith Byers

Thank you! I would love to see your app or repo if you don’t mind sharing.

Collapse
 
saswatamcode profile image
Saswata Mukherjee
Thread Thread
 
jessesbyers profile image
Jesse Smith Byers

This looks great! I'll have to explore react-leaflet sometime soon. I really like that when you zoom in on your map, the scale changes so that the circles are no longer overlapping. I need to fix this with the scaling on my map. In some views, some of my smaller country circles are completely "covered" by larger circles, so they cannot be hovered over. Thank you for sharing!

Thread Thread
 
saswatamcode profile image
Saswata Mukherjee

Glad you liked it!😁

Thread Thread
 
jessesbyers profile image
Jesse Smith Byers

I took a peek at your repo to see how the zooming worked so that circles didn't overlap when you zoom in. I could see that you had the zoom={1}. Is that just the initial zoom value for the base map? Does leaflet or react-leaflet take care of re-sizing the circles automatically for you?

Thread Thread
 
saswatamcode profile image
Saswata Mukherjee

Yup! The zoom refers to the initial zoom of the base map. As for the resizing effect of the Circle Markers, there isn't actually any code behind it. The radius of the circles are a function of the number of confirmed COVID cases in the region and the centers of the circles are the latitudes and longitudes of the region. Thus, if you zoom into the map, the lat and long points, i.e, the centers move away from each other while the radius remains the same. This causes the circles to not overlap when zoomed. Hope this could help!😊 Take a look at the CircleMarker element in Map.js for the radius and center.

Thread Thread
 
jessesbyers profile image
Jesse Smith Byers

OK, that makes sense. I decided to fix mine by just sorting the data in descending order so that the largest circles are drawn first, with smaller ones on top, so now any circle can easily be hovered over to view the data. Thank you for helping think through the options!

Thread Thread
 
saswatamcode profile image
Saswata Mukherjee

Glad I could help! 😊

Collapse
 
annawijetunga profile image
Anna Wijetunga

Holy petes you've been busy. This looks and sounds amazing - cannot wait to see the final product. You are on fire!

Collapse
 
andherrson profile image
Anderson Oliveira

Congratulations! I've made an application using d3.js with Angular 9 for brazilian data. You can check on: covid19br.info

Collapse
 
jessesbyers profile image
Jesse Smith Byers

Thanks for sharing your site! I love the visual design and layout of yours - that is something I need to work on. I also really like the small charts at the top - even though they are small they tell a story. What tech stack did you use for this?

Collapse
 
jessesbyers profile image
Jesse Smith Byers

Just finished up my application (for now): You can view it on github pages

jessesbyers.github.io/covid19_worl...

Collapse
 
treellab profile image
doolil

thanks for sharing it is amazing!