BanknotenVis

In der Zeit zwischen 1880 – 1950 gab es in Deutschland mehrere Währungswechsel. Aufgrund des 1. und 2. Weltkrieges und der damit zusammenhängenden Aufrüstung kam es schnell zu einer starken Entwertung des Geldes. Im Rahmen des Projekts wurden alle deutschen Banknoten aus dieser Zeit visualisiert. Es werden ca. 150 Banknoten anhand ihrer Kaufkraft im Vergleich zum Euro aus dem Jahre 2017 visualisiert. Die dafür notwendigen Daten wurden vom Münzkabinett der staatlichen Museen zu Berlin ausgelesen.

Einführung und Konzept

Einführung

Im Rahmen der Grundlagen der Datenvisualisierung (GDV) Vorlesung an der Hochschule Mannheim, gehalten von Herr Prof. Dr. Nagel, bestand im Sommersemester 2018 die Aufgabe darin, eine Visualisierung über kulturelle Sammlungen zu erstellen. Ziel war es, dem Nutzer einen sichtbaren und greifbaren Zugang zu solch einer Sammlung zu geben und dabei besondere Erkenntnisse hervorzuheben.

Wir entschieden uns für eine interaktive Visualisierung aller deutschen Banknoten aus dem Zeitraum von 1880 – 1950. Die dazu benötigten Daten erhielten wir vom Münzkabinett der staatlichen Museen zu Berlin.

Konzept

Die Grundidee war es, eine interaktive Visualisierung zu erstellen, in der alle Banknoten aus dem Zeitraum 1880 – 1950 in Form eines Streudiagramms anhand ihrer Kaufkraft im Vergleich zum Euro aus dem Jahr 2017 und ihres Erscheinungsjahres dargestellt sind. Dabei wurden Thumbnails jeder Banknote als Token für die Punkte in dem Diagramm verwendet, sodass man einen direkten visuellen Vergleich aller Banknoten erhält. Zusätzlich sollte durch eine Referenzlinie (1,- Euro in 2017) verdeutlicht werden, wie hoch bzw. niedrig die Kaufkraft der einzelnen Banknote war.

Hypothesen

• Die Kaufkraft des Geldes war vor dem 1. und 2. Weltkrieg höher im Vergleich zum Euro aus 2017
• Der 1. und 2. Weltkrieg waren für den Verlust der Kaufkraft verantwortlich
• Banknoten waren Ende des 19. / Anfang des 20. Jahrhunderts und während der Hyperinflation 1923 größer als spätere bzw. heutige Banknoten

Datenaufbereitung

Datenquelle: Staatliche Museen zu Berlin, Münzkabinett

Daten nicht scrapebar, da das Münzkabinett sehr viel AJAX verwendet und Scraper anhand des DOMs arbeiten. Lösung für dieses Problem war der Einsatz des End-to-End-Testframeworks cypress. Dieses hat sich die ID’s aller Scheine gesammelt indem es automatisch die Seite weitergeklickt hat und die Daten gesammelt hat. Die gesammelten ID’s wurden in fünf Dateien aufgeteilt und notiert. Dieser Vorgang dauerte ein paar Stunden.

Nachdem alle gewünschten ID’s verfügbar waren, konnten alle LIDO-XML Links generiert werden und per Skript heruntergeladen werden. Ein drittes Skript kombinierte und transformierte die Daten aller LIDO-XML Dateien in eine kompakte CSV-Datei, die direkt in unserem Programm verwendet wurde.

Daten

Alle von uns benutzten Datensätze wurden vom staatlichen Münzkabinett Berlin bezogen. Wir entschieden uns zu Beginn erst einmal alle Münzen und Banknoten zu holen, die es in Deutschland gab. Mit Hilfe eines selbstgeschriebenen Scrappers war es uns möglich die benötigten Informationen zu beziehen. Erst im Nachhinein fiel uns auf, dass das Münzkabinett die verschiedenen Daten zu jeder Münze bzw. Banknote selbst über eine API bezieht. Hätten wir dies von Anfang an gewusst, so hätten wir bei der Datensuche sehr viel Zeit gespart, da es ein sehr großer Aufwand war den Scraper zu schreiben.

