Assignment

The course was explicitly designed to be open. The overarching theme of time could be designed in any way: as an artistic installation, a theoretical analysis or as a practically applied application. A task that is so wide open is always a challenge not to get lost in the boundlessness.

Topic

We knew from the beginning that we wanted to do a web-based data visualization project. After several attempts to narrow down the topic and an honest exploration of our practical hard skills, we decided to collect the data set ourselves and visualize it first in a prototype. We focused on data queries on the internet during the Corona period. Our lead question was – what is the new normal?

Approach & Methodology

Data visualization research

Since we were both new to the broad field of data visualization, we began our work by researching types and forms of data visualizations. In this process, the website datavizproject.com was invaluable, as it provides a fantastic overview.

Design research

In the second stage, we started looking for role model projects. Matching or inspiring role models can make it much easier to get started with your own work. Here we came across the work of Moritz Stefaner. An additional field of inspiration was data journalism like on Washington Post or The Pudding.

Data Source

Data sources research

Our first approach led us to Wikipedia. The world-famous encyclopedia provides a hosting environment called Toolforge, an easy to use online tool that can be used to analyze single Wikipedia pages. In the end we decided against a Wikipedia based project because we were not convinced by the meaningfulness of the data in combination with our goals. Our guiding questions at the time regarding media consumption during the pandemic - which literature was consulted during the pandemic - could not be answered satisfactorily with Wikipedia data alone. It would have required additional data sets, e.g., from Amazon. However, those data sets were too difficult to obtain.

The second approach was more successful. We decided to work with Google Trends, a service provided by Google that allows to analyze the popularity of top and rising search queries in the Google Search across various regions and languages. Google is the most used search engine in the world. For this reason, Google's dataset was a better fit for our research interest.

Final topic definition

After comparing different terms - such as meeting, safety, vacation, takeaway, and other terms whose connotations clearly changed during the pandemic - we decided to focus on the term mask. Here, the change was not only particularly clear in terms of content, but was also easy to grasp visually.

Data Pipeline

Data gathering

There was no pre-existing or curated dataset for our project, so we gathered the data manually. To do this, we narrowed the scope of interest to the related queries, changed the granularity to monthly, and downloaded all data sets for the period 2019/20 for the countries USA, Germany, and Russia. We entered the key search word in the respective language: the mask, die Maske and маска.

The format provided by Google was CSV, so we had no difficulty processing the data in Google Sheets.

Data exploration

Once the data set was complete, we began with the exploration. 2019 was used as base line and 2020 was the exception to be studied in relation to the base. The single data points were specific search queries containing the word mask, e.g.: „charcoal mask“, „who is the peacock on the masked singer“, and many many more.

After a close look, it turned out that the search queries could be categorized, so we worked out a total of 11 categories, ranging from cosmetics to pandemic stories. The first visual exploration that we did was a quick and dirty Google image search for the standard and the most fun/extravagant queries. This helped us to get deeper into the subject.

Data visualization

After the categories were finalized, we worked out a system for relating the Top and Rising queries to each other. Since numbers came into play we decided on three classical data visualization formats: (stacked) bar, pie and line charts.

The data visualization forms were selected in such a way that they support the viewer's cognition as much as possible. Stacked bar charts to show the developement over a whole year, pie charts – reminiscent of packman –to show how the pandemic „swollowed“ the old standards and a line graph to show the peaks in the new emerging pandemic categories.

From my deeply personnal opinion and experience I would like to note that, before data visualization can reach the height of flight of a Moritz Stefaner, Kim Albrecht, Giorgia Lupi or Stefanie Posavec – more classic, small buns have to be baked first ;).

Concept

The concept took its final form only after the semester half-time. We wavered between two different formats: an exploratory data tool or a narrative journalistic article. The feedback from our professor and the class led us to choose the narrative form. And so the final form of our semester project became a scrollable website (prototype) along a textual and visual storytelling.

Storytelling

The project consists of three components: text, visuals and data visualization.

Article

The text unfolds along lead questions like „What is the new normal?“. It summarizes the key insights of the data analysis and tells the story of the evolution of the search term mask during the pandemic year 2020 from the perspective of Google Trends.

Illustrations

The illustrations show the same insights via the visual language. They show a selection of very different masks (legend) and at the same time, they contrast certain types of masks with each other. We have chosen the style of a simple photo collage, because the communication of the mask in media and in the Google Imgae Search is done a lot through photography.

Composition (dramaturgy)

The most challenging part was determining the dramaturgy of the page - matching the visual and textual elements to each other, as well as structuring the information. What do you show when, where and how much at once? 

For me personally, it was very important to create a website that was different from a static print article. In this case, the crucial difference between print and web is the possibility of interaction.

We used the on hover as interactive element. The structure follows the golden rule of data visualization: overview first details on demand. Particularly informative and entertaining mini-stories contained in the data are teased visually and then the user can explore them on hover if desired.

Iterations

To understand the workflow of a data visualization process, it is important to mention here that it took several elaborate iterations before we were able to define the final form. The simplicity of the page was hard work :).

Website Prototype

You can explore the Figma prototype here.  

Or have a look at the screencapture.

Live Prototype

Here you can find our web prototype made in Webflow: https://mask2020.webflow.io/

Outlook

The 2020/21 winter semester was a notably short one. Also our small team has only rudimentary programming skills. For these reasons we were not able to put the site online within the semester time frame. However, it is our firm intention to create the site in Webflow as soon as possible.

My special thanks goes out to the great fellow students, who offered their help to make this step possible! :)

Evaluation and Reflection

The free choice of topic and format offered a good opportunity to delve into the topic of data visualization. That was great, thank you!

A downside to this project was being overwhelmed at times with the scope of the many steps involved in a data visualization project. From the choice of data sources to the aesthetic matching of two typographies is a very long and very diverse way. I – personnaly – would have liked a little more support during the tech heavy data exploration and web implementation phases.

Design in code

Data visualization projects connected to live data clearly offer other interaction possibilities, like filtering, zooming, comparing, etc. The present work is a simple project with one-time read data. A project where one could learn the very basics of data viz.

Once the necessary hard skills to connect live data to a project are accessible, it would be a great joy to create a real and interactive web-based project.