Aufgabenstellung.

Im Zuge des Kurses Programmiertes Entwerfen, bestand die Aufgabe darin einen Datensatz, welchen wir uns selbst aussuchen durften zu visualisieren.
Für den Datensatz verwendete ich mehrere Quellen wie die WHO, die Worldbank oder auch Kaggle um eine grobe Übersicht zu bereits existierenden Datensätze zu erhalten.

Der Datensatz “Winereviews 2017” stach mir dabei besonders ins Auge. Ich stellte mir, wie vermutlich auch schon so viele vor mir die Frage, ob es Weinsorten und Weinländer gibt, die prinzipiell besser abschneiden da oftmals werden die klassischen Weinländer wie Spanien, Portugal, Italien oder Frankreich von Normalkonsument:innen als hochwertig angesehen.

Mit meiner Datenvisualisierung will in den Nutzer:innen die tatsächlichen Daten präsentieren und durch intuitive, interaktive Bedienelemente die größtmögliche Freiheit in der Erkundung geben.

Die Visualisierung selbst ist hier zu finden.
(Auf 1920x1080px ausgelegt.)

Analoge Varianten.

Nach der Auswahl der Darstellungsparameter skizzierte ich verschiedene Varianten der Visualisierung.

Finale Visualisierung.
In der finalen Umsetzung setzte ich alle zuvor ausgearbeiteten Punkte und Designelemente um.

Filteroptionen Wein.
Nutzer:innen beginnen am oberen Teil des Bildschirms, der den Beschreibungstext enthält, der die unterstrichene Filteroption anzeigt. Über diese kann, wie in dem Bild zu sehen ist, gehovert werden, um andere Optionen auszuwählen. Wenn eine ausgewählt wird, ändert sich der nebenstehende Beschreibungstext, um Nutzer:innen zu erklären, wie die Werte zustande kommen.

Idle Animation.
Wenn Nutzer:innen den Bildschirm zwischenzeitlich verlassen, wechseln die Filteroptionen im oberen Segment nach 20 Sekunden alle 3 Sekunden eine andere Filteroption aus. Dies soll durch den visuellen Effekt neue Nutzer:innen anlocken.

Filteroptionen Länder.
Im unteren Bereich des Bildschirms befinden sich die Ländernamen sowie eine nebenstehende Filteroption, die es Benutzer:innen erlaubt, die Sortierung der Länder nach Parametern wie “Most Varieties” zu ändern.

Der ganze beschriebene Bereich ist statisch in der Seite verankert, sodass er sich bei einer Scrollbewegung nicht bewegt.

Im unteren Bereich der Visualisierung befinden sich die einzelnen Weinarten, die danach gefiltert wurden, ob sie in genug Ländern produziert werden. Außerdem sind hier die Punkte für die einzelnen Weinarten in den Ländern zu finden. Diese stellen durch ihre Sättigung den zu filternden Wert dar. Wird beispielsweise nach Preis gefiltert, ist ein 2000€ Wein in einem gesättigten Rot gefärbt, während ein 6€ Wein Grau ist.

Hover.
Wenn über einen der Punkte gehovert wird, erscheint eine Detailansicht mit einem schwarzen Hintergrund daneben.

Klick.
Wenn er angeklickt wird, erscheint die gleiche Ansicht auf der anderen Seite mit einem weißen Hintergrund. Dies soll bewirken, dass Nutzer:innen einen geklickten Punkt klar von einem gehoverten Punkt unterscheiden können.

Hovereffekt.
Wenn über einen Punkt gehovert wird, erscheint ebenfalls eine farbliche Hinterlegung ausgehend von der Weinart, die die Zeile in die Farbe des Weins taucht. Wenn ein Weißwein vorhanden ist, wird die Zeile mit einem hellen Gelb hinterlegt, während ein Rotwein rot hinterlegt wird. Bei Rosé ist der Hintergrund rosafarben.