© Zühlke 2013

Sebastian Schmitt (sse@zuehlke.com)

Sebastian Schmitt

Datenvisualisierung: Durchblick im Datenrausch

2. Juli 2013Folie 1

Beispiel: Excel-Daten

• 365 Zufallsgenerierte Werte

• Struktur? Maximum?

Daten vs. Visualisierung

Datenvisualisierung: Durchblick im Datenrausch | Sebastian Schmitt (sse@zuehlke.com) © Zühlke 20132. Juli 2013 Folie 2

Informationsvisualisierungals Werkzeug

„The power of the unaided mind is highly overrated […] It is things that make us smart.” (Donald Norman, Usability-Spezialist)

Folie 32. Juli 2013Datenvisualisierung: Durchblick im Datenrausch | Sebastian Schmitt (sse@zuehlke.com) © Zühlke 2013

Information Visualization:„The use of computer-supported, interactive visual representations of abstract data to amplify cognition” (Card et al. 1998)

© Zühlke 2013Datenvisualisierung: Durchblick im Datenrausch | Sebastian Schmitt (sse@zuehlke.com)

Das visuelle System des Menschen arbeitet hochgradig parallelisiert und bietet die höchste Bandbreite zum kognitiven Zentrum des Gehirns

Visuelle Wahrnehmung

Colin Ware: Information Visualization: Perception for Design (Interactive Technologies)

2. Juli 2013 Folie 4

© Zühlke 2013Datenvisualisierung: Durchblick im Datenrausch | Sebastian Schmitt (sse@zuehlke.com)

Visuelle Suche

Aufgabe 1: Finde den Punkt

Aufgabe 2: Finde die 6

592058130823849285020482049773130482048592019375249302048570204857593026374501102947573292093233772881552 2. Juli 2013 Folie 5

© Zühlke 2013Datenvisualisierung: Durchblick im Datenrausch | Sebastian Schmitt (sse@zuehlke.com)

Gesetz der Nähe

Gesetz der Ähnlichkeit

Gestalt-Gesetze und Visual Design

2. Juli 2013 Folie 6

© Zühlke 2013Datenvisualisierung: Durchblick im Datenrausch | Sebastian Schmitt (sse@zuehlke.com)

Beispiel Stacked Bar-Chart

Gestalt-Gesetze und Visual Design

2. Juli 2013 Folie 7

Gra

fik:

htt

p:/

/d3

js.o

rg/

© Zühlke 2013Datenvisualisierung: Durchblick im Datenrausch | Sebastian Schmitt (sse@zuehlke.com)

Gesetz der Geschlossenheit

Gestalt-Gesetze und Visual Design

2. Juli 2013 Folie 8

© Zühlke 2013Datenvisualisierung: Durchblick im Datenrausch | Sebastian Schmitt (sse@zuehlke.com)

Beispiel Tree Map

Gestalt-Gesetze und Visual Design

Quelle: New York Times, BBC, Guardian & weitere Nachrichten-magazine

2. Juli 2013 Folie 9

© Zühlke 2013Datenvisualisierung: Durchblick im Datenrausch | Sebastian Schmitt (sse@zuehlke.com)

Gesetz der Verbundenen Elemente

Gestalt-Gesetze und Visual Design

2. Juli 2013 Folie 10

© Zühlke 2013Datenvisualisierung: Durchblick im Datenrausch | Sebastian Schmitt (sse@zuehlke.com)

Beispiel Parallele Koordinaten

Gestalt-Gesetze und Visual Design

2. Juli 2013 Folie 11

Gra

fik:

h

ttp

://w

ww

.zu

eh

lke.c

om

/up

load

s/tx

_zep

ub

licati

on

s/2

31

_cw

_in

form

ati

on

en

_gest

alt

_an

neh

men

_tb

u.p

df

Navigation und Interaktion

Folie 122. Juli 2013Datenvisualisierung: Durchblick im Datenrausch | Sebastian Schmitt (sse@zuehlke.com) © Zühlke 2013

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

Mantra der Informationsvisualisierung (Shneiderman et al. 1996)

© Zühlke 2013Datenvisualisierung: Durchblick im Datenrausch | Sebastian Schmitt (sse@zuehlke.com)

Navigation und Interaktion

• Overview & Detail

2. Juli 2013 Folie 13

Gra

fik:

htt

p:/

/d3

js.o

rg/

© Zühlke 2013Datenvisualisierung: Durchblick im Datenrausch | Sebastian Schmitt (sse@zuehlke.com)

Navigation und Interaktion

• Overview & Detail

• Interaktives Filtern

2. Juli 2013 Folie 14

Gra

fik:

h

ttp

://w

ww

.zu

eh

lke.c

om

/up

load

