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.

1. Visualize your Graph Database
!
Techniques to view, explore and modify your graph data with
!
Michael Hackstein
@mchacki
1

2. Michael Hackstein
‣ ArangoDB Core Team
‣ ArangoDB Web Frontend
& Graph visualisation
‣ Organiser of cologne-js

3. The Task
‣ Create an administration interface for a graph database
‣ Render the graphs
‣ Modify the data
‣ Any graph should be allowed
3

4. Technology Stack
Frontend
Backend
REST API
Everything Free Open Source
4

5. 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

6. 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

7. 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

8. Graph Layout
‣ Force-Directed Layout
‣ No requirements for the rendered graph
‣ Iterative Layout
‣ O(n2) each iteration
re
on
lsi
pu
pu
lsi
o
re
n
‣ Only small nr. of vertices
attraction
8

9. Exploration
Naive Approach
Stepwise refinement
‣ Cluster complete graph
‣ Display clusters
‣ User can zoom in
‣ Display cluster content
!
!
‣ Disadvantages
‣ Requires knowledge of complete graph
‣ Reclustering required on data changes
9

10. Exploration
Better Approach
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
10

11. 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

12. 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

13. Demo
DEMO
TIME
13

14. Thanks
‣ Thank you for your attention
!
‣ If you like my talk follow me on twitter / github:
!
!
@mchacki
‣ or take a look at the awesome projects i presented:
http://d3js.org
!
http://www.arangodb.org
14