© Zühlke 2013
Sebastian Schmitt
(sse@zuehlke.com)
Sebastian Schmitt
Datenvisualisierung:
Durchblick im Datenrausch
2. Juli...
Beispiel: Excel-Daten
• 365 Zufallsgenerierte Werte
• Struktur? Maximum?
Daten vs. Visualisierung
Datenvisualisierung: Dur...
Informationsvisualisierung
als Werkzeug
„The power of the unaided mind is highly
overrated […] It is things that make us s...
© Zühlke 2013
Das visuelle System des Menschen arbeitet hochgradig parallelisiert und
bietet die höchste Bandbreite zum ko...
© Zühlke 2013
Visuelle Suche
Aufgabe 1: Finde den Punkt
Aufgabe 2: Finde die 6
Datenvisualisierung: Durchblick im Datenrau...
© Zühlke 2013
Gesetz der Nähe
Gesetz der Ähnlichkeit
Gestalt-Gesetze und Visual Design
Datenvisualisierung: Durchblick im ...
© Zühlke 2013
Beispiel Stacked Bar-Chart
Gestalt-Gesetze und Visual Design
Datenvisualisierung: Durchblick im Datenrausch ...
© Zühlke 2013
Gesetz der Geschlossenheit
Gestalt-Gesetze und Visual Design
Datenvisualisierung: Durchblick im Datenrausch ...
© Zühlke 2013
Beispiel Tree Map
Gestalt-Gesetze und Visual Design
Datenvisualisierung: Durchblick im Datenrausch | Sebasti...
© Zühlke 2013
Gesetz der Verbundenen Elemente
Gestalt-Gesetze und Visual Design
Datenvisualisierung: Durchblick im Datenra...
© Zühlke 2013
Beispiel Parallele Koordinaten
Gestalt-Gesetze und Visual Design
Datenvisualisierung: Durchblick im Datenrau...
Navigation und Interaktion
Folie 122. Juli 2013Datenvisualisierung: Durchblick im Datenrausch | Sebastian Schmitt (sse@zue...
© Zühlke 2013
Navigation und Interaktion
• Overview & Detail
Datenvisualisierung: Durchblick im Datenrausch | Sebastian Sc...
© Zühlke 2013
Navigation und Interaktion
• Overview & Detail
• Interaktives Filtern
Datenvisualisierung: Durchblick im Dat...
© Zühlke 2013
Navigation und Interaktion
• Overview & Detail
• Interaktives Filtern
• Details-on-demand
Datenvisualisierun...
© Zühlke 2013
Navigation und Interaktion
• Overview & Detail
• Interaktives Filtern
• Details-on-demand
Datenvisualisierun...
Fallstricke
Folie 172. Juli 2013Datenvisualisierung: Durchblick im Datenrausch | Sebastian Schmitt (sse@zuehlke.com) © Züh...
Fallstricke
Folie 182. Juli 2013Datenvisualisierung: Durchblick im Datenrausch | Sebastian Schmitt (sse@zuehlke.com) © Züh...
Design von Informationsvisualisierungen
Folie 192. Juli 2013Datenvisualisierung: Durchblick im Datenrausch | Sebastian Sch...
Design von Informationsvisualisierungen
Folie 202. Juli 2013Datenvisualisierung: Durchblick im Datenrausch | Sebastian Sch...
Vorteile Nachteile
Beispiel-
technologie
Grafikbibliotheken • Größte Flexibilität • Höchster Aufwand
UI Frameworks
• Integ...
Vorteile Nachteile
Beispiel-
technologie
Grafikbibliotheken • Größte Flexibilität • Höchster Aufwand
UI Frameworks
• Integ...
Vorteile Nachteile
Beispiel-
technologie
Grafikbibliotheken • Größte Flexibilität • Höchster Aufwand
UI Frameworks
• Integ...
Vorteile Nachteile
Beispiel-
technologie
Grafikbibliotheken • Größte Flexibilität • Höchster Aufwand
UI Frameworks
• Integ...
Vorteile Nachteile
Beispiel-
technologie
Grafikbibliotheken • Größte Flexibilität • Höchster Aufwand
UI Frameworks
• Integ...
Vorteile Nachteile
Beispiel-
technologie
Grafikbibliotheken • Größte Flexibilität • Höchster Aufwand
UI Frameworks
• Integ...
Vorteile Nachteile
Beispiel-
technologie
Grafikbibliotheken • Größte Flexibilität • Höchster Aufwand
UI Frameworks
• Integ...
Vorteile Nachteile
Beispiel-
technologie
Grafikbibliotheken • Größte Flexibilität • Höchster Aufwand
UI Frameworks
• Integ...
Vorteile Nachteile
Beispiel-
technologie
Grafikbibliotheken • Größte Flexibilität • Höchster Aufwand
UI Frameworks
• Integ...
Vorteile Nachteile
Beispiel-
technologie
Grafikbibliotheken • Größte Flexibilität • Höchster Aufwand
UI Frameworks
• Integ...
Vorteile Nachteile
Beispiel-
technologie
Grafikbibliotheken • Größte Flexibilität • Höchster Aufwand
UI Frameworks
• Integ...
© Zühlke 2013
Zusammenfassung
Informationsvisualisierung ist ein
hilfreiches Werkzeug zur Unterstützung
kognitiver Prozess...
Sebastian Schmitt
sse@zuehlke.com
http://xing.to/Schmitt-Sebastian
Nächste SlideShare
Wird geladen in …5
×

Datenvisualisierung (BigData-Seminar)

4.182 Aufrufe

Veröffentlicht am

Um aus großen Datenmengen die richtigen Erkenntnisse und
Schlüsse zu ziehen, müssen diese geeignet aufbereitet und
zugänglich gemacht werden. Anhand anschaulicher Beispiele
verdeutlichen wir die Facetten der Visualisierung, mit denen Sie
Ihre Informationen übersichtlich vermitteln.

Vortrag von Sebastian Schmitt beim Seminar "Willkommen im Datenrausch: Produkte vernetzen - mit Big Data und der Cloud neue Schätze heben.
http://zuehlke.com/seminar-bigdata

Veröffentlicht in: Technologie
  • Als Erste(r) kommentieren

Datenvisualisierung (BigData-Seminar)

  1. 1. © Zühlke 2013 Sebastian Schmitt (sse@zuehlke.com) Sebastian Schmitt Datenvisualisierung: Durchblick im Datenrausch 2. Juli 2013 Folie 1
  2. 2. 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
  3. 3. Informationsvisualisierung als 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)
  4. 4. © Zühlke 2013 Das visuelle System des Menschen arbeitet hochgradig parallelisiert und bietet die höchste Bandbreite zum kognitiven Zentrum des Gehirns Visuelle Wahrnehmung Datenvisualisierung: Durchblick im Datenrausch | Sebastian Schmitt (sse@zuehlke.com) Colin Ware: Information Visualization: Perception for Design (Interactive Technologies) 2. Juli 2013 Folie 4
  5. 5. © Zühlke 2013 Visuelle Suche Aufgabe 1: Finde den Punkt Aufgabe 2: Finde die 6 Datenvisualisierung: Durchblick im Datenrausch | Sebastian Schmitt (sse@zuehlke.com) 592058130823849 285020482049773 130482048592019 375249302048570 204857593026374 501102947573292 093233772881552 2. Juli 2013 Folie 5
  6. 6. © Zühlke 2013 Gesetz der Nähe Gesetz der Ähnlichkeit Gestalt-Gesetze und Visual Design Datenvisualisierung: Durchblick im Datenrausch | Sebastian Schmitt (sse@zuehlke.com) 2. Juli 2013 Folie 6
  7. 7. © Zühlke 2013 Beispiel Stacked Bar-Chart Gestalt-Gesetze und Visual Design Datenvisualisierung: Durchblick im Datenrausch | Sebastian Schmitt (sse@zuehlke.com) 2. Juli 2013 Folie 7 Grafik:http://d3js.org/
  8. 8. © Zühlke 2013 Gesetz der Geschlossenheit Gestalt-Gesetze und Visual Design Datenvisualisierung: Durchblick im Datenrausch | Sebastian Schmitt (sse@zuehlke.com) 2. Juli 2013 Folie 8
  9. 9. © Zühlke 2013 Beispiel Tree Map Gestalt-Gesetze und Visual Design Datenvisualisierung: Durchblick im Datenrausch | Sebastian Schmitt (sse@zuehlke.com) Quelle: New York Times, BBC, Guardian & weitere Nachrichten-magazine 2. Juli 2013 Folie 9
  10. 10. © Zühlke 2013 Gesetz der Verbundenen Elemente Gestalt-Gesetze und Visual Design Datenvisualisierung: Durchblick im Datenrausch | Sebastian Schmitt (sse@zuehlke.com) 2. Juli 2013 Folie 10
  11. 11. © Zühlke 2013 Beispiel Parallele Koordinaten Gestalt-Gesetze und Visual Design Datenvisualisierung: Durchblick im Datenrausch | Sebastian Schmitt (sse@zuehlke.com) 2. Juli 2013 Folie 11 Grafik:http://www.zuehlke.com/uploads/tx_zepublications/231_cw_informationen_gestalt_annehmen_tbu.pdf
  12. 12. 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)
  13. 13. © Zühlke 2013 Navigation und Interaktion • Overview & Detail Datenvisualisierung: Durchblick im Datenrausch | Sebastian Schmitt (sse@zuehlke.com) 2. Juli 2013 Folie 13 Grafik:http://d3js.org/
  14. 14. © Zühlke 2013 Navigation und Interaktion • Overview & Detail • Interaktives Filtern Datenvisualisierung: Durchblick im Datenrausch | Sebastian Schmitt (sse@zuehlke.com) 2. Juli 2013 Folie 14 Grafik:http://www.zuehlke.com/uploads/tx_zepublications/231_cw_informationen_gestalt_annehmen_tbu.pdf
  15. 15. © Zühlke 2013 Navigation und Interaktion • Overview & Detail • Interaktives Filtern • Details-on-demand Datenvisualisierung: Durchblick im Datenrausch | Sebastian Schmitt (sse@zuehlke.com) 2. Juli 2013 Folie 15
  16. 16. © Zühlke 2013 Navigation und Interaktion • Overview & Detail • Interaktives Filtern • Details-on-demand Datenvisualisierung: Durchblick im Datenrausch | Sebastian Schmitt (sse@zuehlke.com) 2. Juli 2013 Folie 16
  17. 17. Fallstricke Folie 172. Juli 2013Datenvisualisierung: Durchblick im Datenrausch | Sebastian Schmitt (sse@zuehlke.com) © Zühlke 2013
  18. 18. Fallstricke Folie 182. Juli 2013Datenvisualisierung: Durchblick im Datenrausch | Sebastian Schmitt (sse@zuehlke.com) © Zühlke 2013
  19. 19. 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, …
  20. 20. Design von Informationsvisualisierungen Folie 202. Juli 2013Datenvisualisierung: Durchblick im Datenrausch | Sebastian Schmitt (sse@zuehlke.com) © Zühlke 2013 Herangehensweise: „User-Centered Design“ Visualisierungs / Interaktionstechniken Zunächst Papier- später technische Prototypen Evaluation mit Zielgruppe Zielgruppe & Visualisierungs- ziele verstehen Nicht ok ok Möglichst kurze Zyklen
  21. 21. 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 Flexibilität/Komplexität Technologien zur Informationsvisualisierung
  22. 22. 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 Flexibilität/Komplexität Technologien zur Informationsvisualisierung
  23. 23. 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 Flexibilität/Komplexität Technologien zur Informationsvisualisierung Bildquelle:http://cartodb.com
  24. 24. 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 Flexibilität/Komplexität Technologien zur Informationsvisualisierung
  25. 25. 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 Flexibilität/Komplexität Technologien zur Informationsvisualisierung Bildquelle:http://sigmajs.org
  26. 26. 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 Flexibilität/Komplexität Technologien zur Informationsvisualisierung
  27. 27. 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 Flexibilität/Komplexität Technologien zur Informationsvisualisierung Bildquelle:http://d3js.org
  28. 28. 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 Flexibilität/Komplexität Technologien zur Informationsvisualisierung
  29. 29. 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 Flexibilität/Komplexität Technologien zur Informationsvisualisierung Bildquelle:http://www.oracle.com/technetwork/java/javafx/samples/index.html
  30. 30. 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 Flexibilität/Komplexität Technologien zur Informationsvisualisierung
  31. 31. 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 Flexibilität/Komplexität Technologien zur Informationsvisualisierung Bildquelle:http://pehrhovey.net/blog/2009/03/3d-data-visualization-dewey-calendar/
  32. 32. © Zühlke 2013 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. Datenvisualisierung: Durchblick im Datenrausch | Sebastian Schmitt (sse@zuehlke.com) 2. Juli 2013 Folie 32
  33. 33. Sebastian Schmitt sse@zuehlke.com http://xing.to/Schmitt-Sebastian

×