s/tx

_zep

ub

licati

on

s/2

31

_cw

_in

form

ati

on

en

_gest

alt

_an

neh

men

_tb

u.p

df

© Zühlke 2013Datenvisualisierung: Durchblick im Datenrausch | Sebastian Schmitt (sse@zuehlke.com)

Navigation und Interaktion

• Overview & Detail

• Interaktives Filtern

• Details-on-demand

2. Juli 2013 Folie 15

© Zühlke 2013Datenvisualisierung: Durchblick im Datenrausch | Sebastian Schmitt (sse@zuehlke.com)

Navigation und Interaktion

• Overview & Detail

• Interaktives Filtern

• Details-on-demand

2. Juli 2013 Folie 16

Fallstricke

Folie 172. Juli 2013Datenvisualisierung: Durchblick im Datenrausch | Sebastian Schmitt (sse@zuehlke.com) © Zühlke 2013

Fallstricke

Folie 182. Juli 2013Datenvisualisierung: Durchblick im Datenrausch | Sebastian Schmitt (sse@zuehlke.com) © Zühlke 2013

Design von Informationsvisualisierungen

Folie 192. Juli 2013Datenvisualisierung: Durchblick im Datenrausch | Sebastian Schmitt (sse@zuehlke.com) © Zühlke 2013

Die Gestaltung einer Informationsvisualisierung ist komplex!

Welche Ziele verfolgt die Visualisierung?

• Präsentation

• Hypothesentest

• Daten-Exploration

Weitere Design-Faktoren:– Art- u. Struktur der Daten, Zielgruppe der Visualisierung,

Konventionen innerhalb der Zieldomäne, Charakteristika des Darstellungsmediums, …

Design von Informationsvisualisierungen

Folie 202. Juli 2013Datenvisualisierung: Durchblick im Datenrausch | Sebastian Schmitt (sse@zuehlke.com) © Zühlke 2013

Herangehensweise: „User-Centered Design“

Visualisierungs / Interaktionstechn

ikenZunächst

Papier- später technische Prototypen

Evaluation mit Zielgruppe

Zielgruppe & Visualisierung

s-ziele verstehen

Nicht ok

ok

Möglichst kurze Zyklen

Vorteile Nachteile Beispiel-technologie

Grafikbibliotheken

• Größte Flexibilität

• Höchster Aufwand

UI Frameworks

• Integration mit UI

• Integration von Charting-Libs

• Hohes Maß an Eigenentwicklung notwendig

Generalisierte Visualisierungs-Libraries

• Unterstützung grundlegender Visualisierungs-aspekte

• Integration mit UI

Spezialisierte Visualisierungs-Libraries

• Wenig Aufwand für grafische Umsetzung

• Unflexibel• Nur eine

Visualisierungs-form

Web-API‘s

• Kein Programmier-aufwand

• Fertige Designs

• Nur Online• Nur eine

Visualisierungs-form Folie 212. Juli 2013Datenvisualisierung: Durchblick im Datenrausch | Sebastian Schmitt (sse@zuehlke.com) © Zühlke 2013

Flexib

ilitä

t /

Kom

ple

xit

ät

Technologien zur Informationsvisualisierung

Vorteile Nachteile Beispiel-technologie

Grafikbibliotheken

• Größte Flexibilität

• Höchster Aufwand

UI Frameworks

• Integration mit UI

• Integration von Charting-Libs

• Hohes Maß an Eigenentwicklung notwendig

Generalisierte Visualisierungs-Libraries

• Unterstützung grundlegender Visualisierungs-aspekte

• Integration mit UI

Spezialisierte Visualisierungs-Libraries

• Wenig Aufwand für grafische Umsetzung

• Unflexibel• Nur eine

Visualisierungs-form

Web-API‘s

• Kein Programmier-aufwand

• Fertige Designs

• Nur Online• Nur eine

Visualisierungs-form Folie 222. Juli 2013Datenvisualisierung: Durchblick im Datenrausch | Sebastian Schmitt (sse@zuehlke.com) © Zühlke 2013

Flexib

ilitä

t /

Kom

ple

xit

ät

Technologien zur Informationsvisualisierung

Vorteile Nachteile Beispiel-technologie

Grafikbibliotheken

• Größte Flexibilität

• Höchster Aufwand

UI Frameworks

• Integration mit UI

• Integration von Charting-Libs

• Hohes Maß an Eigenentwicklung notwendig

Generalisierte Visualisierungs-Libraries

• Unterstützung grundlegender Visualisierungs-aspekte

• Integration mit UI

Spezialisierte Visualisierungs-Libraries

• Wenig Aufwand für grafische Umsetzung

• Unflexibel• Nur eine

Visualisierungs-form