Datenbereinigung

Nachdem wir uns entschieden hatten das Augenmerk nur auf die Banknoten zwischen den Jahren 1880 – 1950 zu setzen, begannen wir mit der Bearbeitung der Datensätze. Mittlerweile hatten wir von anfangs 9000 Datensätzen noch ca. 140 Datensätze übrig. Wir entschieden uns dafür unrelevante Daten wie zum Beispiel Münzstätte, Ausgabeort sowie die Literatur zu den Banknoten zu löschen, da diese Informationen für unsere Visualisierung nicht wichtig waren.

Im nächsten Schritt berechneten wir für jede Banknote den Pfennigwert und fügten diese Informationen den Datensätzen hinzu.

Danach fügten wir jeder Banknote den Wert hinzu, der zeigt, wie viel eine Mark im Vergleich zu einem Euro in Bezug auf die Kaufkraft heutzutage wert wäre. Die verschiedenen Werte bezüglich der Kaufkraft konnten wir aus einer Liste entnehmen, die von der Deutschen Bundesbank bereitgestellt wurde. Im Anschluss berechneten wir für jeden Geldschein den heutigen Wert. Des Weiteren entschieden wir uns dafür die Banknoten in Epochen einzuteilen.

Visualisierungsexperimente

Nachdem wir die Datensätze bereinigt hatten begannen wir mit ersten experimentellen Visualisierungen. Die Annahme war, dass die Banknoten in den Zeiten größer waren, in denen es der Wirtschaft besser ging. Vor allem im Jahr 1880 gingen wir davon aus, dass die Banknoten eher noch in Größe von Wertpapieren/Aktien waren. Des Weiteren stellten wir die Hypothese auf, dass die Banknoten während der Inflation (1922 – 1923) ebenfalls größer waren, da durch den großen Nominalwert eine „normale“ Banknotengröße nicht ausreichend war.

Wie man anhand der Visualisierung sehen kann, bestätigte sich diese Annahme nicht. Zwar waren die Banknoten früher ein bisschen größer als die heutigen Banknoten, jedoch nicht in dem Ausmaß, den wir erwartet hatten.

Prototyp und Ergebnisse

Visualisierung

