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