Clickstream Analysis with Spark - Understanding Visitors in Real Time
D3
1. „d3.js“ zur Gestaltung von Performance Dashboards
Patrick Janning
„d3.js“
Einsatz des Visualisierungsframeworks
„d3.js“ zur Gestaltung interaktiver
Performance Dashboards
2. 1
„d3.js“ zur Gestaltung von Performance Dashboards
Patrick Janning
Gliederung
1. Performance Dashboards
2. Framework – d3.js
3. Livedemo
4. Schluss – Eignet sich das Framework zur Entwicklung?
5. Anhang
3. 2
„d3.js“ zur Gestaltung von Performance Dashboards
Patrick Janning
Performance Dashboards
„The power of focus“
Kennzahlen – im Fokus
Verdichtung von Daten zu einer quantitativ messbaren Form
Kennzahlen können verschiedene Merkmale haben
Geben Performance in Richtung eines bestimmten Ziels an
Bieten Bürofunktionalitäten
4. 3
„d3.js“ zur Gestaltung von Performance Dashboards
Patrick Janning
Performance Dashboards - Vorteile
Kommunikation der Strategie
Verfeinerung der Strategie
Erhöhung der Sichtbarkeit von Problemen
Verbesserung der Koordination
Darstellung eines konsistenten Blicks auf das Geschäft
Möglichkeit der Kostenreduzierung
Unterstützung und Stärkung von Mitarbeitern
Generierung prozessfähiger Informationen
5. 4
„d3.js“ zur Gestaltung von Performance Dashboards
Patrick Janning
Performance Dashboards - Typen
Monitoring Analyse Management
Zweck Daten sichtbar machen Bedingungen analysieren Kollaboration und
Koordination verbessern
Komponenten Bildschirme mit mehreren
Panels
Graphen
Symbole
Tabellen die übersichtlich
formatiert sind
Alarme und Hinweise
Analyse (Dimensional,
zeitlich, Segmentierung)
Vorhersagen Modellierung
Visuelle Analyse
Reporting
Anmerkungen ermöglichen
Threadgesteuerte
Diskussionen
Meetings
Strategiepläne
Arbeitsabläufe
Vgl. Eckerson (2006.2)
7. 6
„d3.js“ zur Gestaltung von Performance Dashboards
Patrick Janning
Performance Dashboards – Technische Architektur
Darstellungsschicht
Anwendungschicht
Integrationsschicht
Datenspeicherschicht
8. 7
„d3.js“ zur Gestaltung von Performance Dashboards
Patrick Janning
Performance Dashboard
Few (2006)
9. 8
„d3.js“ zur Gestaltung von Performance Dashboards
Patrick Janning
Performance Dashboards – Merkmale guter Dashboards
Gute grafische Darstellung
Skalierbarkeit der Diagramme
Verschiedene Panels
Analyseschicht
Architektur des Dashboards
Drill Down Funktionalität Analyseschicht
Nicht zu manuell Konfigurierbarkeit
Nicht zu spezifisch oder zu allgemein
Nicht zu bunt
Echtzeitveränderung möglich
Performance
10. 9
„d3.js“ zur Gestaltung von Performance Dashboards
Patrick Janning
„d3.js“ – Framework
Entstanden aus „ProtoVis“
Entwickelt von Mike Bostock während seiner Promotion
Stanford Visualization Group
Gedanke: „Tool um schneller gute Visualisierungen zu
erstellen schaffen“
Techniken
HTML
CSS
JavaScript
SVG
11. 10
„d3.js“ zur Gestaltung von Performance Dashboards
Patrick Janning
Einführung in d3.js
Manipulation des Document Object Model (DOM)
Erstellen von neuen Elementen
SVG, HTML
Zuordnung von Attributen von Elementen
Datenquellen: JavaScript Variablen, JSON, CSV, TSV,
HTML, XML
Verschiedene Funktionen für Interaktionen:
Animationen und Event-Listener
Weitere nützliche Funktionen (Datenskalierung,
automatische Skalenanpassung, Sortierfunktionen, …)
12. 11
„d3.js“ zur Gestaltung von Performance Dashboards
Patrick Janning
Data Joins in d3
Beschreiben
verschiedene Mengen
Animationen zum ein-
und ausblenden
Attribute für bestimmte
Mengen
Enter Exit
Data Nodes
Update
Bostock (2011)
14. 13
„d3.js“ zur Gestaltung von Performance Dashboards
Patrick Janning
Eignet sich d3.js zur Dashboardentwicklung?
Gutes Framework zur Visualisierung von Daten
Fertige Diagrammtypen mitgeliefert
Nützliche Zusatzfunktionen
Interaktivität und Echtzeitveränderung möglich
Drill Down gut darstellbar
Konfigurierbarkeit möglich, erfordert hohen Aufwand
Performance unter Umständen schlecht
Browserabhängigkeit
d3 ist geeignet
Je nach Dashboard aber hoher Aufwand nötig
15. 14
„d3.js“ zur Gestaltung von Performance Dashboards
Patrick Janning
Quellen
Bostock, M., Ogietvetsky, V., Heer, J. 2011. D3:Data
Driven Documents
http://www.computer.org/csdl/trans/tg/2011/12/ttg20111
22301-abs.html .20.12.2012
D3Noob 2012. “d3.js Tips and Tricks“
http://www.d3noob.org/.22.12.2012
Eckerson, W. W. 2006. „Performance Dashboards:
Measuring, Monitoring, and Managing Your Busines”
Eckerson, W. W. 2006.2. “Deploying Dashboards and
Scorecards“
Few, S. 2006. “Information Dashboard Design: The
Effective Visual Communication of Data”
16. 15
„d3.js“ zur Gestaltung von Performance Dashboards
Patrick Janning
ANHANG
D3.js zur Gestaltung interaktiver Performance Dashboards
17. 16
„d3.js“ zur Gestaltung von Performance Dashboards
Patrick Janning
Einfache Append Funktion
d3.select("body")
.append("h1")
.text("Hello World")
Fügt dem HTML Dokument im „body“-Bereich einen H1-
Bereich mit dem Inhalt „Hallo Welt“ hinzu.
18. 17
„d3.js“ zur Gestaltung von Performance Dashboards
Patrick Janning
Kreisbeispiel
Beispieldaten
var circles = [
{"x_axis":30,"y_axis":30,"radius":20,"color":"green"},
{"x_axis":70,"y_axis":70,"radius":10,"color":"purple"},
{"x_axis":110,"y_axis":100,"radius":30,"color" :"red"}
];
19. 18
„d3.js“ zur Gestaltung von Performance Dashboards
Patrick Janning
Kreisdemo
Erstellen eines SVG-Bereichs
var svgContainer = d3.select("body")
.append("svg")
.attr("width", 200)
.attr("height", 200);
Erstellen von Kreiselementen
var circles = svgContainer.selectAll("circle")
.data(circles)
.enter()
.append("circle");
20. 19
„d3.js“ zur Gestaltung von Performance Dashboards
Patrick Janning
Kreisdemo
var circleAttributes =
circles.attr("cx",function(d){return d.x_axis;})
.attr("cy",function(d){return d.y_axis;})
.attr("r",function(d){return d.radius;})
.style("fill", function(d){return d.color;})
.on("mouseover", function(){
d3.select(this).transition()
.attr("r",function (d){return
d.radius *1.1; })
.delay(0)
.duration(2000)
.ease("elastic",10,.4)
})
.on("mouseout", …