SlideShare ist ein Scribd-Unternehmen logo
1 von 46
Downloaden Sie, um offline zu lesen
Dr. Steffen Tomschke | B-S-S | 15.09.2016
Graph-Gestaltung mit d3js im IoT-Umfeld
Dr. Steffen Tomschke | B-S-S | 15.09.2016
Dr. Steffen Tomschke | B-S-S | 15.09.2016
• Über die B-S-S
• Use Case
• Grundlagen
• Enterprise Search / Information Architecture
• IoT
• Graphvisualisierung und -exploration
• Umsetzung mit d3js
• Allgemein d3js
• Graphvisualisierung
• Gestaltung von Graphen mit d3js
• Interaktion
• Kombination mit anderen Visualisierungen
• Zusammenfassung „IoT + Graph + d3js“
Agenda
Dr. Steffen Tomschke | B-S-S | 15.09.2016
B-S-S Business Software Solutions GmbH
Dr. Steffen Tomschke | B-S-S | 15.09.2016
Allgemein
• IT Dienstleistungs- und Produktunternehmen
• Gegründet 1999
• 45 Mitarbeiter
• Consulting, Entwicklung und Support
• Standorte in Eisenach und Dresden
• Unsere Expertise ist:
• Enterprise Search
• Daten Analyse
• Information Management
• Cloud Technologie
• Google und Microsoft Gold Partner sowie Experten für
Azure, SharePoint und O365
Fokus-Bereiche
• Erkenntnisgewinnung aus Unternehmensdaten
• Transfer von relevanten Informationen in Business Prozesse
• onPremise und Cloud Services
• Enterprise Search
• Information Architecture
• BigData
• IoT
Über die B-S-S
Dr. Steffen Tomschke | B-S-S | 15.09.2016
Über die B-S-S
Enterprise Search
• Unternehmensweit Aufbereitung von Daten
• Crawling, Indexing, Metadata-Management, Ranking
• Heterogene Systemlandschaft vorhanden
• Ziel: Darstellung der aufbereiteten Daten in einem Portal
Information Architecture
• Analyse der Geschäftsprozesse
• Gestaltung der Informationen entsprechend der Analyse
• Abstraktion von Informationen
• Informationsarchitektur
• Navigationskonzept
• Taxonomie-Erstellung
• Metadaten-Management
• Wissensverknüpfung
• Unabhängige Beratung
Enterprise Suche
• Suchoptimierung
• Integration verteilter
Enterprise Content
Quellen
• Content Processing
• Aufbau suchbasierter
Data Hubs
• Self Service BI mittels
Power Pivot & Power BI
• Umsetzung Big Data
Analytics und
Recommendation Engines
• Dynamische Sites &
Personalisierte Apps und
Dashboards
• Suchbasiertes Cross Site
Publishing
• Hybrid /Cloud Lösungen
Dr. Steffen Tomschke | B-S-S | 15.09.2016
Über die B-S-S
Nahtlose Kommunikation und Information für alle Mitarbeiter
Digitale Beratung
Erklärung komplexer Produkte
mittels aktueller digitaler
Medien aus einer zentralen
Plattform
Digitale Auftragserfassung
Digitale Dokumentation der
Kundenwünsche und sofortige
Verfügbarkeit der Daten im
Büro.
Digitale Koordination mit
Partnern und
Subdienstleistern
Digitale Kundenakte
Vor-Ort Zugriff auf aktuelle
Planungen
Dokumentation von Mängeln
und Änderungen
Datenaustausch mit anderen
Gewerken
Digitaler Service
Einfache und schnelle
Terminvereinbarung
Zugriff auf benötigtes Wissen
beim Kunden Vor-Ort
Videokommunikation mit
helfenden Kollegen
Beratung Verkauf ServiceAusführung
Dr. Steffen Tomschke | B-S-S | 15.09.2016
Use Case
Dr. Steffen Tomschke | B-S-S | 15.09.2016
Use Case
Enterprise Search & Information Architecture für einen Pharmakonzern mit über 100.000 Mitarbeitern
Ziel: stets an jedem Ort die passende Information für jeden Mitarbeiter bereitstellen
- Aufbereitung von Informationen für alle Mitarbeiter
- Mitarbeiter muss gezielt und schnell an Informationen kommen
- Mitarbeiter ist mobil (innerhalb Gebäude, innerhalb Gelände)
- Verschiedene Typen von MA (Office, Researcher, Chem. Worker, Management, …)
- Vernetzte Systeme und Maschinen (IoT)
- Identifikation von involvierten Systemen
- Nutzung von Informationen (persönlich, Standort, Tagesablauf, ...)
- Kombination von Informationen zur Darstellung der aktuellen Situation (Graph)
- Geräteunabhängig Nutzung (Browser, d3js)
- B-S-S: „personalisierte(r) Informations Architektur/Assistent“
Dr. Steffen Tomschke | B-S-S | 15.09.2016
Use Case
Worker
Management
Researcher
Chemical
MachinesChemical
MachinesChemical
MachinesChemical
Machines
Data Backend
(IoT)
Frontend
(Graph Vis.)
Personalisierung
& Information
Arch.
Dr. Steffen Tomschke | B-S-S | 15.09.2016
Use Case
Anforderungen: „Enterprise Search & Information Architecture für einen Pharmakonzern mit über 100.000 Mitarbeitern“
- IoT
- Informationen nach Standort / Zeit / persönlichen Vorzügen anzeigen
- Zugriff auf verschiedene Datenquellen
- Graph/Visualisierung
- Relevante Informationen
- Reduktion von komplexen Informationsmengen (Repräsentanten)
- Interaktions-/Explorationsmöglichkeiten
- Enterprise Search / Information Architecture
- Zielsystem
- auf verschiedenen Endgeräten (mobil wie auch stationär)
Dr. Steffen Tomschke | B-S-S | 15.09.2016
Grundlagen
Dr. Steffen Tomschke | B-S-S | 15.09.2016
Enterprise Search & Information Architecture
Enterprise Search
- Teilgebiet des Information Retrieval
- Vollständige Indexierung der Unternehmensdaten
- Nutzung von Crawlern und APIs
- Aufbereitung der/mit Metadaten
- Verknüpfung der Daten über Metadaten
- Einbeziehen von persönlichen Informatione des Nutzers
- Nutzerprofile (Ort, Termine, Aufgaben, Projekte, ..)
- Aufbereiten der Daten für kommende Aufgaben
- Freie Suche (Exploration) nach beliebigen Daten
ermöglichen
Information Architecture
- Analyse der Daten/Dokumente innerhalb des
Unternehmens
- Gestaltung einer gebrauchstauglichen Struktur
- Teilautomatisiert, basierend auf den Metadaten
- Enge Kooperation mit Fachbereichen / Zielgruppen
- Bestimmung von Interaktionsmöglichkeiten
- Schnittstellen
- Zugriffsrechte
- Steuerung der Exploration
Dr. Steffen Tomschke | B-S-S | 15.09.2016
Internet of Things
IoT am Beispiel Pharmaindustrie
- Allgemein
- Unterstützung des Nutzers in der Erfassung der
Informationen die durch ihn und seine Umgebung
erzeugt werden
- Pharmaindustrie
- Zugriff und Kombination der Information über alle
Prozesse und Systeme sowie beteiligte Personen
- Nachhaltiges Verständnis über zusammenhängende
Systeme (Informationen)
- Erstellen von Beziehungen zwischen einzelnen
Dingen
- Visuelle Aufbereitung (Graph)
Umgebun
g
Nutzer
Systeme
Informationen
generieren & nutzen
Dr. Steffen Tomschke | B-S-S | 15.09.2016
Exploration komplexer Daten
- Nutzer exploriert Daten/Informationen durch „Suche“ in
einem Kontext
- Je nach Tiefe der Exploration entstehen verschiedene
„Levels of Detail“ (LoD)
- Verlust des Bezugs der Position im Kontext gilt als
„Lost-in-Context“
Explorationsprozess in Graphen (Tomschke 2014)
Dr. Steffen Tomschke | B-S-S | 15.09.2016
Exploration komplexer Daten
Kognitives Konzept während der Exploration
- Verortung von Objekten mittels quantitativen
Werten (semantische und numerische)
- Kombination von einzelnen Objekten
- Anreicherung zu einer mentalen Karte
- Erweiterung des Aufmerksamkeitsfokus
Änderung des Aufmerksamkeitsfokus (Tomschke 2014)
Dr. Steffen Tomschke | B-S-S | 15.09.2016
Graphvisualisierung
Was ist Graphvisualisierung?
- Komplexe Netzwerke / Daten (größer 1000 Objekte) mittels Graphen visualisieren
- Visuelle Darstellung von Objekten und deren Beziehungen sowie einer Teilmenge an Attributen
- Überblick über Wertigkeit von Graphobjekten
- Vereinigt verschiedene Domänen
- Interaktion durch graphenbasierte Exploration
- Manipulation im Graph direkt sichtbar
- Gestaltgesetze nutzen für zusätzliche Informationen
- Erleichterte Interpretation der Daten durch visuelle Darstellung
- Form, Farbe, Position, etc.
- Schnelle Erfassung von Zusammenhängen im Netzwerk
Dr. Steffen Tomschke | B-S-S | 15.09.2016
- Graphexploration
- Kontext und Detail (Perer et al. 2006)
- Aufgaben (z.B. Lokalisieren, Clustern, Ordnen)
- Gestaltpsychologie
- Gestaltgesetze (Wertheimer 1922, 1924)
- Szenen- und Objektwahrnehmung (Greene et al. 2009; Thrope et al. 1996)
- Graphästhetik (Eades 1984; Ferrari et al 1969; Trickery 1988)
- Erhöhte Lesbarkeit von Graphen (Holton und van Wijk 2009)
- Reduktion von visuellen Störmustern
- Visuelle Kognition (Kosslyn 1994)
- Zusammenspiel von visuellem Puffer und Arbeitsgedächtnis
- Ortsgedächtnis und mentale Karten
Gestaltgesetze (nach Wertheimer 1922, 1924) (Tomschke 2014)
Edge Bundling (Holton und van Wijk 2009, S. 989)
Grundlagen zur graphenbasierten Exploration
Dr. Steffen Tomschke | B-S-S | 15.09.2016
SocialAction (Perer et al. 2006, S.693)
PowerGraphs (Royer et al. 2008, S.3)Graph mit Fisheye View
(Sarkar et al. 1993, S.86)
Kantenerhaltendes Clustern (Wills 1998, S. 412)
Edge Bundling (Holton und van Wijk 2009, S. 989)
Aktuelle Explorationssysteme
Dr. Steffen Tomschke | B-S-S | 15.09.2016
Graphvisualisierung
Alternativen
- KPIs
- Zahlen welche in Form von Diagrammen oder an
Stati gekoppelt dargestellt werden
- Dashboards
- Übersicht über Systeme
- Meist abhängige oder korrelierende Daten
- Zusammenfassung in Form von Diagrammen und
KPIs https://www.apicasystem.com/wp-content/uploads/2015/04/apica-panel1.png
PowerBI Dashbord – Azure (Microsoft)
Dr. Steffen Tomschke | B-S-S | 15.09.2016
Graphvisualisierung
Komplexe Graphen und deren Visualisierung
Edge Bundling (Holton und van Wijk 2009, S. 989)Protein Interaktion (http://physiolgenomics.physiology.org/content/44/19/915)
Störmuster bei komplexen Graphen
Dr. Steffen Tomschke | B-S-S | 15.09.2016
Strukturmittel
- Beschränkte Kapazität in der Wahrnehmung erfordert Mittel zur Reduktion
- Komplexe Graphen haben eine große Informationsmenge
- Entstehung eines „Lost-in-Context“-Effekts
- Abstraktion einer großer Informationsmenge
- Informationsmenge wird durch ein einzelnes Objekt repräsentiert, einem Chunk (Abstraktion / Repräsentant)
- Verwendung von Detailstufen - „Level-of-Detail“
- Entstehung verschiedener Sichten und „Levels-of-Detail“ in der Darstellung
- Folge der Bildung von „Levels-of-Detail“
- Entstehung verschiedener, gleichzeitiger Detailstufen (globales Strukturmittel)
- Einfluss von Gestaltgesetzen und Graphästhetik (lokale Strukturmittel)
Dr. Steffen Tomschke | B-S-S | 15.09.2016
Globales Strukturmittel
- „Multi-Level-of-Detail“-Konzept
- Mehrere, verschiedene und gleichzeitig
abgebildete Detailstufen
- Chunks durch Einfluss der Gestaltgesetze
- Reduktion der Menge an explizit
wahrnehmbar Information
- Lokale Strukturmittel haben weiteren
Einfluss in der Wahrnehmung der „Levels-
of-Detail“
Abbildung der Chunks im Graph mittels „Multi-Level-of-Detail“-Konzept(Tomschke 2014)
Dr. Steffen Tomschke | B-S-S | 15.09.2016
Lokale Strukturmittel
- Basieren auf Gestaltgesetzen
- Bildsprache
- Muster durch Knotenanordnung
- Muster durch Kantenform
- Ähnlichkeiten von Kanten und Knoten
- Semantik von Kantenbiegung
- Perspektivität
- Bildung von Gruppen durch ähnliche
Attribute
- Gruppierung als Perspektivität in Ebenen
Semantische Wirkung von Kantenformen/-biegungen (Tomschke 2014)
Dr. Steffen Tomschke | B-S-S | 15.09.2016
Lokale Strukturmittel
- Perspektivität
- Einzelne oder gemeinsame Perspektive
- Filtern der Objekten (eingeschränkte
Perspektive)
- Bildung von Ebenen (Cluster, Werten,
LoDs)
- Gestaltgesetze
- Ähnlichkeit in Wert, Form, Größe
- Nähe von Graphobjekten
- Verbundene Elemente, z.B.
Vernetzungsgrad eines (Sub-)Graphen
- Semantik
- Pooling als Aggregation
- Gruppierung / Isolation
- Kantenbiegungen und -muster
Einfluss der Verzerrung als Perspektivität auf den Graphen (Tomschke 2014)
Bildung von Mustern durch Knotenanordnung (Tomschke 2014)
Dr. Steffen Tomschke | B-S-S | 15.09.2016
d3js
Vorteile von d3js (4.x)
- Schnell Ergebnisse sichtbar
- Modulare und vielseitige Bibliothek
- Verschiedene Diagramme und Graphen
- Interaktion mit der Visualisierung möglich
- Transitionen / Animationen möglich (http://bl.ocks.org/mbostock/1256572)
- Web (SVG und DOM) basiert mit JavaScript
- Anbindung verschiedener Datenquellen (insb. Zahlenwerte) einfach
Nachteile „von d3js“
- Komplexe/aufwendige API
- Ab ca. 1000 Objekten langsam
d3js.org (d3js2016)
Dr. Steffen Tomschke | B-S-S | 15.09.2016
Zwischenfazit
Was haben wir gelernt um jetzt mit d3js zu starten
- IoT erzeugt große Menge an Informationen
- Enterprise Search und Information Architecture als Mittel zur Strukturierung
- Wahrnehmung / Exploration / Suche in den Informationen
- Graphvisualisierung und individuelle Exploration
- d3js als Technologie für Graphvisualisierung
Dr. Steffen Tomschke | B-S-S | 15.09.2016
Umsetzung
Dr. Steffen Tomschke | B-S-S | 15.09.2016
Einfaches Beispiel mit d3js
Allgemein d3js:
- d3js arbeitet deklarativ
- Verwendet Knoten “selections”
Alle Elemente eines Typs selektieren und Farbe ändern:
var paragraphs = document.getElementsByTagName("p");
for (var i = 0; i < paragraphs.length; i++) {
var paragraph = paragraphs.item(i);
paragraph.style.setProperty("color", "white", null);
}
Oder, mit d3js:
d3.selectAll(“p”).style(“color”, “white”);
Dynamisch:
d3.selectAll("p").style("color", function() {
return "hsl(" + Math.random() * 360 + ",100%,50%)";
});
Dr. Steffen Tomschke | B-S-S | 15.09.2016
Einfaches Beispiel mit d3js
Enter und Exit
- Neue Daten einfügen / entfernen
d3.select("body")
.selectAll("p")
.data([4, 8, 15, 16, 23, 42])
.enter().append("p")
.text(function(d) { return "I’m number " + d + "!"; });
Transitionen
- Hintegrundfarbe in Schwarz überblenden
d3.select("body").transition()
.style("background-color", "black");
Dr. Steffen Tomschke | B-S-S | 15.09.2016
Graph mit d3js
Grundlagen
- d3js laden
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.1/d3.min.js"></script>
- d3 Objekt für SVG (DOM-Element selektiert)
var vis = d3.select("#graph“).append("svg");
- Objekte mit Daten platzieren (Knoten und Kanten)
var nodes = [{x: 30, y: 50}, {x: 50, y: 80}, {x: 90, y: 120}]
vis.selectAll("circle .nodes")
.data(nodes)
.enter()
.append("svg:circle")
.attr("class", "nodes")
.attr("cx", function(d) { return d.x; })
.attr("cy", function(d) { return d.y; })
.attr("r", "10px”)
.attr("fill", "black")
var links = [{source: nodes[0], target: nodes[1]}]
vis.selectAll(“.line”).data(links).enter().append(“line”). … .style(“stroke”, “rgb(6,120,155)”);
Dr. Steffen Tomschke | B-S-S | 15.09.2016
Einfacher Graph mit d3js
Beispiel
var svg = d3.select("svg"),
width = +svg.attr("width"),
height = +svg.attr("height");
var color = d3.scaleOrdinal(d3.schemeCategory20);
var simulation = d3.forceSimulation()
.force("link", d3.forceLink().id(function(d) { return d.id; }))
.force("charge", d3.forceManyBody())
.force("center", d3.forceCenter(width / 2, height / 2));
d3.json("miserables.json", function(error, graph) {
…
function ticked() {
link
.attr("x1", function(d) { return d.source.x; })
.attr("y1", function(d) { return d.source.y; })
.attr("x2", function(d) { return d.target.x; })
.attr("y2", function(d) { return d.target.y; });
node
.attr("cx", function(d) { return d.x; })
.attr("cy", function(d) { return d.y; });
}
}
d3js.org (d3js2016)
Dr. Steffen Tomschke | B-S-S | 15.09.2016
Gestaltung des Graph mit d3js
Form
- Alle Knoten selektieren
- Zuweisen einer entsprechenden (vordefinierten) Form
setInterval(function(){
// Add a new random shape.
nodes.push({
type: d3.svg.symbolTypes[~~(Math.random() * d3.svg.symbolTypes.length)],
size: Math.random() * 300 + 100
});
d3js.org (d3js2016)
Dr. Steffen Tomschke | B-S-S | 15.09.2016
Gestaltung des Graph mit d3js
Farbe
- Alle Knoten selektieren
- Zuweisen einer entsprechenden (vordefinierten) Farbe
var color = d3.scaleOrdinal(d3.schemeCategory20);
var node = svg.append("g")
.attr("class", "nodes")
.selectAll("circle")
.data(graph.nodes)
.enter().append("circle")
.attr("r", 5)
.attr("fill", function(d) { return color(d.group); })
.call(d3.drag()
.on("start", dragstarted)
.on("drag", dragged)
.on("end", dragended));
d3js.org (d3js2016)
Dr. Steffen Tomschke | B-S-S | 15.09.2016
Gestaltung des Graph mit d3js
Label
- Alle Knoten selektieren
- Zuweisen eines Labels / Text
node.append("text")
.attr("dx", 12)
.attr("dy", ".35em")
.text(function(d) { return d.name });
https://bl.ocks.org/mbostock/950642
Dr. Steffen Tomschke | B-S-S | 15.09.2016
Komplexer Graph mit d3js
Beispiel
- Analog zum einfachen Graph
- Höhere Anzahl an Knoten und Kanten
var svg = d3.select("svg"),
width = +svg.attr("width"),
height = +svg.attr("height");
var color = d3.scaleOrdinal(d3.schemeCategory20);
var simulation = d3.forceSimulation()
.force("link", d3.forceLink().id(function(d) { return d.id; }))
.force("charge", d3.forceManyBody())
.force("center", d3.forceCenter(width / 2, height / 2));
d3.json("miserables.json", function(error, graph) {
…
function ticked() {
link
.attr("x1", function(d) { return d.source.x; })
.attr("y1", function(d) { return d.source.y; })
.attr("x2", function(d) { return d.target.x; })
.attr("y2", function(d) { return d.target.y; });
node
.attr("cx", function(d) { return d.x; })
.attr("cy", function(d) { return d.y; });
}
Graph Beispiel aus (Tomschke 2014)
Dr. Steffen Tomschke | B-S-S | 15.09.2016
Graph-Exploration mit d3js
Zoom & Pan
- Unterscheidung zws. Lokalen und globalen Zoom
- Panning auch über den sichtbaren Rand hinaus
http://bl.ocks.org/eyaler/10586116
Dr. Steffen Tomschke | B-S-S | 15.09.2016
Graph-Exploration mit d3js
Pooling
- Zusammenfassung von mehreren Knoten zu einem
- Wahl eines Repräsentanten
Graphbeispiel aus (Tomschke 2014)
Dr. Steffen Tomschke | B-S-S | 15.09.2016
Graph-Exploration mit d3js
Catch
- Alle Knoten außerhalb des sichtbaren Bereich am Rand anordnen
Graphbeispiel aus (Tomschke 2014)
Dr. Steffen Tomschke | B-S-S | 15.09.2016
Graph-Exploration mit d3js
Demo
Graphbeispiel aus (Tomschke 2014)
Dr. Steffen Tomschke | B-S-S | 15.09.2016
Kombination
Graph und andere Visualisierungen
- Submenge selektieren und Analyse über Attribute
var data_lines = svg.selectAll(".d3_xy_chart_line")
.data(datasets.map(function(d) {return d3.zip(d.x, d.y);}))
.enter().append("g")
.attr("class", ".d3_xy_chart_line") ;
data_lines.append("path")
.attr("class", "line")
.attr("d", function(d) {return draw_line(d); })
.attr("stroke", function(_, i) {return color_scale(i);}) ;
var pointData = [];
datasets.forEach(function (e) {
for(var i in e.x) {
pointData.push({x: e.x[i], y: e.y[i]});
}
});
var data_points = svg.selectAll(".d3_xy_chart_line")
.data(pointData)
.enter().append("circle")
.attr("r", 5)
.attr("cx", function(d) { return x_scale(d.x); })
.attr("cy", function(d) { return y_scale(d.y); })
.style("fill", function(d) { return "rgb(" + d.x + "," + d.y + ",0)"});
B-S-S 2016
Dr. Steffen Tomschke | B-S-S | 15.09.2016
Zusammenfassung – „IoT + Graph + D3JS“
Dr. Steffen Tomschke | B-S-S | 15.09.2016
Zusammenfassung
„IoT + Graph + D3JS“
- IoT liefert große Datenmenge
- Pharmaindustrie, komplexe Prozesse
- Zugriff auf Daten (insb. für Mensch)
- Aufbereitung durch „Information Architecture“
- Bereitstellung durch Enterprise Search
- Personalisierte Exploration der Daten
- Zusammenhänge werden im Graph sichtbar
- zusätzliche Attribute können direkt verglichen werden
- Zusammenhang zu persönlichen Eigenschaften des
Nutzers
Allgemein – visualisieren komplexer Daten
1. Daten gem. Domäne aufbereiten
(Information Architecture)
2. Komplexität reduzieren
3. Kombination von Layouts
4. Interaktion einbringen
Dr. Steffen Tomschke | B-S-S | 15.09.2016
Danke für Ihre Aufmerksamkeit
Dr. Steffen Tomschke | B-S-S | 15.09.2016
Kontakt
Dr. Steffen Tomschke
Teamlead & UX Consultant
B-S-S Business Software Solutions GmbH
Antonstraße 3a
01097 Dresden, GERMANY
Dr. Steffen Tomschke | B-S-S | 15.09.2016
Referenzen und Links
Dr. Steffen Tomschke | B-S-S | 15.09.2016
Referenzen und Links
JUG Saxony https://jugsaxony.org
B-S-S www.b-s-s.de
d3js 2016 https://d3js.org
Pica Systems 2016 https://www.apicasystem.com/wp-content/uploads/2015/04/apica-panel1.png
d3js 2016a https://square.github.io/intro-to-d3/parts-of-a-graph/
d3js 2016b https://bl.ocks.org/mbostock/950642
Eades 1984 Eades, P. (1984): A heuristics for graph drawing. In: Congressus numerantium, 42, (S. 146-160).
Ferrari et al 1969 Ferrari, D., Mezzalira, L. (1969): On Drawing a Graph with the Minimum Number of Crossings. In: Technical Report 69-11, Istituto di Elettrotecnica ed Elettronica, Politecnico di Milano
Greene et al. 2009 Greene, M. R., Oliva, A. (2009): The briefest of glances The time course of natural scene understanding. In: Psychological Science, 20(4), (S. 464-472).
Holton und van Wijk 2009, S. 989) Holten, D., Van Wijk, J. J. (2009): Force‐Directed Edge Bundling for Graph Visualization. In: Computer Graphics Forum. Blackwell Publishing Ltd, (Vol. 28, No. 3), (S. 983-990).
Kosslyn 1994 Kosslyn, S. M. (1994): Image and Brain: The Resolution of the Imagery Debate. MIT Press
Liang-Hui et al. 2012 Chu, L. H., Rivera, C. G., Popel, A. S., & Bader, J. S. (2012). Constructing the angiome: a global angiogenesis protein interaction network. Physiological genomics, 44(19), 915-924.
Perer et al. 2006, S.693 Perer, A., Shneiderman, B. (2006): Balancing systematic and flexible exploration of social networks. In: IEEE Transactions on Visualization and Computer Graphics, 12(5), (S. 693-700).
Royer et al. 2008, S.3 Royer, L., Reimann, M., Andreopoulos, B., Schroeder, M. (2008): Unraveling protein networks with power graph analysis. In: PLoS computational biology, 4(7), (S. e1000108).
Thrope et al. 1996 Thorpe, S., Fize, D., Marlot, C. (1996): Speed of processing in the human visual system. In: nature, 381(6582), (S. 520-522).
Tomschke 2014 Tomschke, S. (2016). Visualisierungs-und Interaktionskonzept zur graphenbasierten Exploration: Ein visuell-mentales Modell zur Reduktion der kognitiven Last während der Exploration komplexer Graphen
(Doctoral dissertation, Dissertation, Dresden, Technischen Universität Dresden, 2015).
Trickery 1988 Trickey, H. (1988): Drag: A graph drawing system. In Proc. of the Intl. Conf. on Electronic Publishing, Document Manipulation, and Typography (S. 171-182).
Sarkar et al. 1993, S.86 Sarkar, M., Brown, M. H. (1994): Graphical fisheye views. In: Communications of the ACM, 37(12), (S. 73-83).
Wertheimer 1922 Wertheimer, M. (1922): Untersuchungen zur Lehre von der Gestalt. In: Psychological Research, 1(1), (S. 47-58).
Wertheimer 1924 Wertheimer, M. (1924): Über Gestalttheorie: Vortrag gehalten in der Kant-Gesellschaft, Berlin: Verlag der Philosophischen Akademie.
Wills 1998, S. 412 Wills, G. J. (1998): NicheWorks—interactive visualization of very large graphs. In: Proceedings of the Symposium on Graph Drawing GD '97, Springer-Verlag. (S. 403-415).

Weitere ähnliche Inhalte

Andere mochten auch

Saputra
SaputraSaputra
Saputra
finley
 
Opsd Endpraesentation
Opsd EndpraesentationOpsd Endpraesentation
Opsd Endpraesentation
fiebigc
 
Weird Zoo
Weird ZooWeird Zoo
Weird Zoo
delta
 
Tome 8 : gestion interne
Tome 8 : gestion interneTome 8 : gestion interne
Tome 8 : gestion interne
paroles d'élus
 
La ville de Lyon et ses évènements
La ville de Lyon et ses évènementsLa ville de Lyon et ses évènements
La ville de Lyon et ses évènements
Marion Gauthier
 

Andere mochten auch (16)

Grassroots fundraising mit community building alexandra ripken 2010
Grassroots fundraising mit community building alexandra ripken 2010Grassroots fundraising mit community building alexandra ripken 2010
Grassroots fundraising mit community building alexandra ripken 2010
 
Saputra
SaputraSaputra
Saputra
 
Opsd Endpraesentation
Opsd EndpraesentationOpsd Endpraesentation
Opsd Endpraesentation
 
Weird Zoo
Weird ZooWeird Zoo
Weird Zoo
 
Carte du québec 1º eso
Carte du québec  1º esoCarte du québec  1º eso
Carte du québec 1º eso
 
Les robots vont-ils prendre nos emplois ? - Cafe Numerique
Les robots vont-ils prendre nos emplois ? - Cafe NumeriqueLes robots vont-ils prendre nos emplois ? - Cafe Numerique
Les robots vont-ils prendre nos emplois ? - Cafe Numerique
 
Guide choix franchise
Guide choix franchiseGuide choix franchise
Guide choix franchise
 
Tic castaño
Tic castañoTic castaño
Tic castaño
 
Dunkle Sonne, Lesung, Kapitel 7
Dunkle Sonne, Lesung, Kapitel 7Dunkle Sonne, Lesung, Kapitel 7
Dunkle Sonne, Lesung, Kapitel 7
 
Tome 8 : gestion interne
Tome 8 : gestion interneTome 8 : gestion interne
Tome 8 : gestion interne
 
3G Services Paket
3G Services Paket3G Services Paket
3G Services Paket
 
Genami19
Genami19Genami19
Genami19
 
les Placements
les Placementsles Placements
les Placements
 
Portafolio
PortafolioPortafolio
Portafolio
 
Katte
KatteKatte
Katte
 
La ville de Lyon et ses évènements
La ville de Lyon et ses évènementsLa ville de Lyon et ses évènements
La ville de Lyon et ses évènements
 

Ähnlich wie Graph-Gestaltung mit d3js im IoT-Umfeld

XProject - Social and Analytical Project Management
XProject - Social and Analytical Project ManagementXProject - Social and Analytical Project Management
XProject - Social and Analytical Project Management
Herbert Wagger
 

Ähnlich wie Graph-Gestaltung mit d3js im IoT-Umfeld (20)

Einführung in die semantische Suche in Massendaten
Einführung in die semantische Suche in MassendatenEinführung in die semantische Suche in Massendaten
Einführung in die semantische Suche in Massendaten
 
InES Development Day
InES Development DayInES Development Day
InES Development Day
 
Informationsintegration und Webportale - Einführungsveranstaltung
Informationsintegration und Webportale - EinführungsveranstaltungInformationsintegration und Webportale - Einführungsveranstaltung
Informationsintegration und Webportale - Einführungsveranstaltung
 
ShareConf 2013 - Microsoft SharePoint und Office 365 Konferenz & Workshops
ShareConf 2013 - Microsoft SharePoint und Office 365 Konferenz & WorkshopsShareConf 2013 - Microsoft SharePoint und Office 365 Konferenz & Workshops
ShareConf 2013 - Microsoft SharePoint und Office 365 Konferenz & Workshops
 
Die Zukunft des Wissensmanagements
Die Zukunft des WissensmanagementsDie Zukunft des Wissensmanagements
Die Zukunft des Wissensmanagements
 
Euko 2017 industrie 4.0 und wissensarbeit
Euko 2017   industrie 4.0 und wissensarbeitEuko 2017   industrie 4.0 und wissensarbeit
Euko 2017 industrie 4.0 und wissensarbeit
 
Integrierte Wissens- und Ontologieentwicklung
Integrierte Wissens- und OntologieentwicklungIntegrierte Wissens- und Ontologieentwicklung
Integrierte Wissens- und Ontologieentwicklung
 
Industrial Data Space: Referenzarchitektur für Data Supply Chains
Industrial Data Space: Referenzarchitektur für Data Supply ChainsIndustrial Data Space: Referenzarchitektur für Data Supply Chains
Industrial Data Space: Referenzarchitektur für Data Supply Chains
 
Zwischenstand des IDS Datenwelten - Dezember 2016
Zwischenstand des IDS Datenwelten - Dezember 2016Zwischenstand des IDS Datenwelten - Dezember 2016
Zwischenstand des IDS Datenwelten - Dezember 2016
 
UBA Data Cube
UBA Data CubeUBA Data Cube
UBA Data Cube
 
XProject - Social and Analytical Project Management
XProject - Social and Analytical Project ManagementXProject - Social and Analytical Project Management
XProject - Social and Analytical Project Management
 
eGovernment Konferenz 2013,Österreich - Workshop: Grundlagen und Mehrwerte vo...
eGovernment Konferenz 2013,Österreich - Workshop: Grundlagen und Mehrwerte vo...eGovernment Konferenz 2013,Österreich - Workshop: Grundlagen und Mehrwerte vo...
eGovernment Konferenz 2013,Österreich - Workshop: Grundlagen und Mehrwerte vo...
 
User Research im Kontext - Erfolg von Produkten und Services durch Contextual...
User Research im Kontext - Erfolg von Produkten und Services durch Contextual...User Research im Kontext - Erfolg von Produkten und Services durch Contextual...
User Research im Kontext - Erfolg von Produkten und Services durch Contextual...
 
Enterprise Search Technologien im Dienste der DSGVO / GDPR
Enterprise Search Technologien im Dienste der DSGVO / GDPREnterprise Search Technologien im Dienste der DSGVO / GDPR
Enterprise Search Technologien im Dienste der DSGVO / GDPR
 
Grüne ag netzpolitik_20131012
Grüne ag netzpolitik_20131012Grüne ag netzpolitik_20131012
Grüne ag netzpolitik_20131012
 
Der Wert von Daten in Zeiten von "Big Data"
Der Wert von Daten in Zeiten von "Big Data"Der Wert von Daten in Zeiten von "Big Data"
Der Wert von Daten in Zeiten von "Big Data"
 
Von Big Data zu Künstlicher Intelligenz - Maschinelles Lernen auf dem Vormarsch
Von Big Data zu Künstlicher Intelligenz - Maschinelles Lernen auf dem VormarschVon Big Data zu Künstlicher Intelligenz - Maschinelles Lernen auf dem Vormarsch
Von Big Data zu Künstlicher Intelligenz - Maschinelles Lernen auf dem Vormarsch
 
Von Big Data zu Künstlicher Intelligenz - Maschinelles Lernen auf dem Vormarsch
Von Big Data zu Künstlicher Intelligenz - Maschinelles Lernen auf dem VormarschVon Big Data zu Künstlicher Intelligenz - Maschinelles Lernen auf dem Vormarsch
Von Big Data zu Künstlicher Intelligenz - Maschinelles Lernen auf dem Vormarsch
 
Big Data als Quelle der Inspiration
Big Data als Quelle der Inspiration Big Data als Quelle der Inspiration
Big Data als Quelle der Inspiration
 
Forschungsdaten – Nach der Publikation ist vor der Archivierung!
Forschungsdaten – Nach der Publikation ist vor der Archivierung!Forschungsdaten – Nach der Publikation ist vor der Archivierung!
Forschungsdaten – Nach der Publikation ist vor der Archivierung!
 

Mehr von B-S-S Business Software Solutions GmbH

European SharePoint Conference Automated Tagging and Metadata Management w...
European SharePoint Conference   Automated Tagging and Metadata  Management w...European SharePoint Conference   Automated Tagging and Metadata  Management w...
European SharePoint Conference Automated Tagging and Metadata Management w...
B-S-S Business Software Solutions GmbH
 

Mehr von B-S-S Business Software Solutions GmbH (8)

Mit Sharepoint und Suche zum intelligenten Informationsarbeitsplatz
Mit Sharepoint und Suche zum intelligenten InformationsarbeitsplatzMit Sharepoint und Suche zum intelligenten Informationsarbeitsplatz
Mit Sharepoint und Suche zum intelligenten Informationsarbeitsplatz
 
Digitale Assistenz "Gute Entscheidungen trifft, wer seine Möglichkeiten kennt"
Digitale Assistenz "Gute Entscheidungen trifft, wer seine Möglichkeiten kennt"Digitale Assistenz "Gute Entscheidungen trifft, wer seine Möglichkeiten kennt"
Digitale Assistenz "Gute Entscheidungen trifft, wer seine Möglichkeiten kennt"
 
Warum wir Arbeit neu erfinden müssen?
Warum wir Arbeit neu erfinden müssen?Warum wir Arbeit neu erfinden müssen?
Warum wir Arbeit neu erfinden müssen?
 
Wie digitale Assistenten das Arbeitsleben erleichtern
Wie digitale Assistenten das Arbeitsleben erleichternWie digitale Assistenten das Arbeitsleben erleichtern
Wie digitale Assistenten das Arbeitsleben erleichtern
 
Datenanalyse zur Unterstützung der Entscheidungsfindung im Arbeitsalltag
Datenanalyse zur Unterstützung der Entscheidungsfindung im ArbeitsalltagDatenanalyse zur Unterstützung der Entscheidungsfindung im Arbeitsalltag
Datenanalyse zur Unterstützung der Entscheidungsfindung im Arbeitsalltag
 
B-S-S Business Software Solutions - Wer wir sind.
B-S-S Business Software Solutions - Wer wir sind.B-S-S Business Software Solutions - Wer wir sind.
B-S-S Business Software Solutions - Wer wir sind.
 
B-S-S Context Aware Information Access
B-S-S  Context Aware Information AccessB-S-S  Context Aware Information Access
B-S-S Context Aware Information Access
 
European SharePoint Conference Automated Tagging and Metadata Management w...
European SharePoint Conference   Automated Tagging and Metadata  Management w...European SharePoint Conference   Automated Tagging and Metadata  Management w...
European SharePoint Conference Automated Tagging and Metadata Management w...
 

Graph-Gestaltung mit d3js im IoT-Umfeld

  • 1. Dr. Steffen Tomschke | B-S-S | 15.09.2016 Graph-Gestaltung mit d3js im IoT-Umfeld Dr. Steffen Tomschke | B-S-S | 15.09.2016
  • 2. Dr. Steffen Tomschke | B-S-S | 15.09.2016 • Über die B-S-S • Use Case • Grundlagen • Enterprise Search / Information Architecture • IoT • Graphvisualisierung und -exploration • Umsetzung mit d3js • Allgemein d3js • Graphvisualisierung • Gestaltung von Graphen mit d3js • Interaktion • Kombination mit anderen Visualisierungen • Zusammenfassung „IoT + Graph + d3js“ Agenda
  • 3. Dr. Steffen Tomschke | B-S-S | 15.09.2016 B-S-S Business Software Solutions GmbH
  • 4. Dr. Steffen Tomschke | B-S-S | 15.09.2016 Allgemein • IT Dienstleistungs- und Produktunternehmen • Gegründet 1999 • 45 Mitarbeiter • Consulting, Entwicklung und Support • Standorte in Eisenach und Dresden • Unsere Expertise ist: • Enterprise Search • Daten Analyse • Information Management • Cloud Technologie • Google und Microsoft Gold Partner sowie Experten für Azure, SharePoint und O365 Fokus-Bereiche • Erkenntnisgewinnung aus Unternehmensdaten • Transfer von relevanten Informationen in Business Prozesse • onPremise und Cloud Services • Enterprise Search • Information Architecture • BigData • IoT Über die B-S-S
  • 5. Dr. Steffen Tomschke | B-S-S | 15.09.2016 Über die B-S-S Enterprise Search • Unternehmensweit Aufbereitung von Daten • Crawling, Indexing, Metadata-Management, Ranking • Heterogene Systemlandschaft vorhanden • Ziel: Darstellung der aufbereiteten Daten in einem Portal Information Architecture • Analyse der Geschäftsprozesse • Gestaltung der Informationen entsprechend der Analyse • Abstraktion von Informationen • Informationsarchitektur • Navigationskonzept • Taxonomie-Erstellung • Metadaten-Management • Wissensverknüpfung • Unabhängige Beratung Enterprise Suche • Suchoptimierung • Integration verteilter Enterprise Content Quellen • Content Processing • Aufbau suchbasierter Data Hubs • Self Service BI mittels Power Pivot & Power BI • Umsetzung Big Data Analytics und Recommendation Engines • Dynamische Sites & Personalisierte Apps und Dashboards • Suchbasiertes Cross Site Publishing • Hybrid /Cloud Lösungen
  • 6. Dr. Steffen Tomschke | B-S-S | 15.09.2016 Über die B-S-S Nahtlose Kommunikation und Information für alle Mitarbeiter Digitale Beratung Erklärung komplexer Produkte mittels aktueller digitaler Medien aus einer zentralen Plattform Digitale Auftragserfassung Digitale Dokumentation der Kundenwünsche und sofortige Verfügbarkeit der Daten im Büro. Digitale Koordination mit Partnern und Subdienstleistern Digitale Kundenakte Vor-Ort Zugriff auf aktuelle Planungen Dokumentation von Mängeln und Änderungen Datenaustausch mit anderen Gewerken Digitaler Service Einfache und schnelle Terminvereinbarung Zugriff auf benötigtes Wissen beim Kunden Vor-Ort Videokommunikation mit helfenden Kollegen Beratung Verkauf ServiceAusführung
  • 7. Dr. Steffen Tomschke | B-S-S | 15.09.2016 Use Case
  • 8. Dr. Steffen Tomschke | B-S-S | 15.09.2016 Use Case Enterprise Search & Information Architecture für einen Pharmakonzern mit über 100.000 Mitarbeitern Ziel: stets an jedem Ort die passende Information für jeden Mitarbeiter bereitstellen - Aufbereitung von Informationen für alle Mitarbeiter - Mitarbeiter muss gezielt und schnell an Informationen kommen - Mitarbeiter ist mobil (innerhalb Gebäude, innerhalb Gelände) - Verschiedene Typen von MA (Office, Researcher, Chem. Worker, Management, …) - Vernetzte Systeme und Maschinen (IoT) - Identifikation von involvierten Systemen - Nutzung von Informationen (persönlich, Standort, Tagesablauf, ...) - Kombination von Informationen zur Darstellung der aktuellen Situation (Graph) - Geräteunabhängig Nutzung (Browser, d3js) - B-S-S: „personalisierte(r) Informations Architektur/Assistent“
  • 9. Dr. Steffen Tomschke | B-S-S | 15.09.2016 Use Case Worker Management Researcher Chemical MachinesChemical MachinesChemical MachinesChemical Machines Data Backend (IoT) Frontend (Graph Vis.) Personalisierung & Information Arch.
  • 10. Dr. Steffen Tomschke | B-S-S | 15.09.2016 Use Case Anforderungen: „Enterprise Search & Information Architecture für einen Pharmakonzern mit über 100.000 Mitarbeitern“ - IoT - Informationen nach Standort / Zeit / persönlichen Vorzügen anzeigen - Zugriff auf verschiedene Datenquellen - Graph/Visualisierung - Relevante Informationen - Reduktion von komplexen Informationsmengen (Repräsentanten) - Interaktions-/Explorationsmöglichkeiten - Enterprise Search / Information Architecture - Zielsystem - auf verschiedenen Endgeräten (mobil wie auch stationär)
  • 11. Dr. Steffen Tomschke | B-S-S | 15.09.2016 Grundlagen
  • 12. Dr. Steffen Tomschke | B-S-S | 15.09.2016 Enterprise Search & Information Architecture Enterprise Search - Teilgebiet des Information Retrieval - Vollständige Indexierung der Unternehmensdaten - Nutzung von Crawlern und APIs - Aufbereitung der/mit Metadaten - Verknüpfung der Daten über Metadaten - Einbeziehen von persönlichen Informatione des Nutzers - Nutzerprofile (Ort, Termine, Aufgaben, Projekte, ..) - Aufbereiten der Daten für kommende Aufgaben - Freie Suche (Exploration) nach beliebigen Daten ermöglichen Information Architecture - Analyse der Daten/Dokumente innerhalb des Unternehmens - Gestaltung einer gebrauchstauglichen Struktur - Teilautomatisiert, basierend auf den Metadaten - Enge Kooperation mit Fachbereichen / Zielgruppen - Bestimmung von Interaktionsmöglichkeiten - Schnittstellen - Zugriffsrechte - Steuerung der Exploration
  • 13. Dr. Steffen Tomschke | B-S-S | 15.09.2016 Internet of Things IoT am Beispiel Pharmaindustrie - Allgemein - Unterstützung des Nutzers in der Erfassung der Informationen die durch ihn und seine Umgebung erzeugt werden - Pharmaindustrie - Zugriff und Kombination der Information über alle Prozesse und Systeme sowie beteiligte Personen - Nachhaltiges Verständnis über zusammenhängende Systeme (Informationen) - Erstellen von Beziehungen zwischen einzelnen Dingen - Visuelle Aufbereitung (Graph) Umgebun g Nutzer Systeme Informationen generieren & nutzen
  • 14. Dr. Steffen Tomschke | B-S-S | 15.09.2016 Exploration komplexer Daten - Nutzer exploriert Daten/Informationen durch „Suche“ in einem Kontext - Je nach Tiefe der Exploration entstehen verschiedene „Levels of Detail“ (LoD) - Verlust des Bezugs der Position im Kontext gilt als „Lost-in-Context“ Explorationsprozess in Graphen (Tomschke 2014)
  • 15. Dr. Steffen Tomschke | B-S-S | 15.09.2016 Exploration komplexer Daten Kognitives Konzept während der Exploration - Verortung von Objekten mittels quantitativen Werten (semantische und numerische) - Kombination von einzelnen Objekten - Anreicherung zu einer mentalen Karte - Erweiterung des Aufmerksamkeitsfokus Änderung des Aufmerksamkeitsfokus (Tomschke 2014)
  • 16. Dr. Steffen Tomschke | B-S-S | 15.09.2016 Graphvisualisierung Was ist Graphvisualisierung? - Komplexe Netzwerke / Daten (größer 1000 Objekte) mittels Graphen visualisieren - Visuelle Darstellung von Objekten und deren Beziehungen sowie einer Teilmenge an Attributen - Überblick über Wertigkeit von Graphobjekten - Vereinigt verschiedene Domänen - Interaktion durch graphenbasierte Exploration - Manipulation im Graph direkt sichtbar - Gestaltgesetze nutzen für zusätzliche Informationen - Erleichterte Interpretation der Daten durch visuelle Darstellung - Form, Farbe, Position, etc. - Schnelle Erfassung von Zusammenhängen im Netzwerk
  • 17. Dr. Steffen Tomschke | B-S-S | 15.09.2016 - Graphexploration - Kontext und Detail (Perer et al. 2006) - Aufgaben (z.B. Lokalisieren, Clustern, Ordnen) - Gestaltpsychologie - Gestaltgesetze (Wertheimer 1922, 1924) - Szenen- und Objektwahrnehmung (Greene et al. 2009; Thrope et al. 1996) - Graphästhetik (Eades 1984; Ferrari et al 1969; Trickery 1988) - Erhöhte Lesbarkeit von Graphen (Holton und van Wijk 2009) - Reduktion von visuellen Störmustern - Visuelle Kognition (Kosslyn 1994) - Zusammenspiel von visuellem Puffer und Arbeitsgedächtnis - Ortsgedächtnis und mentale Karten Gestaltgesetze (nach Wertheimer 1922, 1924) (Tomschke 2014) Edge Bundling (Holton und van Wijk 2009, S. 989) Grundlagen zur graphenbasierten Exploration
  • 18. Dr. Steffen Tomschke | B-S-S | 15.09.2016 SocialAction (Perer et al. 2006, S.693) PowerGraphs (Royer et al. 2008, S.3)Graph mit Fisheye View (Sarkar et al. 1993, S.86) Kantenerhaltendes Clustern (Wills 1998, S. 412) Edge Bundling (Holton und van Wijk 2009, S. 989) Aktuelle Explorationssysteme
  • 19. Dr. Steffen Tomschke | B-S-S | 15.09.2016 Graphvisualisierung Alternativen - KPIs - Zahlen welche in Form von Diagrammen oder an Stati gekoppelt dargestellt werden - Dashboards - Übersicht über Systeme - Meist abhängige oder korrelierende Daten - Zusammenfassung in Form von Diagrammen und KPIs https://www.apicasystem.com/wp-content/uploads/2015/04/apica-panel1.png PowerBI Dashbord – Azure (Microsoft)
  • 20. Dr. Steffen Tomschke | B-S-S | 15.09.2016 Graphvisualisierung Komplexe Graphen und deren Visualisierung Edge Bundling (Holton und van Wijk 2009, S. 989)Protein Interaktion (http://physiolgenomics.physiology.org/content/44/19/915) Störmuster bei komplexen Graphen
  • 21. Dr. Steffen Tomschke | B-S-S | 15.09.2016 Strukturmittel - Beschränkte Kapazität in der Wahrnehmung erfordert Mittel zur Reduktion - Komplexe Graphen haben eine große Informationsmenge - Entstehung eines „Lost-in-Context“-Effekts - Abstraktion einer großer Informationsmenge - Informationsmenge wird durch ein einzelnes Objekt repräsentiert, einem Chunk (Abstraktion / Repräsentant) - Verwendung von Detailstufen - „Level-of-Detail“ - Entstehung verschiedener Sichten und „Levels-of-Detail“ in der Darstellung - Folge der Bildung von „Levels-of-Detail“ - Entstehung verschiedener, gleichzeitiger Detailstufen (globales Strukturmittel) - Einfluss von Gestaltgesetzen und Graphästhetik (lokale Strukturmittel)
  • 22. Dr. Steffen Tomschke | B-S-S | 15.09.2016 Globales Strukturmittel - „Multi-Level-of-Detail“-Konzept - Mehrere, verschiedene und gleichzeitig abgebildete Detailstufen - Chunks durch Einfluss der Gestaltgesetze - Reduktion der Menge an explizit wahrnehmbar Information - Lokale Strukturmittel haben weiteren Einfluss in der Wahrnehmung der „Levels- of-Detail“ Abbildung der Chunks im Graph mittels „Multi-Level-of-Detail“-Konzept(Tomschke 2014)
  • 23. Dr. Steffen Tomschke | B-S-S | 15.09.2016 Lokale Strukturmittel - Basieren auf Gestaltgesetzen - Bildsprache - Muster durch Knotenanordnung - Muster durch Kantenform - Ähnlichkeiten von Kanten und Knoten - Semantik von Kantenbiegung - Perspektivität - Bildung von Gruppen durch ähnliche Attribute - Gruppierung als Perspektivität in Ebenen Semantische Wirkung von Kantenformen/-biegungen (Tomschke 2014)
  • 24. Dr. Steffen Tomschke | B-S-S | 15.09.2016 Lokale Strukturmittel - Perspektivität - Einzelne oder gemeinsame Perspektive - Filtern der Objekten (eingeschränkte Perspektive) - Bildung von Ebenen (Cluster, Werten, LoDs) - Gestaltgesetze - Ähnlichkeit in Wert, Form, Größe - Nähe von Graphobjekten - Verbundene Elemente, z.B. Vernetzungsgrad eines (Sub-)Graphen - Semantik - Pooling als Aggregation - Gruppierung / Isolation - Kantenbiegungen und -muster Einfluss der Verzerrung als Perspektivität auf den Graphen (Tomschke 2014) Bildung von Mustern durch Knotenanordnung (Tomschke 2014)
  • 25. Dr. Steffen Tomschke | B-S-S | 15.09.2016 d3js Vorteile von d3js (4.x) - Schnell Ergebnisse sichtbar - Modulare und vielseitige Bibliothek - Verschiedene Diagramme und Graphen - Interaktion mit der Visualisierung möglich - Transitionen / Animationen möglich (http://bl.ocks.org/mbostock/1256572) - Web (SVG und DOM) basiert mit JavaScript - Anbindung verschiedener Datenquellen (insb. Zahlenwerte) einfach Nachteile „von d3js“ - Komplexe/aufwendige API - Ab ca. 1000 Objekten langsam d3js.org (d3js2016)
  • 26. Dr. Steffen Tomschke | B-S-S | 15.09.2016 Zwischenfazit Was haben wir gelernt um jetzt mit d3js zu starten - IoT erzeugt große Menge an Informationen - Enterprise Search und Information Architecture als Mittel zur Strukturierung - Wahrnehmung / Exploration / Suche in den Informationen - Graphvisualisierung und individuelle Exploration - d3js als Technologie für Graphvisualisierung
  • 27. Dr. Steffen Tomschke | B-S-S | 15.09.2016 Umsetzung
  • 28. Dr. Steffen Tomschke | B-S-S | 15.09.2016 Einfaches Beispiel mit d3js Allgemein d3js: - d3js arbeitet deklarativ - Verwendet Knoten “selections” Alle Elemente eines Typs selektieren und Farbe ändern: var paragraphs = document.getElementsByTagName("p"); for (var i = 0; i < paragraphs.length; i++) { var paragraph = paragraphs.item(i); paragraph.style.setProperty("color", "white", null); } Oder, mit d3js: d3.selectAll(“p”).style(“color”, “white”); Dynamisch: d3.selectAll("p").style("color", function() { return "hsl(" + Math.random() * 360 + ",100%,50%)"; });
  • 29. Dr. Steffen Tomschke | B-S-S | 15.09.2016 Einfaches Beispiel mit d3js Enter und Exit - Neue Daten einfügen / entfernen d3.select("body") .selectAll("p") .data([4, 8, 15, 16, 23, 42]) .enter().append("p") .text(function(d) { return "I’m number " + d + "!"; }); Transitionen - Hintegrundfarbe in Schwarz überblenden d3.select("body").transition() .style("background-color", "black");
  • 30. Dr. Steffen Tomschke | B-S-S | 15.09.2016 Graph mit d3js Grundlagen - d3js laden <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.1/d3.min.js"></script> - d3 Objekt für SVG (DOM-Element selektiert) var vis = d3.select("#graph“).append("svg"); - Objekte mit Daten platzieren (Knoten und Kanten) var nodes = [{x: 30, y: 50}, {x: 50, y: 80}, {x: 90, y: 120}] vis.selectAll("circle .nodes") .data(nodes) .enter() .append("svg:circle") .attr("class", "nodes") .attr("cx", function(d) { return d.x; }) .attr("cy", function(d) { return d.y; }) .attr("r", "10px”) .attr("fill", "black") var links = [{source: nodes[0], target: nodes[1]}] vis.selectAll(“.line”).data(links).enter().append(“line”). … .style(“stroke”, “rgb(6,120,155)”);
  • 31. Dr. Steffen Tomschke | B-S-S | 15.09.2016 Einfacher Graph mit d3js Beispiel var svg = d3.select("svg"), width = +svg.attr("width"), height = +svg.attr("height"); var color = d3.scaleOrdinal(d3.schemeCategory20); var simulation = d3.forceSimulation() .force("link", d3.forceLink().id(function(d) { return d.id; })) .force("charge", d3.forceManyBody()) .force("center", d3.forceCenter(width / 2, height / 2)); d3.json("miserables.json", function(error, graph) { … function ticked() { link .attr("x1", function(d) { return d.source.x; }) .attr("y1", function(d) { return d.source.y; }) .attr("x2", function(d) { return d.target.x; }) .attr("y2", function(d) { return d.target.y; }); node .attr("cx", function(d) { return d.x; }) .attr("cy", function(d) { return d.y; }); } } d3js.org (d3js2016)
  • 32. Dr. Steffen Tomschke | B-S-S | 15.09.2016 Gestaltung des Graph mit d3js Form - Alle Knoten selektieren - Zuweisen einer entsprechenden (vordefinierten) Form setInterval(function(){ // Add a new random shape. nodes.push({ type: d3.svg.symbolTypes[~~(Math.random() * d3.svg.symbolTypes.length)], size: Math.random() * 300 + 100 }); d3js.org (d3js2016)
  • 33. Dr. Steffen Tomschke | B-S-S | 15.09.2016 Gestaltung des Graph mit d3js Farbe - Alle Knoten selektieren - Zuweisen einer entsprechenden (vordefinierten) Farbe var color = d3.scaleOrdinal(d3.schemeCategory20); var node = svg.append("g") .attr("class", "nodes") .selectAll("circle") .data(graph.nodes) .enter().append("circle") .attr("r", 5) .attr("fill", function(d) { return color(d.group); }) .call(d3.drag() .on("start", dragstarted) .on("drag", dragged) .on("end", dragended)); d3js.org (d3js2016)
  • 34. Dr. Steffen Tomschke | B-S-S | 15.09.2016 Gestaltung des Graph mit d3js Label - Alle Knoten selektieren - Zuweisen eines Labels / Text node.append("text") .attr("dx", 12) .attr("dy", ".35em") .text(function(d) { return d.name }); https://bl.ocks.org/mbostock/950642
  • 35. Dr. Steffen Tomschke | B-S-S | 15.09.2016 Komplexer Graph mit d3js Beispiel - Analog zum einfachen Graph - Höhere Anzahl an Knoten und Kanten var svg = d3.select("svg"), width = +svg.attr("width"), height = +svg.attr("height"); var color = d3.scaleOrdinal(d3.schemeCategory20); var simulation = d3.forceSimulation() .force("link", d3.forceLink().id(function(d) { return d.id; })) .force("charge", d3.forceManyBody()) .force("center", d3.forceCenter(width / 2, height / 2)); d3.json("miserables.json", function(error, graph) { … function ticked() { link .attr("x1", function(d) { return d.source.x; }) .attr("y1", function(d) { return d.source.y; }) .attr("x2", function(d) { return d.target.x; }) .attr("y2", function(d) { return d.target.y; }); node .attr("cx", function(d) { return d.x; }) .attr("cy", function(d) { return d.y; }); } Graph Beispiel aus (Tomschke 2014)
  • 36. Dr. Steffen Tomschke | B-S-S | 15.09.2016 Graph-Exploration mit d3js Zoom & Pan - Unterscheidung zws. Lokalen und globalen Zoom - Panning auch über den sichtbaren Rand hinaus http://bl.ocks.org/eyaler/10586116
  • 37. Dr. Steffen Tomschke | B-S-S | 15.09.2016 Graph-Exploration mit d3js Pooling - Zusammenfassung von mehreren Knoten zu einem - Wahl eines Repräsentanten Graphbeispiel aus (Tomschke 2014)
  • 38. Dr. Steffen Tomschke | B-S-S | 15.09.2016 Graph-Exploration mit d3js Catch - Alle Knoten außerhalb des sichtbaren Bereich am Rand anordnen Graphbeispiel aus (Tomschke 2014)
  • 39. Dr. Steffen Tomschke | B-S-S | 15.09.2016 Graph-Exploration mit d3js Demo Graphbeispiel aus (Tomschke 2014)
  • 40. Dr. Steffen Tomschke | B-S-S | 15.09.2016 Kombination Graph und andere Visualisierungen - Submenge selektieren und Analyse über Attribute var data_lines = svg.selectAll(".d3_xy_chart_line") .data(datasets.map(function(d) {return d3.zip(d.x, d.y);})) .enter().append("g") .attr("class", ".d3_xy_chart_line") ; data_lines.append("path") .attr("class", "line") .attr("d", function(d) {return draw_line(d); }) .attr("stroke", function(_, i) {return color_scale(i);}) ; var pointData = []; datasets.forEach(function (e) { for(var i in e.x) { pointData.push({x: e.x[i], y: e.y[i]}); } }); var data_points = svg.selectAll(".d3_xy_chart_line") .data(pointData) .enter().append("circle") .attr("r", 5) .attr("cx", function(d) { return x_scale(d.x); }) .attr("cy", function(d) { return y_scale(d.y); }) .style("fill", function(d) { return "rgb(" + d.x + "," + d.y + ",0)"}); B-S-S 2016
  • 41. Dr. Steffen Tomschke | B-S-S | 15.09.2016 Zusammenfassung – „IoT + Graph + D3JS“
  • 42. Dr. Steffen Tomschke | B-S-S | 15.09.2016 Zusammenfassung „IoT + Graph + D3JS“ - IoT liefert große Datenmenge - Pharmaindustrie, komplexe Prozesse - Zugriff auf Daten (insb. für Mensch) - Aufbereitung durch „Information Architecture“ - Bereitstellung durch Enterprise Search - Personalisierte Exploration der Daten - Zusammenhänge werden im Graph sichtbar - zusätzliche Attribute können direkt verglichen werden - Zusammenhang zu persönlichen Eigenschaften des Nutzers Allgemein – visualisieren komplexer Daten 1. Daten gem. Domäne aufbereiten (Information Architecture) 2. Komplexität reduzieren 3. Kombination von Layouts 4. Interaktion einbringen
  • 43. Dr. Steffen Tomschke | B-S-S | 15.09.2016 Danke für Ihre Aufmerksamkeit
  • 44. Dr. Steffen Tomschke | B-S-S | 15.09.2016 Kontakt Dr. Steffen Tomschke Teamlead & UX Consultant B-S-S Business Software Solutions GmbH Antonstraße 3a 01097 Dresden, GERMANY
  • 45. Dr. Steffen Tomschke | B-S-S | 15.09.2016 Referenzen und Links
  • 46. Dr. Steffen Tomschke | B-S-S | 15.09.2016 Referenzen und Links JUG Saxony https://jugsaxony.org B-S-S www.b-s-s.de d3js 2016 https://d3js.org Pica Systems 2016 https://www.apicasystem.com/wp-content/uploads/2015/04/apica-panel1.png d3js 2016a https://square.github.io/intro-to-d3/parts-of-a-graph/ d3js 2016b https://bl.ocks.org/mbostock/950642 Eades 1984 Eades, P. (1984): A heuristics for graph drawing. In: Congressus numerantium, 42, (S. 146-160). Ferrari et al 1969 Ferrari, D., Mezzalira, L. (1969): On Drawing a Graph with the Minimum Number of Crossings. In: Technical Report 69-11, Istituto di Elettrotecnica ed Elettronica, Politecnico di Milano Greene et al. 2009 Greene, M. R., Oliva, A. (2009): The briefest of glances The time course of natural scene understanding. In: Psychological Science, 20(4), (S. 464-472). Holton und van Wijk 2009, S. 989) Holten, D., Van Wijk, J. J. (2009): Force‐Directed Edge Bundling for Graph Visualization. In: Computer Graphics Forum. Blackwell Publishing Ltd, (Vol. 28, No. 3), (S. 983-990). Kosslyn 1994 Kosslyn, S. M. (1994): Image and Brain: The Resolution of the Imagery Debate. MIT Press Liang-Hui et al. 2012 Chu, L. H., Rivera, C. G., Popel, A. S., & Bader, J. S. (2012). Constructing the angiome: a global angiogenesis protein interaction network. Physiological genomics, 44(19), 915-924. Perer et al. 2006, S.693 Perer, A., Shneiderman, B. (2006): Balancing systematic and flexible exploration of social networks. In: IEEE Transactions on Visualization and Computer Graphics, 12(5), (S. 693-700). Royer et al. 2008, S.3 Royer, L., Reimann, M., Andreopoulos, B., Schroeder, M. (2008): Unraveling protein networks with power graph analysis. In: PLoS computational biology, 4(7), (S. e1000108). Thrope et al. 1996 Thorpe, S., Fize, D., Marlot, C. (1996): Speed of processing in the human visual system. In: nature, 381(6582), (S. 520-522). Tomschke 2014 Tomschke, S. (2016). Visualisierungs-und Interaktionskonzept zur graphenbasierten Exploration: Ein visuell-mentales Modell zur Reduktion der kognitiven Last während der Exploration komplexer Graphen (Doctoral dissertation, Dissertation, Dresden, Technischen Universität Dresden, 2015). Trickery 1988 Trickey, H. (1988): Drag: A graph drawing system. In Proc. of the Intl. Conf. on Electronic Publishing, Document Manipulation, and Typography (S. 171-182). Sarkar et al. 1993, S.86 Sarkar, M., Brown, M. H. (1994): Graphical fisheye views. In: Communications of the ACM, 37(12), (S. 73-83). Wertheimer 1922 Wertheimer, M. (1922): Untersuchungen zur Lehre von der Gestalt. In: Psychological Research, 1(1), (S. 47-58). Wertheimer 1924 Wertheimer, M. (1924): Über Gestalttheorie: Vortrag gehalten in der Kant-Gesellschaft, Berlin: Verlag der Philosophischen Akademie. Wills 1998, S. 412 Wills, G. J. (1998): NicheWorks—interactive visualization of very large graphs. In: Proceedings of the Symposium on Graph Drawing GD '97, Springer-Verlag. (S. 403-415).