Thema und Daten

Zu Beginn des Kurses erhielten wir eine Einführung in die Thematik und Prozesse von Citizen Science Projekten und bekamen Anreize in welcher Form Designer*innen in diesen Prozessen tätig werden können. Ich entschied mich dafür mein Kursprojekt im Bereich der Visualisierung von Forschungsdaten anzusiedeln. 

Auf meiner Recherche nach Themen für eine Datenvisualisierung, stieß ich auf einen frei zugänglichen Datensatz, welcher über 3000 Gedenktafeln und -zeichen in Berlin dokumentiert. Die Recherche der Daten basiert auf einer Kooperation zwischen der Gedenkstätte Deutscher Widerstand, dem Aktiven Museums e.V. und Holger Hübner. 

Gedenktafeln innerhalb einer Stadt geben zum einen Einblicke in die Stadtgeschichte, zum anderen spiegeln sie die Erinnerungskultur der Stadt wieder. Mein Ziel war es ein Gefühl für ebendiese Erinnerungskultur zu erforschen und mit einer Datenvisualisierung zugänglich zu vermitteln. 

Die Daten umfassen Ort, Titel, Beschreibung, Stichworte und weitere Eigenschaften zu jeder Tafel, wobei nicht für jede Tafel Informationen für alle Bereiche vorhanden sind. Da mich besonders interessierte an welche Personen die Tafeln erinnern, recherchierte ich Informationen zu Geschlechterverhältnis, Geburts- und Todesjahr. Dafür schrieb ich ein Script welches anhand der Titel nach Wikipediaeinträgen sucht und Informationen der Suchanfrage abspeichert. Da die Ergebnisse teils fehlerhaft waren, überprüfte ich sie zusätzlich manuell.

Design

Die Gestaltung der Haupt-Datenvisualisierung entstand durch mehrere Versuchsschritte mit der JavaScript Library D3 innerhalb von Observable. Mein Ziel war es alle Tafeln auf einen Blick abzubilden, damit Leser*innen in jedem Schritt der Data-Story die Grafik frei explorieren können. Dafür schien die Anordnung von Rechtecken in einem gleichmäßigen Grid am geeignetsten, zumal hierdurch auch die Form der Gedenktafeln stilistisch aufgegriffen wurde.

Die Gestaltungselemente Schrift und Farbe der Website sind von der Gestaltung der Gedenktafeln von Wieland Schütz abgeleitet, welche seit 1984 verwendet werden. Als Schrift für Fließtexte und Überschriften dient die Lora. Für kleinere Auszeichnungen und innerhalb von Grafiken wird die Roboto Mono verwendet. Die Gestaltung der Website entstand parallel in Figma und während dem Development der Seite.

Development

Für das Development wurde das JavaScript Framework React verwendet. Als Site Generator verwendete ich zunächst Gatsby. Nachdem die Hauptgrafik mithilfe von SVG Elementen jedoch sehr langsam wurde, entschied ich die Grafik mit Canvas umzusetzen. Da dies zu Problemen mit Gatsby führte, verwendete ich fortan stattdessen Create React App. Bei diesen Prozessen half mir Lucas als Dozent sehr weiter. Bei den übrigen Grafiken auf der Seite kam zusätzlich D3 zum Einsatz.

Hier findest du die aktuelle Seite.

Kursfazit

Der Kurs begann mit einer mehrwöchigen Einführung in JavaScript. Obwohl mir manche Sachen schon bekannt waren, half mir dieser Input sehr weiter, da die Sprache und auch die Funktionalität von Website von Grundauf erklärt wurden. Der zweite Kursteil bestand aus der Projektarbeit. Hier lernte ich besonders viel durch das Feedback von Lucas und Gespräche mit Kommiliton*innen über unsere Projekte. Gerade die gemeinsame Arbeit vor Ort und die kleine Kursgröße begünstigte diesen Lernprozess.

Durch den Kurs habe ich mehr Routine im Web-Development und eine allgemeine Vorstellung von den Möglichkeiten und Prozessen in Citizen-Science Projekten bekommen.