Wir haben unsere Visualisierung relativ klar in drei Teile unterteilt. Wobei der Scatterplot (der Hauptteil unserer Visualisierung 2/3 des gesamten Platzes einnimmt und die Epochenauswahl bzw. der Zeitschieberegler und die Detailansicht sich jeweils das restliche Drittel auf der rechten Seite teilen.

Oben rechts beginnend haben wir eine Box in der man die Zeit mit einem Regler in Zeitbereiche teilen kann und zusätzlich noch einen Epochenfilter bei dem die jeweilige Epoche (Deutsches Kaiserreich, Weimarer Republik und Drittes Reich bis Ära Adenauer) direkt angeklickt werden kann.

Die Epochen haben wir alternativ zu dem Zeitschieberegler eingebaut um dem Nutzer einen intuitiveren Einstieg in Bezug auf den historischen Kontext zu bieten.
Bevor uns die Idee mit dem Einbau eines zeitlichen Filters kam, hatten wir eine Liste der Scheine mit den Nominalwerten gehabt. Dies war auch auf die Darstellung der Thumbnails zurückzuführen, aber dazu später mehr.

Direkt unter dem zeitlichen Filter befindet sich die Detailansicht eines einzelnen Scheins. Die Detailansicht bekommt man angezeigt, sobald man mit der Maus über ein Thumbnail im Scatterplot hovert. Die Bilder, die in der Detailansicht dann eingeblendet werden sind im JPEG- Format und haben durchschnittliche Abmessungen von ca. 2000 x 1200 Pixeln, sowie einer durchschnittlichen Größe von ca. 1,3 MB. Die für uns am wichtigsten zu scheinenden Informationen waren:

das Erscheinungsjahr, der heutige Banknotenwert, wie viel der Schein bezogen auf eine Mark in Euro wert ist sowie die Höhe und die Breite. Zu Anfang standen hier nur das Erscheinungsjahr, der heutige Banknotenwert und die Umrechnung auf eine Mark bezogen, in Klammern direkt hinter dem heutigen Banknotenwert. Dies empfanden wir im Nachhinein nicht sehr anschaulich und haben dementsprechend die Umrechnung, die auf eine Mark bezogen war, separat noch hinzugefügt sowie die Höhe und Breite des Scheins, da dies auch wichtige Informationen sind und der Umfang der zusätzlichen Informationen sich damit immer noch im Rahmen hält.

Der Hauptteil unserer Visualisierung ist der Scatterplot in dem die Scheine in einem Koordinatensystem eingetragen sind. Auf der x – Achse wird der zeitliche Verlauf von 1880 - 1955 linear abgebildet, auf der y – Achse ist die Kaufkraft in Euro pro Mark logarithmisch abgebildet. Die Auswahl einer logarithmischen Skala fand beinahe gezwungenermaßen statt, da aufgrund der Inflation eine lineare Skala nicht realisierbar wäre (hätte nicht auf das Bild gepasst) bzw. man hätte die lineare Skala mit Schnitten in der y – Achse darstellen müssen. Das hätte jedoch einen falschen Eindruck vermittelt in Bezug auf die Aussagekraft der Wertigkeit der Scheine, speziell in Zeiten der Inflation. Deshalb erschien eine logarithmische Skala für uns am sinnvollsten. Die rote 1 Euro – Referenzlinie soll dem Nutzer zum einen, einen schnellen Einstiegspunkt bzw. Orientierungspunkt bieten und zum anderen, besser verdeutlichen, dass es im Zeitraum von 1880 – 1917 auch zu einer Geldentwertung kam. Sprich: die Scheine waren mehr Wert.

Wie auch schon zu Beginn des Projekts geplant war, haben wir die Scheine als Thumbnails dargestellt, da wir uns von einer Visualisierung inspirieren lassen haben, in der die Münzen als Thumbnails dargestellt wurden. Diese Idee fanden wir sehr gut und haben jene deshalb direkt übernommen. „good artists copy, great artists steal“ :P ). Die Thumbnails sind ebenfalls im JPEG – Format und haben durchschnittliche Abmessungen von 120 x 75 Pixeln und eine durchschnittliche Größe von ca. 10 kB.

Bei der Gestaltung unseres ersten Prototyps haben wir die Thumbnails einfach an der jeweiligen Position gelassen, sodass gerade zu Beginn der Inflation, in der viele neue Scheine dazu kamen, sich viele Scheine überlappt haben und nur sehr schwer anzuklicken waren. Wie oben schon angeführt war unsere Zwischenlösung zum Anwählen der Scheine eine Liste mit den Nominalwerten, da uns aber noch die Idee mit dem Epochenfilter kam, haben wir uns bei der Darstellung der Thumbnails für eine andere Variante entschieden. Zuerst stand ein Gridlayout zur Diskussion. Hier war das Hauptproblem aber, dass durch das Loslösen der Scheine von der Achse, diese zu stark verschoben wurden und damit zu weit weg von ihrer ursprünglichen Position waren.

Dann kam uns die Idee die jeweiligen Scheine des Jahres in Listenform anzuzeigen und zusätzlich die im Koordinatensystem entstehenden Punkte mit einer Linie zu verbinden um den Werteverlauf der Scheine zu demonstrieren, welches ja eines unserer Hauptaugenmerke war. (Hypothese: Die Kaufkraft des Geldes war vor dem 1. und 2. Weltkrieg höher im Vergleich zum Euro aus 2017). Deshalb haben wir uns letztendlich für diese Variante entschieden. Zusätzlich haben wir noch eine Zoom-Funktion eingebaut um einzelne Teilbereiche besser explorieren zu können.

