Bei Datengrafiken geht es darum, interessante Zusammenhänge in größeren Datenmengen sichtbar zu machen. In diesem Projekt durften keine alphanumerischen Zeichen (Text, Zahlen) oder bildhafte Elemente verwendet werden. Umso wichtiger wird die gezielte Verwendung von Farbe, Form, Position, Animation und Interaktion, um die Information zu kodieren und zu strukturieren.
Dieses Projekt wird begleitet vom Fach Programmiersprachen 2 (Dozent: Fabian Rauch). Die Studierenden sollten die interaktive Datengrafik so komplett und funktionsfähig wie möglich mit Web-Technologien, insbesondere Javascript, umsetzen.
Bei dieser interaktiven Datenvisualisierung handelt es sich um eine Visualisierung der Airbnb Wohnungen in New York. In einem Datensatz dazu, wurden die Daten zu 48.896 Zeilen gesammelt.
1. Screen: Anzahl und Lage der gesamten Airbnb’s
Der Start-Screen ist zugleich auch die erste Informationsebene. Hier wird die Anzahl der Airbnb’s in Relation zu der Position verglichen. Dabei werden Unterkünfte zusammengefasst und in einer Heatmap dargestellt und die Anzahl mit der Deckkraft angegeben. Somit sind Ballungsräume besser erkennbar. Ab hier kann man mit der Maus zwischen den nächsten beiden Informationsebenen. Hierzu kann diese über den Bildschirm bewegt werden, während angezeigt wird, welcher Bereich des Bildschirms welchen Screen aufruft. Klickt man beispielsweise eine Schaltfläche weiter rechts, also in die Mitte, so wird der nächste Screen ausgewählt.
2. Screen: Scatter Plot (Preis - Reviews)
Der zweite Screen verfolgt dasselbe Prinzip der Anzahlsanzeige, jedoch nun in einem Scatter Plot indem die Relation zwischen Aufrufen pro Monat (X-Achse) und dem Preis pro Nacht (Y-Achse) dargestellt wird. So kann man erkennen, welche Preissegmente beliebter und welche weniger beliebt sind. Von hier aus hat man erneut die Möglichkeit per Mausklick in die anderen drei Screens zu schalten. Klickt man ganz rechts, können erneut drei verschiedene Ansichten aufgerufen werden.
In dem letzten Screen hat man die Möglichkeit zwischen den drei Unterkunftstypen zu wechseln. Hierzu sind innerhalb der großen Schaltfläche, erneut 3 übereinander liegende. Die oberste steht für ganze Wohnungen, die Mittlere für Private Zimmer und die Unterste für ein geteiltes Zimmer. Dadurch kann man besser erkennen, wo in New York welche Art von Unterkunft überwiegt, was erneut mit der Deckkraft angegeben wird. Außerdem ist durch eine Farbskala von grün (niedriger Preis) bis Rot (niedriger Preis) der Durchschnittspreis an dieser Stelle zu erkennen.
