Recommended
More Related Content
What's hot
What's hot (20)
Similar to Visualize your graph database
Similar to Visualize your graph database (20)
Recently uploaded
Recently uploaded (20)
Visualize your graph database
- 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
- 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