I took inspiration from Dan Shiffman’s coding challenge on ‘Mapping Earthquake Data’ to try and map COVID19 spread from 2020 t0 2022. Using mapbox’s api and csv file from CSSEGISanddata by John Hopkins University Center for System Science and Engineering, I mapped out the number of people infected with COVID19 in all countries as a circle.
As mentioned in Shiffman’s video, I used Web Mercator to convert the longitude and latitude of each country to x and y coordinates. I then mapped out the coordinates on static map imported from mapbox.
Shiffman’s video:
Coding Challenge: Mapping Earthquake Data
I struggled to get an actual mapping at first but eventually figured I have to change the constant provided by the Web Mercator to 256. I eventually ended up with this equation for the x and y coordintes.
![{\displaystyle {\begin{aligned}x&=\left\lfloor {\frac {256}{2\pi }}2^{\text{zoom level}}(\lambda +\pi )\right\rfloor {\text{ pixels}}\\[5pt]y&=\left\lfloor {\frac {256}{2\pi }}2^{\text{zoom level}}\left(\pi -\ln \left[\tan \left({\frac {\pi }{4}}+{\frac {\varphi }{2}}\right)\right]\right)\right\rfloor {\text{ pixels}}\end{aligned}}}](https://wikimedia.org/api/rest_v1/media/math/render/svg/996310dc648c9bbfec7a98fcc03224798042c74d)
After successfully mapping the coordinates the static map, I decided to draw a red circle over the coordinates with the radius as the amount of people infected by the covid19 over the past 3 years.
The embedded sketch:
This version of the assignment has less interactivity, I plan to add features that will enable to user get the number of people infected by covid19 in a particular country upon clicking on a circle. I’ll also make the map dynamic, changing the zoom as the user zooms in with the mouse.
Cool that you got the data superimposed on a proper map! Maybe you could make the circles start from 0 radius and grow up to the final size – some animation would make the visualization feel a lot more dynamic. Good work!