Sie sind auf Seite 1von 53

GrundlaGen der datenvisualisierunG

Grundlegende Prinzipien der visuellen Kommunikation von Daten

ReCampaign 2016 31. Oktober 2016

Jan-Erik Stange, Wissenschaftlicher Mitarbeiter Fachhochschule Potsdam | Urban Complexity Lab

Überblick

1

Was ist Datenvisualisierung?

2

Fallstricke und Best Practices

3

Weiterführendes Material

4

Demo

saser Safe and Secure European Routing

Was ist datenvisualisierunG?

Datenvisualisierung/Informationsvisualisierung

„Interaktive Sichtbarmachung komplexer Daten zur Unterstützung von Wahrnehmung und Erkenntnis“

nach Card et al. 1999

saser Safe and Secure European Routing

Datenvisualisierung/ Informationsvisualisierung

Komplexe Daten

Sichtbarmachung

Interaktivität

Unterstützung von Wahrnehmung und Erkenntnis

saser Safe and Secure European Routing

Komplexe Daten – Anscombe‘s Quartett

Komplexe Daten – Anscombe‘s Quartett saser Safe and Secure European Routing

saser Safe and Secure European Routing

Komplexe Daten – Anscombe‘s Quartett

Komplexe Daten – Anscombe‘s Quartett Anscombe 1973 saser Safe and Secure European Routing

Anscombe 1973

saser Safe and Secure European Routing

Komplexe Daten – Datenattribute

• Kategorisch/nominal: Deutschland, Frankreich, Italien

• Ordinal: sehr gut (1), gut (2), befriedigend (3),

• Quantitativ: Länge 1,5 m

Relational

Hierarchie: Michael und Silke sind Kinder von Maria

Netzwerk: Michael und Sarah sind befreundet

• Geographisch: 52.414138, 13.049843

• Temporal: 12.05.2016 10:06:31

Maria
Maria

Michael

Silke

Michael

Sarah

saser Safe and Secure European Routing

Sichtbarmachung – Bertins visuelle Variablen

Sichtbarmachung – Bertins visuelle Variablen Jacques Bertin 1983 saser Safe and Secure European Routing

Jacques Bertin 1983

saser Safe and Secure European Routing

Sichtbarmachung – Genauigkeit visueller Variablen

