frame-0001.png

One Year of Daily Covid Cases & Deaths in Ontario

Data Visualization

This interactive data visualization model was created using Processing (Java) to run a sketch which reveals the daily Covid-19 new daily positive cases and daily deaths in Ontario from March 1st of 2020, until February 28th, 2021.

The data used for this project was retrieved from covid-19.ontario.ca/data.

Mar. 2021 - Apr. 2021

Adobe_Icons-06.png

The Process

Finding the Data & Sketches

Before deciding on the Covid-19 daily cases and deaths data set from covid-19.ontario.ca/data, I considered other data sets from long-term care home Covid-19 data to Covid testing in Ontario data. I wanted to find the most reputable and relevant data that I could find before brainstorming how I would display this data. Once I picked the data set and knew I was going to focus on the daily positive cases and deaths variables I was able to start sketching my ideas. 

IMG_5718_edited.jpg
IMG_5716_edited.jpg
IMG_5717_edited.jpg

Illustrator Sketch 1

 

This was one of the illustrator sketches I created using real data from the chosen data set. This one was not as effective in portraying the data and the cumulative death data I was using at the time caused the red circles (which represented deaths) to increase too quickly. I did not move forward with this idea because of these reasons and it just wasn’t as clear when reading the data.

YSDN4008_Malcolm_E_W10_P2_Page_2.jpg

Illustrator Sketch 2

 

I created this mockup on illustrator as well using real data for half a year of Covid-19 cases. This one was my strongest idea and more visually appealing than the other idea proposed. I ended up changing the classing and tweaking it a bit from this original mockup. However, a happy ‘mistake’ was made as I was duplicating the circles for the positive cases (white circles) they increased slightly in size as I made their radius larger. This was something that was brought up in critique as a strong suit so i carried it through to the final processing sketch.

YSDN4008_Malcolm_E_W10_P2_Page_1.jpg

Processing Sketches

At this stage, I was able to plot all of the data and implement buttons to separate the positive Covid-19 cases from the deaths using Processing.

I also added a hover callout which tells the user the year, month, day of the month, and data for each day. I then added a slider to allow the user to isolate different days and see the data more accurately. I then added a hover legend which shows the distinct months of the data and added two separate sliders to move the deaths and the positive cases independently.

Hover Callout & Buttons

Screen Shot 2021-04-06 at 1.09.59 PM.png

Initial Sketch

Screen Shot 2021-04-06 at 1.00.21 PM.png

With Hover Legend

Screen Shot 2021-04-06 at 1.06.56 PM.png

Processing Sketches Revised

After classing the data, I changed the hover elements to a circle which I found was more fitting with this circle-based project and added another hover for extra information and button explanations. I also customized the slider bars to include the imported font which is used throughout the visualization including callouts, the title, and legends.

I was having some problems with making the sliders work with the data independently, but I was able to fix this issue. This allows the user to pin-point and isolate different areas of interest from the original data set. It also allows the user to focus on either the cases by itself or the deaths alone.

 

I then filtered the slider by days to isolate different times of the year, but through critique and further discussion recognized this was not a necessary function. I revised the slider to filter based on the amount of deaths/positive cases to only show the days which had a certain amount of deaths/cases. 

Slider in Use (by each day)

Screen Shot 2021-04-06 at 1.11.30 PM.png
Screen Shot 2021-04-10 at 9.05.44 PM.png

The Final Processing Sketch

Screen Shot 2021-04-10 at 9.04.04 PM.png
Screen Shot 2021-04-10 at 9.05.06 PM.png
Screen Shot 2021-04-10 at 9.05.16 PM.png

Completing the Project

The final hover elements are seen above. The first hover is when you hover the mouse over the ‘Months’ area, and the second hover is when you hover the mouse over the ‘i’ for a legend additional information.