Interaktive Visualisierung der Projektmanagement-Prozesse

Transkript

1 Interaktive Visualisierung der Projektmanagement-Prozesse Abschlussvortrag zur Bachelorarbeit Dimitar Kosakov

2 Inhaltsverzeichnis Rückblick Ziel Technologien Konzept View Webinterface Datenstruktur Umsetzung Datenstruktur Visualisierung Editor-Funktion Webinterface Zusammenfassung Fazit Ausblick Live-Vorschau 1

3 Rückblick Ziel Projektmanagement-Prozesse interaktiv visualisieren Dynamische Prozess-Sichten generieren Abhängigkeiten visualisieren Prozesse gruppieren Über den Graph navigieren PM Prozesse editieren (erstellen/ändern/löschen) 2

4 Rückblick Technologien HTML5-Anwendung HTML Strukturierung der Inhalte JavaScript clientseitig D3 (Data Driven Documents) Visualisierung der Daten jquery, Select2, Tooltip PHP serverseitig SQLITE-Anbindung JSON-Objekt generieren AJAX Datenübertragung 3

5 Rückblick Konzept View 1 Gruppen Abbildung 1 View 2 Gruppenprozesse View 3 Verweise Abbildung 2 Abbildung 3 Quelle: Abbildung 1 / Abbildung 2 / Abbildung 3 - selbsterstellt 4

6 Rückblick - Konzept Webinterface Fokus auf die SVG-Grafik HTML-Elemente am oberen Rand positionieren Nicht relevante Elemente ausblenden Abbildung 4 Abbildung 5 Quelle: Abbildung 4 / Abbildung 5 - selbsterstellt 5

7 Rückblick Konzept SQLITE-Datenbank (Speicherung der Daten) Alle Informationen in einer Tabelle abspeichern Spalte children Kommagetrenntes Array von Prozess-IDs Abbildung 6 JSON-Objekt (Visualisierung der Daten) Quelle: Abbildung 6 - selbsterstellt 6

8 Umsetzung Datenstruktur (Datenbank) Tabelle nodes_view Kern-Informationen der Prozesse Zusätzliches Feld groupurl für den Aufbau der Views Tabelle groups Aufbau der View Gruppen Prinzip-Aufbau wie nodes_view Tabelle nodes_edges Datensätze automatisch von nodes_view generiert Output-Wert wird vom Anwender eingetragen Quelle: Abbildung 7 / Abbildung 8 / Abbildung 9 - selbsterstellt 7

9 Umsetzung Datenstruktur (JSON) JSON-Objekt nodes Aktuelle View graph Der komplette Graph edges Die Outputs Abbildung 10 Quelle: Abbildung 10 - selbsterstellt 8

10 Umsetzung Visualisierung Graph Aufbau Manipulation des JSON-Objekts Adjazenzliste erstellen Fallunterscheidung (Wenn-Dann-Bedingung) View 1 (Gruppen) Alle Verbindungen anzeigen View 2 (Gruppenprozesse) Keine Verbindungen anzeigen View 3 (Verweise) Nur die direkten Verbindungen des betrachteten Prozesses anzeigen 9

11 Umsetzung Visualisierung Zeichnen der SVG-Grafik (D3) Layout initialisieren - d3.layout.force() SVG-Elemente erstellen Gruppe Knoten (Prozesse) Rechtecke Gruppe Kanten (Verbindungen) Kurven Gruppe Text Adjazenzliste übergeben Quelle: Abbildung 11 - selbsterstellt 10

12 Umsetzung Visualisierung View 1 (Gruppen) View 2 (Gruppenprozesse) Abbildung 12 View 3 (Verweise) Abbildung 13 Abbildung 14 Quelle: Abbildung 12 / Abbildung 13 / Abbildung 14 - selbsterstellt 11

13 Umsetzung Visualisierung Probleme und Lösungen Positionierung der Prozesse (Knoten des Graphen) Abbildung 15: charge() Abbildung 16: charge(-5000) Konstruktion der Verbindungen (orthogonale Linien vs. Kurven) Abbildung 17 Abbildung 18 Quelle: Abbildung 15 / Abbildung 16 / Abbildung 17 / Abbildung 18- selbsterstellt 12

14 Umsetzung Editor Funktion Probleme und Lösungen Insert Hinzufügen von Vorgänger-Prozessen Datensatz in der Tabelle nodes_view ohne Vorgänger abspeichern Tabelle nodes_view absteigend sortieren (ORDER BY node_id DESC LIMIT 1) Aktualisieren der Spalte children des jeweiligen Prozesses mit der zuletzt hinzugefügten ID Edit Tabelle nodes_edges aktualisieren Update des Datensatzes des betrachteten Prozesses Tabelle nodes_edges in einem Array abspeichern Tabelle nodes_edges vom Array aktualisieren 13

15 Umsetzung Editor Funktion Probleme und Lösungen Delete Löschen von IDs aus der Spalte children (kommagetrenntes Array) Pseudocode if children > 1 add "," at the start of string add "," at the end of string Beispiel 2,4,6,40,2,4,6,40,2,4,6,40, if ",searched_id," is in the string replace ",searched_id," with "," remove "," at the beginning and at the end,2,4,6,40,,2,6,40, 2,6,40 end else delete searched_id only one element delete this element 14

16 Umsetzung Webinterface Fokus auf SVG Alle HTML-Elemente on the top Nur signifikante Elemente anzeigen ToggleButton() Benutzerfreundlichkeit / Benutzerinteraktion Click Selektieren der Elemente Double Click Sichtwechsel Drag Knoten mit der Maus bewegen Mouseover Kurzbeschreibung (Tooltip) Dropdown-Listen Select / Multiselect Felder (Select2) 15

17 Umsetzung Webinterface Abbildung 19 Abbildung 20 Quelle: Abbildung 19 / Abbildung 20- selbsterstellt 16

18 Zusammenfassung Fazit Solide Grundlage für die Visualisierung der Projektmanagement-Prozesse Mehrere Sichten stehen zur Verfügung PM-Prozesse können gruppiert werden Über den Graphen kann navigiert werden PM-Prozesse sind editierbar Kritik Positionierung der Prozesse Verwendung von orthogonalen Linien für die Verbindungen 17

19 Zusammenfassung Ausblick Weitere Sichten generieren Wissensgebiete Outputs-Sicht (Baumstruktur) Mehrere Formen / Kantentypen definieren Kreise / Ellipsen Orthogonale Linien / Geraden Visuelle Effekte Ausblenden nicht relevanter Informationen Langsamer Sichtwechselverlauf Portable Offline-Version Nutzung der Web-Anwendung ohne Webserver 18

20 Live-Vorschau 19