Sichtbarmachung – Genauigkeit visueller Variablen nach Mackinlay 1986 (von:

nach Mackinlay 1986 (von: http://www.joeparry.com/blog/uploaded_images/DesignGuidelines-707946.png)

saser Safe and Secure European Routing

Sichtbarmachung – Gestaltgesetze

Sichtbarmachung – Gestaltgesetze nach Wertheimer, Köhler, Koffka saser Safe and Secure European Routing

nach Wertheimer, Köhler, Koffka

saser Safe and Secure European Routing

Sichtbarmachung – Präattentive Wahrnehmung

Sichtbarmachung – Präattentive Wahrnehmung saser Safe and Secure European Routing

saser Safe and Secure European Routing

Sichtbarmachung – Präattentive Wahrnehmung

Sichtbarmachung – Präattentive Wahrnehmung saser Safe and Secure European Routing

saser Safe and Secure European Routing

Interaktivität

Was ist die Zielgruppe? Über wieviel Hintergrundwissen verfügen sie? Wieviel Zeit werden sie vermutlich bereit sein zu investieren? Was könnte eine angemessene visuelle Formensprache sein? Wie kann ich sie mit meinem Interface dazu motivieren, sich mit meinem Thema zu beschäftigen?

saser Safe and Secure European Routing

Interaktivität

Kommunikation

Exploration

Interaktivität Kommunikation Exploration Erkenntnisse vermitteln zu neuem Denken anregen zu Entscheidungen beitragen
Interaktivität Kommunikation Exploration Erkenntnisse vermitteln zu neuem Denken anregen zu Entscheidungen beitragen

Erkenntnisse vermitteln

zu neuem Denken anregen

zu Entscheidungen beitragen

„Lean Back“ – passiver Konsum

Individ. Fragestellungen nachgehen

Entdecken von Mustern

verdeckte Verbindungen aufzeigen

„Lean forward“ – active exploration

saser Safe and Secure European Routing

Interaktivität – Shneidermans Mantra

„Overview first, zoom & filter, then details-on-demand.“

Shneiderman 1996

saser Safe and Secure European Routing

Wahrnehmung und Erkenntnis unterstützen

Wahrnehmung und Erkenntnis unterstützen Close the Gap, 2015 – http://closethegap.studiometric.co/ saser Safe and

Close the Gap, 2015 – http://closethegap.studiometric.co/

saser Safe and Secure European Routing

Wahrnehmung und Erkenntnis unterstützen

Wahrnehmung und Erkenntnis unterstützen saser Safe and Secure European Routing OECD Better Life Index, 2012 –

saser Safe and Secure European Routing

OECD Better Life Index, 2012 – http://www.oecdbetterlifeindex.org/

Wahrnehmung und Erkenntnis unterstützen

Wahrnehmung und Erkenntnis unterstützen saser Safe and Secure European Routing Airbnb vs Berlin (von Studenten Alsino

saser Safe and Secure European Routing

Airbnb vs Berlin (von Studenten Alsino Skowronnek, Jonas Parnow und Lucas Vogel an der Fachhochschule Potsdam), 2015 – http://www.airbnbvsberlin.de/

Fallstricke und Best Practices

Fallstrick #1: 3D-Diagramme

Fallstrick #1: 3D-Diagramme

Fallstrick #1: 3D-Diagramme

Fallstrick #1: 3D-Diagramme Probleme Im Hintergrund liegende Bereiche werden durch davorliegende Elemente überdeckt

Probleme

Im Hintergrund liegende Bereiche werden durch davorliegende Elemente überdeckt

Proportionen werden durch die perspek- tivische Verzerrung falsch dargestellt

Abmessungen visueller Elemente (z.B. Säulen) sind nur mit Schwierigkeiten an den Skalen abzulesen.

Fallstrick #2: Skala bei Säulendiagrammen

100

90

80

70

60

50

Fallstrick #2: Skala bei Säulendiagrammen 100 90 80 70 60 50 A B C D E
Fallstrick #2: Skala bei Säulendiagrammen 100 90 80 70 60 50 A B C D E
Fallstrick #2: Skala bei Säulendiagrammen 100 90 80 70 60 50 A B C D E
Fallstrick #2: Skala bei Säulendiagrammen 100 90 80 70 60 50 A B C D E
Fallstrick #2: Skala bei Säulendiagrammen 100 90 80 70 60 50 A B C D E
Fallstrick #2: Skala bei Säulendiagrammen 100 90 80 70 60 50 A B C D E

A

B

C

D

E

Fallstrick #2: Skala bei Säulendiagrammen

100

90

80

70

60

50

40

30

20

10

0

#2: Skala bei Säulendiagrammen 100 90 80 70 60 50 40 30 20 10 0 A
#2: Skala bei Säulendiagrammen 100 90 80 70 60 50 40 30 20 10 0 A
#2: Skala bei Säulendiagrammen 100 90 80 70 60 50 40 30 20 10 0 A
#2: Skala bei Säulendiagrammen 100 90 80 70 60 50 40 30 20 10 0 A
#2: Skala bei Säulendiagrammen 100 90 80 70 60 50 40 30 20 10 0 A
#2: Skala bei Säulendiagrammen 100 90 80 70 60 50 40 30 20 10 0 A

A

B

C

D

E

Fallstrick #2: Skala bei Säulendiagrammen

Bei Säulendiagrammen die y-Achse immer bei 0 beginnen lassen!

Fallstrick #3: Kuchendiagramme

Fallstrick #3: Kuchendiagramme

Fallstrick #3: Kuchendiagramme

Fallstrick #3: Kuchendiagramme

Fallstrick #3: Kuchendiagramme

Probleme

Flächen ähnlicher Größe sind schwer miteinander zu vergleichen

Die einzelnen Teile eines Kuchendiagram- mes sollten bei Prozentangaben zusam- mengerechnet 100% ergeben

Fallstrick #4: Kreisradius für Darstellung von Werten

50

100

Fallstrick #4: Kreisradius für Darstellung von Werten

50

Fallstrick #4: Kreisradius für Darstellung von Werten 50 100

100

Fallstrick #4: Kreisradius für Darstellung von Werten 50 100

Fallstrick #4: Kreisradius für Darstellung von Werten

Fallstrick #4: Kreisradius für Darstellung von Werten
Fallstrick #4: Kreisradius für Darstellung von Werten

Fallstrick #4: Kreisradius für Darstellung von Werten

Immer die Fläche, nicht den Radius zur Darstellung quantitativer Werte nutzen!

A = ∏r 2

50 = ∏r 2

>

r = √(50/∏)

Best Practice #1: Direkte Beschriftung

Best Practice #1: Direkte Beschriftung

Best Practice #2: Farbe

Best Practice #2: Farbe Kategorische Werte (z.B. Parteizugehörigkeit) Quantitative oder ordinale Werte (z.B. Zahl von
Best Practice #2: Farbe Kategorische Werte (z.B. Parteizugehörigkeit) Quantitative oder ordinale Werte (z.B. Zahl von
Best Practice #2: Farbe Kategorische Werte (z.B. Parteizugehörigkeit) Quantitative oder ordinale Werte (z.B. Zahl von
Best Practice #2: Farbe Kategorische Werte (z.B. Parteizugehörigkeit) Quantitative oder ordinale Werte (z.B. Zahl von
Best Practice #2: Farbe Kategorische Werte (z.B. Parteizugehörigkeit) Quantitative oder ordinale Werte (z.B. Zahl von
Best Practice #2: Farbe Kategorische Werte (z.B. Parteizugehörigkeit) Quantitative oder ordinale Werte (z.B. Zahl von
Best Practice #2: Farbe Kategorische Werte (z.B. Parteizugehörigkeit) Quantitative oder ordinale Werte (z.B. Zahl von

Kategorische Werte (z.B. Parteizugehörigkeit)

#2: Farbe Kategorische Werte (z.B. Parteizugehörigkeit) Quantitative oder ordinale Werte (z.B. Zahl von
#2: Farbe Kategorische Werte (z.B. Parteizugehörigkeit) Quantitative oder ordinale Werte (z.B. Zahl von
#2: Farbe Kategorische Werte (z.B. Parteizugehörigkeit) Quantitative oder ordinale Werte (z.B. Zahl von
#2: Farbe Kategorische Werte (z.B. Parteizugehörigkeit) Quantitative oder ordinale Werte (z.B. Zahl von
#2: Farbe Kategorische Werte (z.B. Parteizugehörigkeit) Quantitative oder ordinale Werte (z.B. Zahl von
#2: Farbe Kategorische Werte (z.B. Parteizugehörigkeit) Quantitative oder ordinale Werte (z.B. Zahl von
#2: Farbe Kategorische Werte (z.B. Parteizugehörigkeit) Quantitative oder ordinale Werte (z.B. Zahl von
#2: Farbe Kategorische Werte (z.B. Parteizugehörigkeit) Quantitative oder ordinale Werte (z.B. Zahl von
#2: Farbe Kategorische Werte (z.B. Parteizugehörigkeit) Quantitative oder ordinale Werte (z.B. Zahl von
#2: Farbe Kategorische Werte (z.B. Parteizugehörigkeit) Quantitative oder ordinale Werte (z.B. Zahl von
#2: Farbe Kategorische Werte (z.B. Parteizugehörigkeit) Quantitative oder ordinale Werte (z.B. Zahl von
#2: Farbe Kategorische Werte (z.B. Parteizugehörigkeit) Quantitative oder ordinale Werte (z.B. Zahl von
#2: Farbe Kategorische Werte (z.B. Parteizugehörigkeit) Quantitative oder ordinale Werte (z.B. Zahl von
#2: Farbe Kategorische Werte (z.B. Parteizugehörigkeit) Quantitative oder ordinale Werte (z.B. Zahl von

Quantitative oder ordinale Werte (z.B. Zahl von Autobesitzern pro 100 Einwohner)

Divergierende quantitative oder ordinale Werte Werte (z.B. positive oder negative Abweichung einem Wert in Prozent)

Best Practice #2: Farbe

Möglichst nicht mehr als 7 verschiedene Farbwerte verwenden!

Gleiche Farbe für gleiche Attribute!

Best Practice #2: Farbe

Best Practice #2: Farbe http://colorbrewer2.org/

http://colorbrewer2.org/

Best Practice #3: Data-Ink Ratio

Data-ink ratio = Data-ink / Total ink used to print the graphic

Tufte (1983)

Best Practice #3: Data-Ink Ratio

Best Practice #3: Data-Ink Ratio

Best Practice #4: Small Multiples

Best Practice #4: Small Multiples

Best Practice #5: Informationsebenen hierarchisieren

Best Practice #5: Informationsebenen hierarchisieren Over the Decades, How States Have Shifted. Quelle: NY Times –

Over the Decades, How States Have Shifted. Quelle: NY Times – http://www.nytimes.com/interactive/2012/10/15/us/politics/swing-history.html?_r=0

Best Practice #6: Tuftes „Graphical Excellence“

Show the data

Encourage thinking about substance, not methodology, design, technology…

Avoid distorting the data

Present many numbers in a small space

Make large data sets coherent

Encourage visual comparisons

Reveal data at several levels of details

Serve a clear purpose: description, explanation, tabulation, decoration

Integrate closely with statistical and textual descriptions

WeiterFührendes Material

Auswahl von Quellen für Open Data

• Offizielles Portal (Relaunch 01/2016): https://www.govdata.de/

Bundeswahlleiter (Offizielle Daten zu Wahlergebnissen):

https://www.bundeswahlleiter.de/

Statistisches Bundesamt (Neben Dossiers v.a. Bereich “Datenbanken”

wichtig - unter “Zahlen & Fakten”): https://www.destatis.de

Weltbank (Vergleichende Datensätze, viele Indizes):

http://data.worldbank.org/

OECD (Daten über OECD-Länder, auch umfassender Datenbank-Zugriff):

https://data.oecd.org/

EU-Datenportal (Offiziell, sehr viele Datensätze von Eurostat):

http://data.europa.eu/euodp/en/data

Eurostat (Ermöglicht Vergleich von EU-Länderdaten, Datenauswahl

gewöhnungsbedürftig): http://ec.europa.eu/eurostat

Bücher

Visualize this The Functional Art Information Dashboard Design Nathan Yau Alberto Cairo Stephen Few
Visualize this The Functional Art Information Dashboard Design Nathan Yau Alberto Cairo Stephen Few
Visualize this The Functional Art Information Dashboard Design Nathan Yau Alberto Cairo Stephen Few

Visualize this

The Functional Art

Information Dashboard Design

Nathan Yau

Alberto Cairo

Stephen Few

Bücher

Bücher Design for Information Isabel Meirelles Visualization Analysis & Design Tamara Munzner

Design for Information Isabel Meirelles

Bücher Design for Information Isabel Meirelles Visualization Analysis & Design Tamara Munzner

Visualization Analysis & Design Tamara Munzner

Bücher – Edward Tufte

Bücher – Edward Tufte

Werkzeuge

Werkzeuge Ein Überblick über Werkzeuge im Bereich Datenvisualisierung. (nicht mehr ganz topaktuell)

Ein Überblick über Werkzeuge im Bereich Datenvisualisierung. (nicht mehr ganz topaktuell) http://selection.datavisualization.ch/

Blogs

Flowing Data

Blog über Datenvisualisierung mit vielen Tutorials (teil- weise kostenpflichtig). Link: http://flowingdata.com

Information Aesthetics

Sammlung inhaltlich und gestalterisch besonders innovativer Datenvisualisierungen Link: http://infosthetics.com

Visual Complexity

Sammlung komplexer Datenvisualisierungen Link: http://www.visualcomplexity.com

Linksammlung

https://goo.gl/aFa2pt

deMo Mit veGa-lite

Vega-Lite

Vega-Lite https://vega.github.io/vega-lite/

https://vega.github.io/vega-lite/

Demo mit Vega-Lite

Datensatz

Graphische Darstellung von Teilnehmerzahlen am Religions- und Weltanschauungsunterricht an Berliner Schulen

FraGen?

Jan-Erik Stange, FH Potsdam uclab.fh-potsdam.de stange@fh-potsdam.de @HerrStange