Datenvisualisierung mit WebGL (Three.js)

download Datenvisualisierung mit WebGL (Three.js)

of 25

description

Interactive 3d-visualization of large dataset with HTML5. The project is based on Three.js and Neo4J.Video: http://youtu.be/R4H2B4HIJzoJS-Framework: https://github.com/davidpiegza/Graph-VisualizationWebApplication: https://github.com/davidpiegza/graphit

Transcript of Datenvisualisierung mit WebGL (Three.js)

Datenvisualisierung mit WebGL (Three.js)David Piegza @davidpiegza

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

Datenvisualisierung mit WebGL (Three.js)

Interaktive 3D-Visualisierung von groen Datenmengen mit HTML5

Masterthesis:

Projektvision Visualisierung von graphhnlichen Daten Facebook-Freunde / Freundesfreunde Referenzen in wissenschaftlichen Arbeiten Verlinkungen von Webseiten

(c) SPYLUV'S BLOG

(c) Sean Falconer

Projektidee JS-Framework fr Visualisierung vongraphhnlichen Daten (WebGL)

Interaktiv und Erweiterbar Verschieden Visualisierungen Verschiedene Layouts Graphdatenbank fr Daten

Aufbau

JS-Framework Graph-Visualisierung ausschlielich berJavaScript (modular aufgebaut) erweitert werden

Visualisierungen und Layouts knnen Einheitliche Schnittstelle zwischeneinzelnen Komponenten werden

JavaScript-Objekte knnen erweitert

JS-FrameworkModule

Graphstruktur Graphlayouts Graphdrawings

Graphstrukturvar 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 = {}; }

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

Graphdrawingsvar 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 Fr jeden Import wird ein Teilgraph erstellt Wurzelknoten referenziert auf alleimportiereten Graphen

Neo4jRoot 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/