Upload
michael-hackstein
View
577
Download
0
Embed Size (px)
DESCRIPTION
Ever used a graph database to store your data? Ever wondered if it is possible to administrate the data without the need to write update queries, but to have a nice visual interface that renders your graph and offers you interaction? In this talk i present a graph viewer interface built on top of ArangoDB and the challenges i had to solve during its creation.
Citation preview
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