4/10/2020
Written by
Updated 5/5/2020. Illinois CS Teaching Associate Professor Wade Fagen-Ulmschneider has helped students create a number of interesting interactive data visualizations for his Data Driven Discovery course, from grade distributions to racial demographics. His latest project: a visualization of COVID-19’s growth, using data from Johns Hopkins. Since he first published it on March 19, his visualization has gone viral, been used in briefings by the governors of Kentucky and Washington state, was named by The Verge as one of six best illustrations of COVID-19 data, and was described by Popular Mechanics as the "easiest way to make sense of essential data." We talked with Fagen-Ulmschneider about the project.
What were your motivations for creating the COVID-19 visualization?
It all started from having planned to travel over Spring Break. A few days before my flight, I chose to cancel my travels and found myself with a lot of unexpected free time and everywhere I turned was news and information about COVID-19. I love to nerd out with data and I found myself constantly looking for more data about the growing cases across the world, yet I found very little data I could dive into and answer all of the questions I had.
The first visualization was created as my first “91-DIVOC” project, an idea to “flip the script” on COVID-19 and provide resources for others to nerd out with all sorts of data with me. (91-DIVOC comes from reversing or “flipping” COVID-19.) The first dataset that I was exploring was Johns Hopkins’ collection of data on COVID-19 cases. The first COVID-19 visualization I created (and shared the open-source code on github) showed off the dataset by allowing a reader to dive into any of the data by tapping or mousing over every data point to find out exactly where it came from and the exact number of COVID-19 cases for every country.
Ultimately, I made the visualization to answer the questions I had about COVID-19 and did it in a way that others could do the same.
How did you create the visualization? What software tools and guiding principles did you use?
Several years ago I taught a course on data visualization (with Cinda Heeren) here in Computer Science at Illinois and fell in love with a visualization library called d3.js. Unlike Excel where you choose a type of graph and you can only customize a few details of the graph, d3.js allows you to control every single little detail of the visualization you create. For example, if you want a bar chart in d3.js you need to draw the individual rectangles that make up the bars. While this may sound tedious at times, that flexibility allows anything you can imagine to be created into a visualization.
For my COVID-19 visualization, d3.js was used extensively. Specifically, I wanted to make sure that every single data point on the visualization was something that I could tap on or mouseover and find out more information. To do that, I made sure that every circle and every line I put on the graph was something you could interact with to view more data. Additionally, I made certain that it worked just as well on a phone as it did on my computer -- making sure it was a truly accessible visualization.
What was the most challenging aspect of creating the visualization?
I probably spent way too much time obsessing over the readability of the visualization -- there are hundreds of countries and over 50 states/territories that all need to be mapped into a single graph There is not enough space to give every single country or state its own space so I had dozens of iterations of how to incorporate all of the data while providing users with the ability to drill down into every single data point.
One really small detail that went through many iterations was the “Highlight” feature where a reader can highlight a specific country or state. When a country/state is highlighted, the data points and lines are drawn larger to give the user easier tap/mouse access to dive into the data. In addition to needing to make the points larger, the highlighted data points were also placed on top of all other data on the graph to really make it easy for the reader to click/tap on those points.
How do you think your visualization has made an impact? Was it a shock to get a call from a governor's office?
I never thought that I would be helping out several governors convey the impact of COVID-19 in their states -- it was definitely a shock. I am glad they found it a useful tool to help communicate about the COIVD-19 pandemic in their states!
As for impact, I believe the most significant is to provide a clean, honest, and accessible way to visualize the COVID-19. There are no predictions -- just data with hundreds of combinations of ways for you to customize how you want to view it to get the best understanding of the data.
Do you have any other COVID-19 visualizations planned?
Yes, definitely -- the COIVD-19 visualizations are just the beginning of the 91 projects that was the motivation behind 91-DIVOC. The second COVID-19 project is already live, allowing readers to check up on county-level data for the locations that matter to them the most. I find myself checking this county-level tracker more often than the global data to see how many cases are in locations where my family and close friends live.
You can always keep up with all of the 91-DIVOC projects, along with visualizations I work with students on as part of my d7 research group, on my faculty webpage at https://waf.cs.illinois.edu/, or on major social media (Facebook, GitHub, Instagram, LInkedIn, Twitter).
Also see the Statistics Department's Q and A.