It feels like both a decade ago and just yesterday that the first 91-DIVOC visualization was released. It has been a humbling and rewarding experience to have millions view it and, to this date, I still find it the best way to nerd out with the data. It's been fantastic to also see some building spin-offs of it to use it for other datasets!
There has been so many amazing COVID-19 visualizations -- but I have yet to see one that puts all of the case data that's available in real human terms? So much of the data is bar charts, line charts, and just charts, charts, and charts.
This visualization is one of the simplest in terms of elements, just a single person, but rendered in a way that expresses the human impact and human scale of COVID-19. In some ways it's a simpler view of 91-DIVOC-01, but in other ways it's so much more powerful:
The SVG image was slightly modified, public domain image I found on Wikipedia and served as part of the inspiration for this work. Limiting the entire visualization to a single graphic was both challenging but rewarding, and something I hope you'd try out! Go start creating something – it only takes on graphic to make something great! :)
A lot of people had amazing suggestions on the COVID-19 visualization and I implemented many of them to make the visualization as useful to as many people as possible. One specific suggestion -- to allow the visualization to "remember" you previous choice -- was added with a quick bit of code to use a cookie to remember your previously selected county and state.
Even though this feature was added nearly two weeks ago, I was never entirely happy with it. Specifically, when a cookie is used, all of the data stored in the cookie is sent to the server every time a page is loaded. For this site, that is absolutely not needed -- the highlighting of a selected country on the COVID-19 visualization is done inside of your web browser and not by the server. I was certain there was a way to do this better: How can I store user settings without needing to send the data to the server?
The goal of my second 91-DIVOC project was to explore the storage options available for "remembering" user preferences without a database. I found that every modern browser supports three ways:
sessionStorage, stores data for the current session but lost when the browser is closed
localStorage , stores data with no expiration date and persists when the browser is closed
So localStorage is the winner -- a large amount of data can be stored, the data is private (never sent to the server), and
persists for a long time. But how can I build something to explore this technology?
Reflecting on the past week, I found myself caring less and less on the depressing global statistics and focusing more on the cases and deaths in the communities where I have people I love. The University of Illinois is located in Champaign County, Illinois and, as April 5, 2020, the cases have started to explode -- 400% growth, from 11 to 55 cases, all in the past week.
My second project was to create a COVID-19 tool that shows only the data from the locations that means the most to you:
If you have never created something that has had user preferences saved locally -- not without a database or other infrastructure -- this was surprisingly easy. It's worth getting it a shot and I hope you go start creating! :)
One thing that has impressed me the most is the vast amount of high-quality, organized data around COVID-19. One of the leaders since the early days of COVID-19 has been John Hopkins' Center for Systems Science and Engineering. As part of making an incredible visual map of the outbreak, they open-sourced all of their data collection on GitHub.
While exploring this dataset, I wanted to find what others have created. There were a lot of maps similar to John Hopkins that displayed the number of active cases as a "heat map". This is informative, but they did not provide any direct insight on how the situation was evolving right now.
The visualization that inspired me the most was one I found created by John Burn-Murdoch that overlapped the number of cases in various countries based on the day when each country had the their 100th person infected. I love it!
With this first 91-DIVOC project, my goal is to create my own version of the overlapping countries visualization. I used the dataset linked above, along with a visualization library called d3.js, to create an interactive visualization that allows a user to mouseover any point to explore the data, change the scale for logarithmic (better at showing exponentially increasing data) to linear (better at showing the human impact), and change what country is highlighted. Here's what I created:
I hope you will download the dataset and play with it! The dataset opens in Excel, in Google Sheets, and is easily readable using Python and JavaScript -- it is data that is impacting this world more than anything else right now and you have access to it! I would love to see and share what you create, be sure to use #91divoc. Go start creating! :)