Als Grundlage für unsere Webseite dienen Daten des statischen Amtes Zürich. Diese handeln einen umfassenden Teil demographischer Themen ab, weswegen wir in einem ersten Schritt entschieden haben uns auf das Wohn- und Bauwesen im Kanton Zürich zu fokussieren. Die Informationen, die für unsere Visualisierungen benötigen, waren anfangs in verschiedenen CSV-Dokumenten zerstreut. Um sie gemäss unseren Vorstellungen zu verwenden, haben wir die erforderlichen Daten herausgefiltert und in einem grösseren CSV-Dokument zusammengefasst. Zum Schluss haben wir dieses mithilfe eines Web-Tools in 174 Dokumenten aufgeteilt – ein Dokument für jede Gemeinde und für den gesamten Kanton Zürich.
Wir waren sehr bestrebt in unsere Web-App eine Landkarte des Kanton Zürichs zu implementieren. Trotz anfänglichen Schwierigkeiten ein geeignetes Shapefile zu finden und in unseren Code einzubinden, konnten wir unter anderem durch die Hilfe der Data-Coaches diese Aufgabe bewältigen. Wir haben zu den drei Sektoren Wohnsituation, Bautätigkeit und Transaktionen jeweils zwei Themen veranschaulicht. Wir haben uns für diese entschieden, weil es unseres Erachtens die aussagekräftigsten und interessantesten Daten sind. Um die Daten zu verbildlichen haben wir uns intensiv mit c3.js auseinandergesetzt, was sich als grosse Hilfe ausgewiesen hat. Darüber hinaus haben wir mit Bootstrap 4 versucht das Design der WebApp möglichst ästhetisch zu gestalten.
Auf der Startseite werden unter diesen Registern die Daten des gesamten Kantons Zürichs dargestellt. Durch JavaScript-Funktionen ist es für User möglich die jeweiligen(n) Gemeinde(n) auf der Karte abzulesen und anzuklicken. Die Graphen werden dabei automatisch angepasst.
Durch den "Vergleichen" Button können User die Daten einer ausgewählten Gemeinde speichern und weiter unten anzeigen lassen. Durch Anklicken einer anderen Gemeinde können so die Graphen gegenübergestellt werden.
Durch diesen Button werden die Daten des gesamten Kantons angezeigt.
Durch diesen Knopf werden weiteren Daten unseres Datensatzes visualisiert. Die Legendenitems können einzeln an- oder abgewählt werden.