Datenvisualisierung (BigData-Seminar)

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

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. 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. © 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. © 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. © 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. © 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. © 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. © 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. © 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. © 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. 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. © 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. © 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. © 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. © 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. Fallstricke Folie 172. Juli 2013Datenvisualisierung: Durchblick im Datenrausch | Sebastian Schmitt (sse@zuehlke.com) © Zühlke 2013

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

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. 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. 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

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

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

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

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

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. © 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. Sebastian Schmitt sse@zuehlke.com http://xing.to/Schmitt-Sebastian