Implementation
Das zentrale Feature in unserem Projekt war insbesondere die visuelle Darstellung des Flugverhaltens der EU- und EUW-Länder in Zusammenhang mit der COVID-19 Pandemie. Die visuelle Darstellung besteht aus drei separaten Bausteinen Diese Bausteine werden jeweils als individuelle Features implementiert:
-
Die Darstellung des Flugverhaltens während der COVID-19 Pandemie aller EU- und EUW-Länder
Das Flugverhalten der Länder soll durch ein Chord Diagramm visualisiert werden. Für eine erhöhte Übersichtlichkeit, sollte den einzelnen Ländern individuelle Farbtöne zugewiesen werden. Weitere Features wurde in Tasks erläutert. -
Die Darstellung der COVID-19 Fallzahlen in den jeweiligen Ländern
Für die Darstellung der COVID-19 Fallzahlen sollen Balkendiagramme um das Chord Diagramm platziert werden. Ein Balken entspricht hierbei einem Land. Zudem sollen horizontale Gitternetzlinien zur besseren Orientierung implementiert werden. -
Eine Timeline, die zur Navigation zwischen den Zeiträumen dient
Eine Timeline mit einem Range Slider stellt das letzte Must-Have Feature dar. Das Zeitintervall der Timeline spiegelt die Dauer der COVID-19 Pandemie wider und beinhaltet relevante Events während der Pandemie. Mit dem Slider sollen die Kalenderwochen interaktiv ausgewählt werden können, um so den das Chord-Diagramm des Flugverkehrs für einen bestimmten Zeitraum anzeigen lassen zu können.
Ein Onboarding ist für unseren Projektkontext sinnvoll aber optional. Das Onboarding kann potenziell dabei helfen, ein komplexes Chord Diagramm mit mehreren Elementen schneller und besser zu verstehen. Dies würde durch eine interaktive Anleitung, die den Betrachter:innen Schritt für Schritt durch alle implementierten Elemente leitet und erklärt, realisiert werden.
Quelle: Link
Ein weiteres optionales Feature ist die Anzeige eines Tooltips, wenn ein User über ein Land oder einen Balken hovert. Im Tooltip kann beispielsweise sowohl das Land, als auch die Infektionszahlen für den Zeitraum ausgeschrieben werden. Auch ist es sinnvoll, ein Land oder eine Flugverbindung über eine bestimmte Zeitperiode ausgewählt zu lassen. Damit gäbe es die Möglichkeit, sich die Fallzahlen für das ausgewählte Land über mehrere Wochen anzeigen zu lassen. In Anbetracht der begrenzten Zeit ist sollte der Scope des Projekts festgelegt werden und leider von komplexen Vorgängen abgesehen werden.
Unsere Visualisierung besteht aus insgesamt 3 D3 Grafiken: der Timeline, einem Chord Diagramm und einem Balkendiagramm. Für die Implementierung haben wir abgesehen vom D3-Framework vanilla Javascript und CSS verwendet.
Probleme in der Entwicklung hatten wir insbesondere mit D3 und der Implementierung eines komplexen Chord Diagramms. Zudem stellte die effiziente Aktualisierung der gesamten Grafik ein Hindernis dar, da bei jeder neuen Datumsauswahl die gesamte Grafik neu geladen werden muss. Ändert sich die Bildschirmgröße, wird auch die Timeline neu geladen, was ein Problem mit der Responsiveness darstellt.