Recomendados
Recomendados
Más contenido relacionado
Similar a D3
Similar a D3 (20)
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)
- 6. 5 „d3.js“ zur Gestaltung von Performance Dashboards Patrick Janning Performance Dashboards - Datenarchitektur Grafisch abstrahierte Daten Graphen, Symbole, Tabellen Dimensionale Daten Dimensionen, Hierarchien, „Slice/Dice“ Details, Transaktionsdaten Data-Warehouse Queries, Operative Berichte Monitoring Analyse Aktivitäten 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)
- 13. 12 „d3.js“ zur Gestaltung von Performance Dashboards Patrick Janning Livedemo – d3.js Livedemo
- 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", …
- 21. 20 „d3.js“ zur Gestaltung von Performance Dashboards Patrick Janning Kreisdemo - Ergebnis Ergebnis: