DEV Community

loading...

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

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 Author

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! 😊

Forem Open with the Forem app