The COVID-19 pandemic has disrupted our regular lives with its astonishing rate of infection and worldwide spread. This visualization displays the Johns Hopkins COVID-19 dataset on an interactive map, animated over time from the start of the outbreak to the current day. The visualization stays up-to-date with the dataset as Johns Hopkins adds new figures, so check back often to see how things are progressing (and, hopefully, slowing down).
Dots for each COVID-19 case. The map displays a colored dot for each and every confirmed case (in yellow) and reported death (in red). The slider at the top lets you select a date. If you hit the play button, the map will animate and you can watch the pandemic unfold over time.
Time series chart. A time series chart in the lower left corner displays the aggregate data over time. This chart helps visualize the progression of the disease--you can see an exponential rise as the first infections began to spread out of control. The chart has different modes: for instance, the logarithmic mode shows how the rate of infection has changed over time, jumping up suddenly before beginning a slow tapering off towards the end of March. You can also click on the legend to hide or show the different lines.
Interactive map. The map is interactive as well: you can pan from place to place by clicking (or touching) and dragging, and zoom in and out by using the mouse wheel (or by pinching).
Note that this map does not have accurate location information for the confirmed cases and reported deaths. The dots representing each case are randomly distributed throughout the county they are reported in--this is meant to give a general sense for geographic distribution according to the raw data. At close zoom levels, these visuals can be used to give you a general sense for the situation in a particular neighborhood.
Dynamic updates. As you move and zoom, the chart in the corner will update to show only the data visible in the map. That means you can get a window into time by using the slider, and into space by using the map to zero in on areas of interest. Check out how Seattle's epidemic began a little bit before New York's, or the sudden onset that occurred in Louisiana.
County-level heatmap. The visualization includes a heatmap mode showing the per capita rates of confirmed cases and reported deaths in each county. Use the checkboxes in the top bar to activate this mode. You may find it useful to additionally toggle the checkbox for the dots so the heatmap is more visible. The colors in this heatmap run from a deep yellow for the county with the highest per capita confirmed case rate, to white for no confirmed cases or deaths, to a deep red for the county with the highest reported per capita death rate.
Daily values. The visualization can either show total values to date or daily values. When the Daily checkbox is selected, the dots and heatmap reflect just values for the currently selected date. For heatmaps, the deepest colors are based on the highest per capita daily rate.
The source code is available on GitHub. Check the code out and play with it, and let us know if you run into problems by filing a bug report or asking a question on the issue tracker.
The map, dots, and heatmap are driven by GeoJS, an open source high-performance mapping and visualization toolkit developed at Kitware.
If you would like to learn more about us or work with us, please drop us a note or write us an email.