Web-API‘s

• Kein Programmier-aufwand

• Fertige Designs

• Nur Online• Nur eine

Visualisierungs-form Folie 232. Juli 2013Datenvisualisierung: Durchblick im Datenrausch | Sebastian Schmitt (sse@zuehlke.com) © Zühlke 2013

Flexib

ilitä

t /

Kom

ple

xit

ät

Technologien zur Informationsvisualisierung

Bild

qu

elle

: h

ttp

://c

art

od

b.c

om

\

Vorteile Nachteile Beispiel-technologie

Grafikbibliotheken

• Größte Flexibilität

• Höchster Aufwand

UI Frameworks

• Integration mit UI

• Integration von Charting-Libs

• Hohes Maß an Eigenentwicklung notwendig

Generalisierte Visualisierungs-Libraries

• Unterstützung grundlegender Visualisierungs-aspekte

• Integration mit UI

Spezialisierte Visualisierungs-Libraries

• Wenig Aufwand für grafische Umsetzung

• Unflexibel• Nur eine

Visualisierungs-form

Web-API‘s

• Kein Programmier-aufwand

• Fertige Designs

• Nur Online• Nur eine

Visualisierungs-form Folie 242. Juli 2013Datenvisualisierung: Durchblick im Datenrausch | Sebastian Schmitt (sse@zuehlke.com) © Zühlke 2013

Flexib

ilitä

t /

Kom

ple

xit

ät

Technologien zur Informationsvisualisierung

Vorteile Nachteile Beispiel-technologie

Grafikbibliotheken

• Größte Flexibilität

• Höchster Aufwand

UI Frameworks

• Integration mit UI

• Integration von Charting-Libs

• Hohes Maß an Eigenentwicklung notwendig

Generalisierte Visualisierungs-Libraries

• Unterstützung grundlegender Visualisierungs-aspekte

• Integration mit UI

Spezialisierte Visualisierungs-Libraries

• Wenig Aufwand für grafische Umsetzung

• Unflexibel• Nur eine

Visualisierungs-form

Web-API‘s

• Kein Programmier-aufwand

• Fertige Designs

• Nur Online• Nur eine

Visualisierungs-form Folie 252. Juli 2013Datenvisualisierung: Durchblick im Datenrausch | Sebastian Schmitt (sse@zuehlke.com) © Zühlke 2013

Flexib

ilitä

t /

Kom

ple

xit

ät

Technologien zur Informationsvisualisierung

Bild

qu

elle

: h

ttp

://s

igm

ajs

.org

\

Vorteile Nachteile Beispiel-technologie

Grafikbibliotheken

• Größte Flexibilität

• Höchster Aufwand

UI Frameworks

• Integration mit UI

• Integration von Charting-Libs

• Hohes Maß an Eigenentwicklung notwendig

Generalisierte Visualisierungs-Libraries

• Unterstützung grundlegender Visualisierungs-aspekte

• Integration mit UI

Spezialisierte Visualisierungs-Libraries

• Wenig Aufwand für grafische Umsetzung

• Unflexibel• Nur eine

Visualisierungs-form

Web-API‘s

• Kein Programmier-aufwand

• Fertige Designs

• Nur Online• Nur eine

Visualisierungs-form Folie 262. Juli 2013Datenvisualisierung: Durchblick im Datenrausch | Sebastian Schmitt (sse@zuehlke.com) © Zühlke 2013

Flexib

ilitä

t /

Kom

ple

xit

ät

Technologien zur Informationsvisualisierung

Vorteile Nachteile Beispiel-technologie

Grafikbibliotheken

• Größte Flexibilität

• Höchster Aufwand

UI Frameworks

• Integration mit UI

• Integration von Charting-Libs

• Hohes Maß an Eigenentwicklung notwendig

Generalisierte Visualisierungs-Libraries

• Unterstützung grundlegender Visualisierungs-aspekte

• Integration mit UI

Spezialisierte Visualisierungs-Libraries

• Wenig Aufwand für grafische Umsetzung

• Unflexibel• Nur eine

Visualisierungs-form

Web-API‘s

• Kein Programmier-aufwand

• Fertige Designs

• Nur Online• Nur eine

Visualisierungs-form Folie 272. Juli 2013Datenvisualisierung: Durchblick im Datenrausch | Sebastian Schmitt (sse@zuehlke.com) © Zühlke 2013

Flexib

ilitä

t /

Kom

ple

xit

ät

Technologien zur Informationsvisualisierung

Bild

qu

elle

: h

ttp

://d

3js

.org

\

Vorteile Nachteile Beispiel-technologie

Grafikbibliotheken

• Größte Flexibilität

• Höchster Aufwand

UI Frameworks

• Integration mit UI

