1. Ziel
Ziel der Aufgabe ist es, eine Single-Page-Website mit mindestens drei unterschiedlichen animierten Infografiken zu erstellen. Diese müssen selbst erstellt werden, Hilfe von sämtlichen Bibliotheken oder APIs ist erlaubt. Außerdem soll das Konzept und die Quellen als Unterseiten verlinkt sein. Das Thema der Seite ist selbst zu wählen, soll aber unter dem Oberbegriff Pandemie laufen.
2. Idee
Meine Idee ist den Vergleich der beiden Städte New York City und Berlin im, Hinblick auf den Corona Fallzahlen Verlauf, als jeweiligen Corona Hotspot für die USA und Deutschland zu ziehen. Ich vergleiche die Fallzahlen und setze es mit der Bevölkerungsdichte und der Bevölkerungsunterschiede in Hinblick auf die beiden Geschlechter in Verbindung. Die Idee kam durch meine Leidenschaft zu reisen zustande, da ich selbst schon mehrfach in New York City war, wollte ich in Frage stellen, warum die Fallzahlen dort so explosiv gestiegen sind und was der Grund dafür sein könnte.
3. Diagrammtypen
Ich habe mich für drei sehr verschiedene Diagrammtypen entschieden. Um die Fallzahlen der beiden Städte im Jahr 2020 zu beschrieben habe ich mich für ein Liniendiagramm entschieden. Ein Liniendiagramm wird oft verwendet, um den Anstieg oder Abstieg von Werten über mehrere Zeitabschnitte hinweg zu visualisieren. Dieser Diagrammtyp ist also gut geeignet, wenn man die Änderungen bei mehreren Werten über einen Zeitraum vergleichen möchte. Auf der X-Achse befinden sich dementsprechend die 12 Monate des Jahres und auf der Y-Achse die Fallzahlen in 200.000er Abständen.
Für den Vergleich der Gesamtbevölkerung und den Anteil an Männern und Frauen habe ich mich für ein horizontales Balkendiagramm entschieden. So können auf der Y-Achse die beiden Städte und auf der X-Achse die Bevölkerungszahl in zwei Millionen Schritten gezeigt werden. Für die Städte können dann jeweils ein Balken für den Anteil der Männer, Frauen und die Gesamtzahl der Bevölkerung gezeichnet werden. Man sieht also auf einen Blick und farbig voneinander getrennt den direkten Vergleich.
Als letztes Diagramm, habe ich mich für eine eher ungewöhnliche Diagrammart entschieden. Das Kartendiagramm. Dies ist aber die perfekte Lösung für meine Darstellung der Bevölkerungsverteilung pro Bezirk. Man sieht so in Farbabstufungen gekennzeichnet die Bevölkerungsdichte auf die einzelnen Bezirke aufgeteilt.
4. Gestaltung und Anordnung
Bei der Gestaltung habe ich mich recht schnell für eine Richtung entschieden. Die Seite sollte modern und aufgeräumt erscheinen und so einen optimalen und schnellen Überblick über die gezeigten Werte und Aussagen bewerkstelligen. Die Navigation am oberen Ende der Seite bleibt nicht stehen beim Scrollen, da ich sie als störend empfand und ablenken vom Inhalt der Seite. Die Aufmerksamkeit sollte den Diagrammen gehören und sollte nicht durch einen Balken am Kopf des Viewports weggezogen werden. Das ist auch der Grund, warum ich wenig graphische Begleitmittel auf der gesamten Seite genutzt habe. Die Diagramme sollten die gesamte Aufmerksamkeit bekommen und sind daher als einzige richtig farblich hervorgehoben. Auf die Navigation folgt ein Einleitungsbereich mit einem großflächigen Hero-Bild (Flaggen der beiden Städte) und der H1. Danach eine kurze textliche Einleitung und darauffolgend direkt die erste Grafik (Vergleich Fallzahlen 2020). Danach der Vergleich der Gesamtzahl der Bevölkerung und bezogen auf die Anteile der Geschlechter. Zuletzt kommen die beiden Kartendiagramme der Städte abschließend gefolgt von einem Fazit und dem Footer mit der Möglichkeit an den Anfang der Seite springen.
5. Farbgestaltung und Schriftauswahl
Die Farben sind die offiziellen Farben der Städte. Das Rot #E33525 für Berlin und das Blau #003884 für New York City. Begleitend sind die Schrift- und Footer-Farbe, ein dunkles Blau #001737 und ein Grau für neutrale Werte #99a2af.
Als Schriftart habe ich mich Roboto entschieden. Sie ist eine Schriftart aus der Gruppe der serifenlosen Linear-Antiqua mit klassizistischem Charakter. Daher eignet sie sich optimal für einen eher unauffällige Darstellung, um die Aufmerksamkeit auf die farblich hervorstechenden Diagramme zu lenken.
6. + 7. Animation und Technik
Für die Website an sich werden natürlich HTML und CSS benutzt. Außerdem benutze ich das CSS-Framework Bootstrap und die damit verbundenen Javascript Frameworks jQuery und Popper.js. Die Diagramme werden hauptsächlich über Javascript in Verbindung mit verschiedenen Javascript Bibliotheken und APIs umgesetzt. Bei den ersten beiden Diagrammen, dem Linien- und dem Balkendiagramm, benutze ich Google Charts. Den benutzten Code konnte ich mir ausschließlich aus der dafür vorhandenen Dokumentation aneignen. Die Buttons um Graphen ein- und auszublenden sind eine Mischung aus von Google Charts genutzten Javascript Funktionen und meinem eigenen Wissen über Javascript. Durch die Nutzung von der Google Charts API stammen die Animationen alle aus dieser und werden von mir nur mittels einzelner Einstellungen grafisch angepasst.
Bei den Kartendiagrammen benutze ich die Javascript API von Google Maps und beziehe geografische Daten mittels GeoJSON über mehrere APIs in die Karte, um so die Bezirksgrenzen der jeweiligen Städte darzustellen. Auch dafür habe ich die ausführliche Dokumentation von Google benutzt. Um die Darstellung ohne den Karten Hintergrund hinzubekommen, blende ich alle UI-Elemente von Google Maps und auch den eigentlich Karten Hintergrund. Die Hover-Effekte werden dynamisch über die API erstellt. Es werden per Hover über einen Bezirk die Bezirksnamen als Legende angezeigt. Dort sollte in meiner Idee ursprünglich eigentlich noch die Einwohnerzahl stehen, allerdings bin ich dort auf einige Umsetzungsschwierigkeiten gestoßen, die ich im folgenden Text kurz erklären möchte.
Die Daten, die benutzt werden, aus der GeoJSON, sind als sogenannte Features eingesetzt. Jedes Feature hat dementsprechende Eigenschaften (Properties), unter Anderem sind das meist Name, ID und eben auch ein Multipoligon, welche mit einer langen Liste an Koordinaten eingesetzt sind, die die geografischen Grenzen aufzeigen. Die jeweiligen Properties kann man so nun mittels der Google Maps API abrufen und benutzen. Das bedeutet, wenn in einer GeoJSON keine Daten zu den Einwohnerzahlen vorhanden sind, kann man sie nicht benutzen bzw. mit den geografischen Daten in Beziehung setzen. Ich habe online keine passende GeoJSON finden können, die beide Properties besaß. Also habe ich versucht diese selbst einzupflegen. Dies funktioniert auch und ich hätte sie theoretisch nutzen können. Allerdings kann man lokal vorhandene GeoJSONs zwar einbinden, dies funktioniert aber nur mittels einer sogenannten AJAX Funktion von jQuery. Auch die ist möglich einzubauen und hätte theoretisch funktioniert. Allerdings kann die AJAX Funktion nur Dateien von einer http oder https Seite anfragen. Dies ist also lokal nicht nutzbar, sondern nur von einem Webserver aus und somit für meine Website unbrauchbar, die ja nur lokal läuft. Nach langer Recherche kam ich leider zum Ergebnis, dass ich eine angepasste lokale GeoJSON nicht nutzen konnte und dementsprechend die dynamischen Daten der Einwohnerzahlen leider wegfallen müssen. Also kann ich nur die Bezirksnamen per Hover anzeigen lassen und auch die Einfärbung der Bezirke ist von mir vorgegeben, zwar mit passenden Daten, aber nicht dynamisch berechnet. Somit kann ich auch keine dynamische Legende anzeigen lassen, sondern musste eine von mir vorgefertigte SVG Grafik einbinden.
8. Reflektion des Arbeitsprozesses
Recherche:
Die Recherche Phase war recht leicht und schnell erledigt, da die Daten soweit sehr ausführlich vorhanden sind und genutzt werden konnten. Lediglich bei den benutzten GeoJSON Dateien musste ich im Hinblick auf die Umsetzung am Ende der Umsetzung noch einmal recherchieren und mich umentscheiden.
Layout:
Das Layout hat sich eigentlich fast von alleine gestaltet. Durch meine direkt von Anfang festgelegte Idee das Layout sehr leicht und nur „begleitend“ für die Diagramme zu gestalten. Sind die Abschnitte recht schnell entstanden und ich musste nur die Diagramme grafisch gestalten, welches mir durch die zwei Farbwerte der Städte recht leichtgefallen ist.
Umsetzung:
Die Umsetzung ist ebenfalls sehr leicht gewesen. Das HTML und CSS-Gerüst stand nach einer Doppelstunde fertig. Nur die dynamischen Javascript Diagramme haben etwas länger gedauert, da ich mich erst in die Funktionsweise und die Dokumentation einlesen musst. Dies hat mehrere Wochen gedauert, hat aber durch die gut geschriebene und ausführliche Dokumentation rückblickend sehr gut geklappt. Lediglich bei den Kartendiagrammen gab es Probleme, wie oben schon beschrieben. Das wäre vorher natürlich gut zu wissen gewesen, allerdings ist der normale Arbeitsverlauf ja nicht, dass etwas unbedingt lokal funktionieren muss, dementsprechend wäre die Umsetzung vermutlich bei einem „echten“ Auftrag für eine Website einfacher verlaufen.
Fazit:
Alles in allem bin ich mit dem Projektverlauf sehr zufrieden, ich habe sehr viel von meinem vorhandenen Wissen anwenden können, habe aber auch sehr viel gelernt in Bereichen, die mir für meinen weiteren Werdegang sehr helfen werden. Dynamische Diagramme mittels Javascript erstellen zu können ist eine sehr hilfreiche Fähigkeit und auch mit API-Schnittstellen habe ich bisher noch nicht gearbeitet.