Incom ist die Kommunikations-Plattform der Fachhochschule Potsdam

In seiner Funktionalität auf die Lehre in gestalterischen Studiengängen zugeschnitten... Schnittstelle für die moderne Lehre

Incom ist die Kommunikations-Plattform der Fachhochschule Potsdam mehr erfahren

Jobben als Abgeordnete*r

The network visualization „Jobben als Abgeordnete*r“ shows the relation between current german parliament politicians and their sidejobs. It's based on the data of abgeordnetenwatch.de

1. Final Project

Dataset

The Data for the final project comes from the API of abgeordnetenwatch.de. The data was fetched from multiple entities of the API and later on cleaned, merged and prepared for the visualization with python in Jupyter Notebooks. The data comes from these entities:

  1. parliament period
  2. politician
  3. candidacy mandate
  4. sidejob
  5. sidejob organization

Related Work

German Media Universe by Christian Laesser

Go Apply by Mark-Jan Bludau

Royal Constellations by Nadieh Bremer

Topographie der Gewalt by Urban Complexity Lab

Sketches and First Drafts

Parallel to the data analysis I started the design process by sketching. My approach was to design a tool that provides the relatively big dataset (2840 nodes and 2825 links) in a readable way. To achieve this goal I sketched different layouts of node and link relations on paper. At the same time, I tried first visualizations inside Observable. This process showed, that displaying all of the data at the same time leads to unreadable hairballs. I tried to overcome this problem in the further process with filtering options.

first_draft.pngfirst_draft.png
sketches.jpgsketches.jpg

Visual Design

For a fitting overall appearance I worked with moods from news magazines and other sources with journalistic our scientific approach. Since the topic of the project includes a much-discussed political component, the design should look trustworthy. As the german parties are widely associated with specific colors I chose these colors as a starting point for my color palette, to get a look that is familiar for readers. I used the fonts „Editorial Neue“ and „Roboto“ to get a clean, serious design in a newspaper style.

figma_1.pngfigma_1.png
figma.pngfigma.png
mood.pngmood.png

Implementation

After creating the design with Figma and Observable/d3, I started implementing it with HTML, CSS and d3. The final version of the websites includes a filter by sidejob category, a search input to search for politicians, a slider to filter the time range in which the sidejobs were created in the dataset and a zoom. It provides several hover and click options to get information about politician names, relations between organizations and politicians, as well as specific sidejob descriptions. The website starts with a short text to introduce readers to the topic, which leads them to the visualization tool.

web_1.jpgweb_1.jpg
web_2.jpgweb_2.jpg
web_3.pngweb_3.png
web_4.pngweb_4.png
lesehilfe.pnglesehilfe.png

Conclusion

The biggest challenge in the process was to get the data in a structure that is usable for the visualization. As the API has several limits and is divided into multiple entities, it was very tricky to get all the data to fit suitably together. In order to implement different filtering options, the data had to be heavily nested. This challenge helped me a lot for my future handling of data with python. In the end, I am satisfied with the final draft, even if I would have liked to implement more elements like a storytelling approach, an overview over all sidejob organizations and politicians at once, a better legend and additional information about the side job organization. I think these elements would have given a more insightful product, but they failed due to a lack of coding skills and limited time.

2. Dear Data

The Dear Data project was our first project to get into working with relational data. It's related to a project by Stefanie Posavec and Giorgia Lupi.

DearData_Tim_Front.jpgDearData_Tim_Front.jpg
DearData_Tim_Back.jpgDearData_Tim_Back.jpg

Ein Projekt von

Fachgruppe

Interfacedesign

Art des Projekts

Studienarbeit im zweiten Studienabschnitt

Betreuung

foto: Mark-Jan Bludau

Zugehöriger Workspace

Advances in Data Visualization: Networks & Hierarchies

Entstehungszeitraum

Sommersemester 2022