Visualize your graph database

Visualize your graph database

• 1.
  Visualize your GraphDatabase ! Techniques to view, explore and modify your graph data with ! Michael Hackstein @mchacki 1
• 2.
  Michael Hackstein ‣ ArangoDBCore Team ‣ ArangoDB Web Frontend & Graph visualisation ‣ Organiser of cologne-js
• 3.
  The Task ‣ Createan 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 EverythingFree Open Source 4
• 5.
  D3.js ‣ Bind arbitraryData 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 NoSQLDatabase ‣ 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 structurenot 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-DirectedLayout ‣ 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. Groupvertices 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-Pointeris 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 youfor 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