• Integration von Charting-Libs

• Hohes Maß an Eigenentwicklung notwendig

Generalisierte Visualisierungs-Libraries

• Unterstützung grundlegender Visualisierungs-aspekte

• Integration mit UI

Spezialisierte Visualisierungs-Libraries

• Wenig Aufwand für grafische Umsetzung

• Unflexibel• Nur eine

Visualisierungs-form

Web-API‘s

• Kein Programmier-aufwand

• Fertige Designs

• Nur Online• Nur eine

Visualisierungs-form Folie 282. Juli 2013Datenvisualisierung: Durchblick im Datenrausch | Sebastian Schmitt (sse@zuehlke.com) © Zühlke 2013

Flexib

ilitä

t /

Kom

ple

xit

ät

Technologien zur Informationsvisualisierung

Vorteile Nachteile Beispiel-technologie

Grafikbibliotheken

• Größte Flexibilität

• Höchster Aufwand

UI Frameworks

• Integration mit UI

• Integration von Charting-Libs

• Hohes Maß an Eigenentwicklung notwendig

Generalisierte Visualisierungs-Libraries

• Unterstützung grundlegender Visualisierungs-aspekte

• Integration mit UI

Spezialisierte Visualisierungs-Libraries

• Wenig Aufwand für grafische Umsetzung

• Unflexibel• Nur eine

Visualisierungs-form

Web-API‘s

• Kein Programmier-aufwand

• Fertige Designs

• Nur Online• Nur eine

Visualisierungs-form Folie 292. Juli 2013Datenvisualisierung: Durchblick im Datenrausch | Sebastian Schmitt (sse@zuehlke.com) © Zühlke 2013

Flexib

ilitä

t /

Kom

ple

xit

ät

Technologien zur Informationsvisualisierung

Bild

qu

elle

:

htt

p:/

/ww

w.o

racl

e.c

om

/tech

netw

ork

/java/javafx

/sam

ple

s/in

dex.h

tml

Vorteile Nachteile Beispiel-technologie

Grafikbibliotheken

• Größte Flexibilität

• Höchster Aufwand

UI Frameworks

• Integration mit UI

• Integration von Charting-Libs

• Hohes Maß an Eigenentwicklung notwendig

Generalisierte Visualisierungs-Libraries

• Unterstützung grundlegender Visualisierungs-aspekte

• Integration mit UI

Spezialisierte Visualisierungs-Libraries

• Wenig Aufwand für grafische Umsetzung

• Unflexibel• Nur eine

Visualisierungs-form

Web-API‘s

• Kein Programmier-aufwand

• Fertige Designs

• Nur Online• Nur eine

Visualisierungs-form Folie 302. Juli 2013Datenvisualisierung: Durchblick im Datenrausch | Sebastian Schmitt (sse@zuehlke.com) © Zühlke 2013

Flexib

ilitä

t /

Kom

ple

xit

ät

Technologien zur Informationsvisualisierung

Vorteile Nachteile Beispiel-technologie

Grafikbibliotheken

• Größte Flexibilität

• Höchster Aufwand

UI Frameworks

• Integration mit UI

• Integration von Charting-Libs

• Hohes Maß an Eigenentwicklung notwendig

Generalisierte Visualisierungs-Libraries

• Unterstützung grundlegender Visualisierungs-aspekte

• Integration mit UI

Spezialisierte Visualisierungs-Libraries

• Wenig Aufwand für grafische Umsetzung

• Unflexibel• Nur eine

Visualisierungs-form

Web-API‘s

• Kein Programmier-aufwand

• Fertige Designs

• Nur Online• Nur eine

Visualisierungs-form Folie 312. Juli 2013Datenvisualisierung: Durchblick im Datenrausch | Sebastian Schmitt (sse@zuehlke.com) © Zühlke 2013

Flexib

ilitä

t /

Kom

ple

xit

ät

Technologien zur Informationsvisualisierung

Bild

qu

elle

:

htt

p:/

/peh

rhovey.

net/

blo

g/2

00

9/0

3/3

d-d

ata

-vis

ualiz

ati

on

-dew

ey-

cale

nd

ar/

© Zühlke 2013Datenvisualisierung: Durchblick im Datenrausch | Sebastian Schmitt (sse@zuehlke.com)

Zusammenfassung

Informationsvisualisierung ist ein hilfreiches Werkzeug zur Unterstützung kognitiver Prozesse.

Mindestens genauso wichtig wie die Darstellung, ist das Interaktionsdesign der Visualisierung.

Eine effektive Visualisierung muss individuell konzipiert werden.

2. Juli 2013 Folie 32

Sebastian Schmittsse@zuehlke.comhttp://xing.to/Schmitt-Sebastian