Date post: | 29-Aug-2014 |
Category: |
Technology |
Upload: | michael-hackstein |
View: | 575 times |
Download: | 0 times |
Visualize your Graph Database !
Techniques to view, explore and modify your graph data with !
�1
Michael Hackstein @mchacki
Michael Hackstein
‣ ArangoDB Core Team
‣ ArangoDB Web Frontend & Graph visualisation
‣ Organiser of cologne-js
The Task
‣ Create an administration interface for a graph database
‣ Render the graphs
‣ Modify the data
‣ Any graph should be allowed
���3
Technology Stack
���4
BackendFrontend
REST API
Everything Free & Open Source
D3.js
‣ Bind arbitrary Data to DOM-Objects
‣ Data triggers functions to modify DOM
‣ Based on web-standards (HTML, SVG, CSS)
‣ Especially useful for <SVG>
‣ Easily create Charts and Graphs
‣ Ships with several layout implementations
���5
ArangoDB
‣ Multi-Model NoSQL Database
‣ Convenient querying
‣ Extendable through JS & MRuby
‣ Highly performant & space efficient
‣ Foxx Framework to create APIs
‣ Store Graphs natively
‣ Traversal Querying
‣ REST-API
���6
Challenges
‣ Graph structure not known beforehand
‣ Graph may be large
‣ Limited amount of screen space
‣ Should be readable
‣ Interaction should be possible
‣ CRUD Operations
‣ Graph Exploration
���7
‣ Force-Directed Layout
‣ No requirements for the rendered graph
‣ Iterative Layout
‣ O(n2) each iteration
‣ Only small nr. of vertices
Graph Layout
���8
repulsion repulsion
attraction
Exploration Naive Approach
‣ Cluster complete graph
‣ Display clusters
‣ User can zoom in
‣ Display cluster content
!!
‣ Disadvantages
‣ Requires knowledge of complete graph
‣ Reclustering required on data changes
���9
Stepwise refinement
Exploration Better Approach
���10
Stepwise exploration
‣ User selects start vertex
‣ Display direct neighbors
‣ Click on vertex adds neighbors to the graph
‣ Graph starts small scale
‣ will grow over time
!
‣ Disadvantages
‣ Display of complete graph is lost
Vertex Grouping
!
!
!
!
!
!
!
!
1. Group vertices by similar attributes
2. Layout each group separately
3. Treat each group as a single large vertex
4. Layout group-vertices
���11
Fish-Eye Distortion
!
!
!
!
!
!
‣ Mouse-Pointer is the focus
‣ Magnify vertices close to the focus
‣ Minimise vertices far away from the focus
!
‣ Many vertices can be shown
‣ Each is selectable
���12
Demo
���13
DEMO TIME
Thanks
‣ Thank you for your attention
!
‣ If you like my talk follow me on twitter / github:
!
!
‣ or take a look at the awesome projects i presented:
���14
@mchacki
http://d3js.org !
http://www.arangodb.org