Datenvisualisierung mit WebGL (Three.

js)
David Piegza @davidpiegza

David Piegza
Medieninformatik, HTW Berlin RoR Entwickler, WorkHub (www.workhub.com) Twitter: @davidpiegza GitHub: github.com/davidpiegza

Datenvisualisierung mit WebGL (Three.js)

“Interaktive 3D-Visualisierung von großen Datenmengen mit HTML5”

Masterthesis:

Projektvision
• Visualisierung von graphähnlichen Daten • Facebook-Freunde / Freundesfreunde • Referenzen in wissenschaftlichen Arbeiten • Verlinkungen von Webseiten

(c) SPYLUV'S BLOG

(c) Sean Falconer

Projektidee
• JS-Framework für Visualisierung von
graphähnlichen Daten (WebGL)

• Interaktiv und Erweiterbar • Verschieden Visualisierungen • Verschiedene Layouts • Graphdatenbank für Daten

Aufbau

JS-Framework
• Graph-Visualisierung ausschließlich über
JavaScript (modular aufgebaut) erweitert werden

• Visualisierungen und Layouts können • Einheitliche Schnittstelle zwischen
einzelnen Komponenten werden

• JavaScript-Objekte können erweitert

JS-Framework
Module

• Graphstruktur • Graphlayouts • Graphdrawings

Graphstruktur
var graph = new Graph({limit: 100}); var node1 = new Node(1); var node2 = new Node(2); graph.addNode( node1 ); graph.addNode( node2 ); graph.addEdge( node1, node2 ); // set maximum number of nodes, opt. // create nodes with id // add nodes // create edge between nodes

function Node(node_id) { this.id = node_id; this.nodesTo = []; this.nodesFrom = []; this.position = {}; this.data = {}; } function Edge(source, target) { this.source = source; this.target = target; this.data = {}; }

Graphlayouts
var Layout = Layout || {}; Layout.ForceDirected = function(graph, options) { this.init = function() { ... }; this.generate = function() { ... }; }

Graphdrawings
var Drawing = Drawing || {}; Drawing.SimpleGraph = function(options) { this.init = function() { ... }; // WebGL(-Framework) Implementierung }

Drawing.SphereGraph = function(options) { this.init = function() { ... }; // WebGL(-Framework) Implementierung }

GitHub

https://github.com/davidpiegza/GraphVisualization

Neo4j
• Import der Daten aus XML-Datei • Für jeden Import wird ein Teilgraph erstellt • Wurzelknoten referenziert auf alle
importiereten Graphen

Neo4j
Root Graph 1 Nodes Graph 2 Graph 3 Graph 4

Neo4j

https://github.com/davidpiegza/graphit

Links
• JS-Framework:
https://github.com/davidpiegza/GraphVisualization https://github.com/davidpiegza/graphit

• Web-Anwendung:

• https://github.com/mrdoob/three.js/ • http://www.khronos.org/webgl/ • http://neo4j.org/

Master your semester with Scribd & The New York Times

Special offer for students: Only $4.99/month.

Master your semester with Scribd & The New York Times

Cancel anytime.