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