Press Consumption During Pandemic

Interactive Data Visualization on the Web

About

The interactive data visualization website shows the effects of the COVID-19 pandemic on the consumer behavior of various press offers between 2019 and 2020 in Germany. Four different categories can be compared with each other: news, health, leisure and sports. As a representative of these categories, we use data from a newspaper, a pharmacy magazine, a sewing magazine, and a climbing magazine. In addition, the analogue version of each representative can be compared with the online counterpart.

Project Details

Period
Team Size
IDE
Languages
Library

11/2020 – 02/2021
5
Visual Studio Code
JavaScript, CSS, HTML
D3

Project Description

The website was created in the university lecture ‚Information Visualization‘ with the aim of implementing an interactive website with dynamically changing diagrams. For the implementation, the JavaScript library D3 should be used as well as real data. The overarching topic was the Corona Pandemic and its effects.

Diagrams

Bubble Diagram

In the bubble diagram, the individual categories can be selected and further information about them can be found (orange analogue, blue digital press offers). The size of the individual bubbles depends on the level of consumption. Only two press offers can be selected at the same time, which are then compared with each other in the line charts.

Bubble Diagram

Line Charts

There are two line charts: the upper one shows corona case numbers and the lower one represents the consumption figures of the selected press offers (e.g. sales figures of newspaper vs. number of visits of online news).

Circular slider

The slider allows to switch through the individual months of the year 2019 and 2020. The current corona case numbers are displayed in the middle of the slider and the color switches from grey to red if the current month is a lockdown phase. In addition, the selected month gets highlighted in the line charts.

My contribution

  • Implementation of the bubble chart
  • Implementation of tooltips of all diagrams
  • Front End (responsive layout and coloring of the entire website)
  • Data research

What went wrong....

Unfortunately, we had to give up our original topic, consumption of different types of media (e.g. using streaming services, playing online games, etc.) because the search for suitable data proved difficult:
we mainly searched on platforms like statista.com, but the desired data was often not available free of charge or only available quarterly (required monthly). In addition, it was not easy to access data such as download numbers of games or account usage from Netflix and Co.


-> For this reason, we decided to change the topic to press consumption, since the editors we asked for proved to be friendly to cooperation.