Erkenntnisse

1. Kaufkraft des Geldes bis 1913 sehr viel höher im Vergleich zum Euro aus 2017
2. Starker Anstieg der Inflation ab 1913 bis hin zur Hyperinflation 1923, davor relativ gleichbleibende Kaufkraft des Geldes
3. Größe der Banknoten im Laufe der Zeit relativ gleichbleibend. Ausreißer ohne bestimmten zeitlichen Bezug Daten nach der Inflation sind unvollständig, da das Münzkabinett nicht alle Münzen und Scheine besitzt

Implementierung

Zur Verwaltung aller Abhängigkeiten wie z.B. D3.js wurde der Paketmanager “npm” von node.js verwendet. Als Programmiersprache wurde Typescript verwendet. Das ist eine Sprache, in der Javascript gültig ist und zu Javascript übersetzt wird. Sie bietet jedoch im Gegensatz zu Javascript ein Typsystem. Jede Javascript-Bibliothek ist mit Typescript kompatibel. Webpack ist ein Tool, welches Entwickler dabei unterstützt, alle Ressourcen, Abhängigkeiten und Skripte in ein simples Paket zu bündeln. Es kümmert sich dabei um die Auflösung aller Abhängigkeiten, Einbindung aller Ressourcen, Minifizierung des Codes, Erstellen der Sourcemaps, u.v.m.

Zur Kommunikation unter den einzelnen Visualisierungskomponenten wurde das Observer-Pattern verwendet, damit die Komponenten unabhängig von den anderen bleiben. Dieses Pattern lässt sich sehr einfach mit Hilfe von rxjs umsetzen. Webpack erlaubt es sehr einfach diverse “Loader” für bestimmte Sprachen zu definieren. Das erlaubte uns ohne Aufwand SASS anstatt CSS zu verwenden. Neben der möglichkeit Variablen zu verwenden, bietet SASS eine einfache Möglichkeit den Style-Code durch Verschachtelung lesbar zu halten.

Services

Der Data Service hält den aktuellen Datenbestand, sowie die ausgewählten Elemente. Er bietet auch Methoden zum selektieren, updaten und filtern der Elemente. Der CSV Service kümmert sich um das Einlesen der CSV-Daten und um die Transformation in das Datenformat unseres Programms.

Visualisierungskomponenten

Der Epochenfilter ist ein Rangeslider, mit dem sich ein Zeitraum wählen lässt. Er bietet auch vorausgewählte Epochen als Buttons an. Er kommuniziert den aktuellen Filter an den Data Service. Da HTML standardmäßig keinen Rangeslider (zwei Begrenzungen) bietet, haben wir das Node Paket “noUiSlider” verwendet.

Die Details-Komponente beobachtet (mit rxjs) das aktuell markierte Element des Data Services. Falls eines vorhanden ist, zeigt es die Details dazu an. Die Listen-Komponente kam in der endgültigen Version nicht zum Einsatz. Sie beobachtet den aktuellen Datenbestand und zeigt ihn an.

Das Scatter-Diagram besteht aus vielen kleinen Komponenten. Jedes Element wie Achse, Referenzlinie, Gruppe oder Banknote ist als eigene Klasse abgebildet. Diese Komponenten können so ihr Verhalten isoliert selbst bestimmen. Die Hauptkomponente (coin-scatter.ts) hat die Aufgabe die Daten korrekt nach Jahr und Kaufkraft zu gruppieren, als auch die Subkomponenten zu orchestrieren. Nach außen bietet sie außerdem Methoden zum Markieren von Elementen und zum Zurücksetzen des Zooms. Änderungen des Datenbestandes oder des markierten Elements werden dem Data Service entnommen.

Fazit

Es wäre sinnvoll gewesen mehr Zeit in Konzept und Idee investieren, da die Ergebnisse vorhersehbar waren und im Sinne der Aufgabe eher trivial. In Zukunft könnte man an der Performance und Münzintegration arbeiten.