„d3.js“ zur Gestaltung von Performance DashboardsPatrick Janning„d3.js“Einsatz des Visualisierungsframeworks„d3.js“ zur Ge...
1„d3.js“ zur Gestaltung von Performance DashboardsPatrick JanningGliederung1. Performance Dashboards2. Framework – d3.js3....
2„d3.js“ zur Gestaltung von Performance DashboardsPatrick JanningPerformance Dashboards„The power of focus“Kennzahlen – im...
3„d3.js“ zur Gestaltung von Performance DashboardsPatrick JanningPerformance Dashboards - VorteileKommunikation der Strate...
4„d3.js“ zur Gestaltung von Performance DashboardsPatrick JanningPerformance Dashboards - TypenMonitoring Analyse Manageme...
5„d3.js“ zur Gestaltung von Performance DashboardsPatrick JanningPerformance Dashboards - DatenarchitekturGrafisch abstrah...
6„d3.js“ zur Gestaltung von Performance DashboardsPatrick JanningPerformance Dashboards – Technische ArchitekturDarstellun...
7„d3.js“ zur Gestaltung von Performance DashboardsPatrick JanningPerformance DashboardFew (2006)
8„d3.js“ zur Gestaltung von Performance DashboardsPatrick JanningPerformance Dashboards – Merkmale guter DashboardsGute gr...
9„d3.js“ zur Gestaltung von Performance DashboardsPatrick Janning„d3.js“ – FrameworkEntstanden aus „ProtoVis“Entwickelt vo...
10„d3.js“ zur Gestaltung von Performance DashboardsPatrick JanningEinführung in d3.jsManipulation des Document Object Mode...
11„d3.js“ zur Gestaltung von Performance DashboardsPatrick JanningData Joins in d3Beschreibenverschiedene MengenAnimatione...
12„d3.js“ zur Gestaltung von Performance DashboardsPatrick JanningLivedemo – d3.jsLivedemo
13„d3.js“ zur Gestaltung von Performance DashboardsPatrick JanningEignet sich d3.js zur Dashboardentwicklung?Gutes Framewo...
14„d3.js“ zur Gestaltung von Performance DashboardsPatrick JanningQuellenBostock, M., Ogietvetsky, V., Heer, J. 2011. D3:D...
15„d3.js“ zur Gestaltung von Performance DashboardsPatrick JanningANHANGD3.js zur Gestaltung interaktiver Performance Dash...
16„d3.js“ zur Gestaltung von Performance DashboardsPatrick JanningEinfache Append Funktiond3.select("body").append("h1").t...
17„d3.js“ zur Gestaltung von Performance DashboardsPatrick JanningKreisbeispielBeispieldatenvar circles = [{"x_axis":30,"y...
18„d3.js“ zur Gestaltung von Performance DashboardsPatrick JanningKreisdemoErstellen eines SVG-Bereichsvar svgContainer = ...
19„d3.js“ zur Gestaltung von Performance DashboardsPatrick JanningKreisdemovar circleAttributes =circles.attr("cx",functio...
20„d3.js“ zur Gestaltung von Performance DashboardsPatrick JanningKreisdemo - ErgebnisErgebnis:
Nächste SlideShare
Wird geladen in …5
×

D3

368 Aufrufe

Veröffentlicht am

0 Kommentare
0 Gefällt mir
Statistik
Notizen
  • Als Erste(r) kommentieren

  • Gehören Sie zu den Ersten, denen das gefällt!

Keine Downloads
Aufrufe
Aufrufe insgesamt
368
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
4
Aktionen
Geteilt
0
Downloads
4
Kommentare
0
Gefällt mir
0
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie

D3

  1. 1. „d3.js“ zur Gestaltung von Performance DashboardsPatrick Janning„d3.js“Einsatz des Visualisierungsframeworks„d3.js“ zur Gestaltung interaktiverPerformance Dashboards
  2. 2. 1„d3.js“ zur Gestaltung von Performance DashboardsPatrick JanningGliederung1. Performance Dashboards2. Framework – d3.js3. Livedemo4. Schluss – Eignet sich das Framework zur Entwicklung?5. Anhang
  3. 3. 2„d3.js“ zur Gestaltung von Performance DashboardsPatrick JanningPerformance Dashboards„The power of focus“Kennzahlen – im FokusVerdichtung von Daten zu einer quantitativ messbaren FormKennzahlen können verschiedene Merkmale habenGeben Performance in Richtung eines bestimmten Ziels anBieten Bürofunktionalitäten
  4. 4. 3„d3.js“ zur Gestaltung von Performance DashboardsPatrick JanningPerformance Dashboards - VorteileKommunikation der StrategieVerfeinerung der StrategieErhöhung der Sichtbarkeit von ProblemenVerbesserung der KoordinationDarstellung eines konsistenten Blicks auf das GeschäftMöglichkeit der KostenreduzierungUnterstützung und Stärkung von MitarbeiternGenerierung prozessfähiger Informationen
  5. 5. 4„d3.js“ zur Gestaltung von Performance DashboardsPatrick JanningPerformance Dashboards - TypenMonitoring Analyse ManagementZweck Daten sichtbar machen Bedingungen analysieren Kollaboration undKoordination verbessernKomponenten Bildschirme mit mehrerenPanelsGraphenSymboleTabellen die übersichtlichformatiert sindAlarme und HinweiseAnalyse (Dimensional,zeitlich, Segmentierung)Vorhersagen ModellierungVisuelle AnalyseReportingAnmerkungen ermöglichenThreadgesteuerteDiskussionenMeetingsStrategiepläneArbeitsabläufeVgl. Eckerson (2006.2)
  6. 6. 5„d3.js“ zur Gestaltung von Performance DashboardsPatrick JanningPerformance Dashboards - DatenarchitekturGrafisch abstrahierte DatenGraphen, Symbole, TabellenDimensionale DatenDimensionen, Hierarchien, „Slice/Dice“Details, TransaktionsdatenData-Warehouse Queries, Operative BerichteMonitoringAnalyseAktivitätenVgl. Eckerson (2006.2)
  7. 7. 6„d3.js“ zur Gestaltung von Performance DashboardsPatrick JanningPerformance Dashboards – Technische ArchitekturDarstellungsschichtAnwendungschichtIntegrationsschichtDatenspeicherschicht
  8. 8. 7„d3.js“ zur Gestaltung von Performance DashboardsPatrick JanningPerformance DashboardFew (2006)
  9. 9. 8„d3.js“ zur Gestaltung von Performance DashboardsPatrick JanningPerformance Dashboards – Merkmale guter DashboardsGute grafische DarstellungSkalierbarkeit der DiagrammeVerschiedene PanelsAnalyseschichtArchitektur des DashboardsDrill Down Funktionalität  AnalyseschichtNicht zu manuell  KonfigurierbarkeitNicht zu spezifisch oder zu allgemeinNicht zu buntEchtzeitveränderung möglichPerformance
  10. 10. 9„d3.js“ zur Gestaltung von Performance DashboardsPatrick Janning„d3.js“ – FrameworkEntstanden aus „ProtoVis“Entwickelt von Mike Bostock während seiner PromotionStanford Visualization GroupGedanke: „Tool um schneller gute Visualisierungen zuerstellen schaffen“TechnikenHTMLCSSJavaScriptSVG
  11. 11. 10„d3.js“ zur Gestaltung von Performance DashboardsPatrick JanningEinführung in d3.jsManipulation des Document Object Model (DOM)Erstellen von neuen ElementenSVG, HTMLZuordnung von Attributen von ElementenDatenquellen: JavaScript Variablen, JSON, CSV, TSV,HTML, XMLVerschiedene Funktionen für Interaktionen:Animationen und Event-ListenerWeitere nützliche Funktionen (Datenskalierung,automatische Skalenanpassung, Sortierfunktionen, …)
  12. 12. 11„d3.js“ zur Gestaltung von Performance DashboardsPatrick JanningData Joins in d3Beschreibenverschiedene MengenAnimationen zum ein-und ausblendenAttribute für bestimmteMengenEnter ExitData NodesUpdateBostock (2011)
  13. 13. 12„d3.js“ zur Gestaltung von Performance DashboardsPatrick JanningLivedemo – d3.jsLivedemo
  14. 14. 13„d3.js“ zur Gestaltung von Performance DashboardsPatrick JanningEignet sich d3.js zur Dashboardentwicklung?Gutes Framework zur Visualisierung von DatenFertige Diagrammtypen mitgeliefertNützliche ZusatzfunktionenInteraktivität und Echtzeitveränderung möglichDrill Down gut darstellbarKonfigurierbarkeit möglich, erfordert hohen AufwandPerformance unter Umständen schlechtBrowserabhängigkeitd3 ist geeignetJe nach Dashboard aber hoher Aufwand nötig
  15. 15. 14„d3.js“ zur Gestaltung von Performance DashboardsPatrick JanningQuellenBostock, M., Ogietvetsky, V., Heer, J. 2011. D3:DataDriven Documentshttp://www.computer.org/csdl/trans/tg/2011/12/ttg2011122301-abs.html .20.12.2012D3Noob 2012. “d3.js Tips and Tricks“http://www.d3noob.org/.22.12.2012Eckerson, W. W. 2006. „Performance Dashboards:Measuring, Monitoring, and Managing Your Busines”Eckerson, W. W. 2006.2. “Deploying Dashboards andScorecards“Few, S. 2006. “Information Dashboard Design: TheEffective Visual Communication of Data”
  16. 16. 15„d3.js“ zur Gestaltung von Performance DashboardsPatrick JanningANHANGD3.js zur Gestaltung interaktiver Performance Dashboards
  17. 17. 16„d3.js“ zur Gestaltung von Performance DashboardsPatrick JanningEinfache Append Funktiond3.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. 18. 17„d3.js“ zur Gestaltung von Performance DashboardsPatrick JanningKreisbeispielBeispieldatenvar 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. 19. 18„d3.js“ zur Gestaltung von Performance DashboardsPatrick JanningKreisdemoErstellen eines SVG-Bereichsvar svgContainer = d3.select("body").append("svg").attr("width", 200).attr("height", 200);Erstellen von Kreiselementenvar circles = svgContainer.selectAll("circle").data(circles).enter().append("circle");
  20. 20. 19„d3.js“ zur Gestaltung von Performance DashboardsPatrick JanningKreisdemovar 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){returnd.radius *1.1; }).delay(0).duration(2000).ease("elastic",10,.4)}).on("mouseout", …
  21. 21. 20„d3.js“ zur Gestaltung von Performance DashboardsPatrick JanningKreisdemo - ErgebnisErgebnis:

×