SlideShare a Scribd company logo
1 of 14
Download to read offline
Visualize your Graph Database
!
Techniques to view, explore and modify your graph data with
!

Michael Hackstein
@mchacki
1
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
Frontend

Backend

REST API

Everything Free  Open Source
4
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
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
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
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
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

DEMO
TIME
13
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

More Related Content

What's hot

01 nosql and multi model database
01   nosql and multi model database01   nosql and multi model database
01 nosql and multi model databaseMahdi Atawneh
 
Rapid API Development ArangoDB Foxx
Rapid API Development ArangoDB FoxxRapid API Development ArangoDB Foxx
Rapid API Development ArangoDB FoxxMichael Hackstein
 
Extensible Database APIs and their role in Software Architecture
Extensible Database APIs and their role in Software ArchitectureExtensible Database APIs and their role in Software Architecture
Extensible Database APIs and their role in Software ArchitectureMax Neunhöffer
 
Comparison with storing data using NoSQL(CouchDB) and a relational database.
Comparison with storing data using NoSQL(CouchDB) and a relational database.Comparison with storing data using NoSQL(CouchDB) and a relational database.
Comparison with storing data using NoSQL(CouchDB) and a relational database.eross77
 
Scaling ArangoDB on Mesosphere DCOS
Scaling ArangoDB on Mesosphere DCOSScaling ArangoDB on Mesosphere DCOS
Scaling ArangoDB on Mesosphere DCOSMax Neunhöffer
 
MongoDB + Pylons FTW: Scalable Web apps with Python & NoSQL
MongoDB + Pylons FTW: Scalable Web apps with Python & NoSQLMongoDB + Pylons FTW: Scalable Web apps with Python & NoSQL
MongoDB + Pylons FTW: Scalable Web apps with Python & NoSQLniallo
 
Introduction to couchdb
Introduction to couchdbIntroduction to couchdb
Introduction to couchdbiammutex
 
Rupy2012 ArangoDB Workshop Part1
Rupy2012 ArangoDB Workshop Part1Rupy2012 ArangoDB Workshop Part1
Rupy2012 ArangoDB Workshop Part1ArangoDB Database
 
The Basics of MongoDB
The Basics of MongoDBThe Basics of MongoDB
The Basics of MongoDBvaluebound
 
BUILDING WEB APPS WITH ASP.NET MVC AND NOSQL
BUILDING WEB APPS WITH ASP.NET MVC AND NOSQLBUILDING WEB APPS WITH ASP.NET MVC AND NOSQL
BUILDING WEB APPS WITH ASP.NET MVC AND NOSQLMichael Kennedy
 
CBDW2014 - NoSQL Development With Couchbase and ColdFusion (CFML)
CBDW2014 - NoSQL Development With Couchbase and ColdFusion (CFML)CBDW2014 - NoSQL Development With Couchbase and ColdFusion (CFML)
CBDW2014 - NoSQL Development With Couchbase and ColdFusion (CFML)Ortus Solutions, Corp
 
ITB2016 - NoSQL with mongodb and ColdFusion (CFML)
ITB2016 - NoSQL with mongodb and ColdFusion (CFML)ITB2016 - NoSQL with mongodb and ColdFusion (CFML)
ITB2016 - NoSQL with mongodb and ColdFusion (CFML)Ortus Solutions, Corp
 

What's hot (20)

01 nosql and multi model database
01   nosql and multi model database01   nosql and multi model database
01 nosql and multi model database
 
Rapid API Development ArangoDB Foxx
Rapid API Development ArangoDB FoxxRapid API Development ArangoDB Foxx
Rapid API Development ArangoDB Foxx
 
Extensible Database APIs and their role in Software Architecture
Extensible Database APIs and their role in Software ArchitectureExtensible Database APIs and their role in Software Architecture
Extensible Database APIs and their role in Software Architecture
 
CouchDB
CouchDBCouchDB
CouchDB
 
Comparison with storing data using NoSQL(CouchDB) and a relational database.
Comparison with storing data using NoSQL(CouchDB) and a relational database.Comparison with storing data using NoSQL(CouchDB) and a relational database.
Comparison with storing data using NoSQL(CouchDB) and a relational database.
 
Scaling ArangoDB on Mesosphere DCOS
Scaling ArangoDB on Mesosphere DCOSScaling ArangoDB on Mesosphere DCOS
Scaling ArangoDB on Mesosphere DCOS
 
MongoDB + Pylons FTW: Scalable Web apps with Python & NoSQL
MongoDB + Pylons FTW: Scalable Web apps with Python & NoSQLMongoDB + Pylons FTW: Scalable Web apps with Python & NoSQL
MongoDB + Pylons FTW: Scalable Web apps with Python & NoSQL
 
Redis IU
Redis IURedis IU
Redis IU
 
Taming NoSQL with Spring Data
Taming NoSQL with Spring DataTaming NoSQL with Spring Data
Taming NoSQL with Spring Data
 
CouchDB introduction
CouchDB introductionCouchDB introduction
CouchDB introduction
 
Introduction to couchdb
Introduction to couchdbIntroduction to couchdb
Introduction to couchdb
 
Apache CouchDB
Apache CouchDBApache CouchDB
Apache CouchDB
 
Rupy2012 ArangoDB Workshop Part1
Rupy2012 ArangoDB Workshop Part1Rupy2012 ArangoDB Workshop Part1
Rupy2012 ArangoDB Workshop Part1
 
Couch db
Couch dbCouch db
Couch db
 
The Basics of MongoDB
The Basics of MongoDBThe Basics of MongoDB
The Basics of MongoDB
 
Using MRuby in a database
Using MRuby in a databaseUsing MRuby in a database
Using MRuby in a database
 
BUILDING WEB APPS WITH ASP.NET MVC AND NOSQL
BUILDING WEB APPS WITH ASP.NET MVC AND NOSQLBUILDING WEB APPS WITH ASP.NET MVC AND NOSQL
BUILDING WEB APPS WITH ASP.NET MVC AND NOSQL
 
CBDW2014 - NoSQL Development With Couchbase and ColdFusion (CFML)
CBDW2014 - NoSQL Development With Couchbase and ColdFusion (CFML)CBDW2014 - NoSQL Development With Couchbase and ColdFusion (CFML)
CBDW2014 - NoSQL Development With Couchbase and ColdFusion (CFML)
 
ITB2016 - NoSQL with mongodb and ColdFusion (CFML)
ITB2016 - NoSQL with mongodb and ColdFusion (CFML)ITB2016 - NoSQL with mongodb and ColdFusion (CFML)
ITB2016 - NoSQL with mongodb and ColdFusion (CFML)
 
Lokijs
LokijsLokijs
Lokijs
 

Similar to Visualize your graph database

DojoX GFX Keynote Eugene Lazutkin SVG Open 2007
DojoX GFX Keynote Eugene Lazutkin SVG Open 2007DojoX GFX Keynote Eugene Lazutkin SVG Open 2007
DojoX GFX Keynote Eugene Lazutkin SVG Open 2007Eugene Lazutkin
 
The 5 Layers of Web Accessibility
The 5 Layers of Web AccessibilityThe 5 Layers of Web Accessibility
The 5 Layers of Web AccessibilityDirk Ginader
 
Beyond the Standards
Beyond the StandardsBeyond the Standards
Beyond the StandardsPaul Bakaus
 
Geoscience For Gis A
Geoscience For Gis AGeoscience For Gis A
Geoscience For Gis AAndrew Zolnai
 
ScribeUI: La productivité avec MapServer
ScribeUI: La productivité avec MapServerScribeUI: La productivité avec MapServer
ScribeUI: La productivité avec MapServerVisionGEOMATIQUE2014
 
Angels versus demons: balancing shiny and inclusive
Angels versus demons: balancing shiny and inclusiveAngels versus demons: balancing shiny and inclusive
Angels versus demons: balancing shiny and inclusiveChris Mills
 
Add Some Awesome-Sauce
Add Some Awesome-SauceAdd Some Awesome-Sauce
Add Some Awesome-Saucedavist11
 
Web 2 0 Data Visualization With Jsf
Web 2 0 Data Visualization With JsfWeb 2 0 Data Visualization With Jsf
Web 2 0 Data Visualization With Jsfrajivmordani
 
The Fast And The Fabulous
The Fast And The FabulousThe Fast And The Fabulous
The Fast And The FabulousNicole Sullivan
 
GraphQL vs. (the) REST
GraphQL vs. (the) RESTGraphQL vs. (the) REST
GraphQL vs. (the) RESTcoliquio GmbH
 
Building a JavaScript Module Framework at Gilt
Building a JavaScript Module Framework at GiltBuilding a JavaScript Module Framework at Gilt
Building a JavaScript Module Framework at GiltEric Shepherd
 
Modern Webdevelopment With Ruby On Rails
Modern Webdevelopment With Ruby On RailsModern Webdevelopment With Ruby On Rails
Modern Webdevelopment With Ruby On RailsRobert Glaser
 
Android app to the challenge
Android   app to the challengeAndroid   app to the challenge
Android app to the challengeUdi Cohen
 
Accessible Javascript with and without WAI ARIA
Accessible Javascript with and without WAI ARIAAccessible Javascript with and without WAI ARIA
Accessible Javascript with and without WAI ARIADirk Ginader
 
Accelerated grid theming using NineSixty (Drupal Design Camp Boston 2009)
Accelerated grid theming using NineSixty (Drupal Design Camp Boston 2009)Accelerated grid theming using NineSixty (Drupal Design Camp Boston 2009)
Accelerated grid theming using NineSixty (Drupal Design Camp Boston 2009)Four Kitchens
 
Unobtrusive Javascript - SD.rb 2007
Unobtrusive Javascript - SD.rb 2007Unobtrusive Javascript - SD.rb 2007
Unobtrusive Javascript - SD.rb 2007matta
 
Front End Sadness to Happiness: The React on Rails Story
Front End Sadness to Happiness: The React on Rails StoryFront End Sadness to Happiness: The React on Rails Story
Front End Sadness to Happiness: The React on Rails StoryJustin Gordon
 
Web enabling your survey business ppt version
Web enabling your survey business ppt versionWeb enabling your survey business ppt version
Web enabling your survey business ppt versionrudy_stricklan
 
Mapping in Drupal 7 using OpenLayers
Mapping in Drupal 7 using OpenLayersMapping in Drupal 7 using OpenLayers
Mapping in Drupal 7 using OpenLayersPeter Vanhee
 

Similar to Visualize your graph database (20)

DojoX GFX Keynote Eugene Lazutkin SVG Open 2007
DojoX GFX Keynote Eugene Lazutkin SVG Open 2007DojoX GFX Keynote Eugene Lazutkin SVG Open 2007
DojoX GFX Keynote Eugene Lazutkin SVG Open 2007
 
The 5 Layers of Web Accessibility
The 5 Layers of Web AccessibilityThe 5 Layers of Web Accessibility
The 5 Layers of Web Accessibility
 
Beyond the Standards
Beyond the StandardsBeyond the Standards
Beyond the Standards
 
Geoscience For Gis A
Geoscience For Gis AGeoscience For Gis A
Geoscience For Gis A
 
ScribeUI: La productivité avec MapServer
ScribeUI: La productivité avec MapServerScribeUI: La productivité avec MapServer
ScribeUI: La productivité avec MapServer
 
Angels versus demons: balancing shiny and inclusive
Angels versus demons: balancing shiny and inclusiveAngels versus demons: balancing shiny and inclusive
Angels versus demons: balancing shiny and inclusive
 
Add Some Awesome-Sauce
Add Some Awesome-SauceAdd Some Awesome-Sauce
Add Some Awesome-Sauce
 
73 Less Fugly Epicenter
73 Less Fugly   Epicenter73 Less Fugly   Epicenter
73 Less Fugly Epicenter
 
Web 2 0 Data Visualization With Jsf
Web 2 0 Data Visualization With JsfWeb 2 0 Data Visualization With Jsf
Web 2 0 Data Visualization With Jsf
 
The Fast And The Fabulous
The Fast And The FabulousThe Fast And The Fabulous
The Fast And The Fabulous
 
GraphQL vs. (the) REST
GraphQL vs. (the) RESTGraphQL vs. (the) REST
GraphQL vs. (the) REST
 
Building a JavaScript Module Framework at Gilt
Building a JavaScript Module Framework at GiltBuilding a JavaScript Module Framework at Gilt
Building a JavaScript Module Framework at Gilt
 
Modern Webdevelopment With Ruby On Rails
Modern Webdevelopment With Ruby On RailsModern Webdevelopment With Ruby On Rails
Modern Webdevelopment With Ruby On Rails
 
Android app to the challenge
Android   app to the challengeAndroid   app to the challenge
Android app to the challenge
 
Accessible Javascript with and without WAI ARIA
Accessible Javascript with and without WAI ARIAAccessible Javascript with and without WAI ARIA
Accessible Javascript with and without WAI ARIA
 
Accelerated grid theming using NineSixty (Drupal Design Camp Boston 2009)
Accelerated grid theming using NineSixty (Drupal Design Camp Boston 2009)Accelerated grid theming using NineSixty (Drupal Design Camp Boston 2009)
Accelerated grid theming using NineSixty (Drupal Design Camp Boston 2009)
 
Unobtrusive Javascript - SD.rb 2007
Unobtrusive Javascript - SD.rb 2007Unobtrusive Javascript - SD.rb 2007
Unobtrusive Javascript - SD.rb 2007
 
Front End Sadness to Happiness: The React on Rails Story
Front End Sadness to Happiness: The React on Rails StoryFront End Sadness to Happiness: The React on Rails Story
Front End Sadness to Happiness: The React on Rails Story
 
Web enabling your survey business ppt version
Web enabling your survey business ppt versionWeb enabling your survey business ppt version
Web enabling your survey business ppt version
 
Mapping in Drupal 7 using OpenLayers
Mapping in Drupal 7 using OpenLayersMapping in Drupal 7 using OpenLayers
Mapping in Drupal 7 using OpenLayers
 

Recently uploaded

TeamStation AI System Report LATAM IT Salaries 2024
TeamStation AI System Report LATAM IT Salaries 2024TeamStation AI System Report LATAM IT Salaries 2024
TeamStation AI System Report LATAM IT Salaries 2024Lonnie McRorey
 
DSPy a system for AI to Write Prompts and Do Fine Tuning
DSPy a system for AI to Write Prompts and Do Fine TuningDSPy a system for AI to Write Prompts and Do Fine Tuning
DSPy a system for AI to Write Prompts and Do Fine TuningLars Bell
 
Fact vs. Fiction: Autodetecting Hallucinations in LLMs
Fact vs. Fiction: Autodetecting Hallucinations in LLMsFact vs. Fiction: Autodetecting Hallucinations in LLMs
Fact vs. Fiction: Autodetecting Hallucinations in LLMsZilliz
 
[Webinar] SpiraTest - Setting New Standards in Quality Assurance
[Webinar] SpiraTest - Setting New Standards in Quality Assurance[Webinar] SpiraTest - Setting New Standards in Quality Assurance
[Webinar] SpiraTest - Setting New Standards in Quality AssuranceInflectra
 
The Ultimate Guide to Choosing WordPress Pros and Cons
The Ultimate Guide to Choosing WordPress Pros and ConsThe Ultimate Guide to Choosing WordPress Pros and Cons
The Ultimate Guide to Choosing WordPress Pros and ConsPixlogix Infotech
 
Testing tools and AI - ideas what to try with some tool examples
Testing tools and AI - ideas what to try with some tool examplesTesting tools and AI - ideas what to try with some tool examples
Testing tools and AI - ideas what to try with some tool examplesKari Kakkonen
 
What is DBT - The Ultimate Data Build Tool.pdf
What is DBT - The Ultimate Data Build Tool.pdfWhat is DBT - The Ultimate Data Build Tool.pdf
What is DBT - The Ultimate Data Build Tool.pdfMounikaPolabathina
 
Ensuring Technical Readiness For Copilot in Microsoft 365
Ensuring Technical Readiness For Copilot in Microsoft 365Ensuring Technical Readiness For Copilot in Microsoft 365
Ensuring Technical Readiness For Copilot in Microsoft 3652toLead Limited
 
TrustArc Webinar - How to Build Consumer Trust Through Data Privacy
TrustArc Webinar - How to Build Consumer Trust Through Data PrivacyTrustArc Webinar - How to Build Consumer Trust Through Data Privacy
TrustArc Webinar - How to Build Consumer Trust Through Data PrivacyTrustArc
 
How AI, OpenAI, and ChatGPT impact business and software.
How AI, OpenAI, and ChatGPT impact business and software.How AI, OpenAI, and ChatGPT impact business and software.
How AI, OpenAI, and ChatGPT impact business and software.Curtis Poe
 
H2O.ai CEO/Founder: Sri Ambati Keynote at Wells Fargo Day
H2O.ai CEO/Founder: Sri Ambati Keynote at Wells Fargo DayH2O.ai CEO/Founder: Sri Ambati Keynote at Wells Fargo Day
H2O.ai CEO/Founder: Sri Ambati Keynote at Wells Fargo DaySri Ambati
 
What's New in Teams Calling, Meetings and Devices March 2024
What's New in Teams Calling, Meetings and Devices March 2024What's New in Teams Calling, Meetings and Devices March 2024
What's New in Teams Calling, Meetings and Devices March 2024Stephanie Beckett
 
New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024BookNet Canada
 
A Framework for Development in the AI Age
A Framework for Development in the AI AgeA Framework for Development in the AI Age
A Framework for Development in the AI AgeCprime
 
Decarbonising Buildings: Making a net-zero built environment a reality
Decarbonising Buildings: Making a net-zero built environment a realityDecarbonising Buildings: Making a net-zero built environment a reality
Decarbonising Buildings: Making a net-zero built environment a realityIES VE
 
Modern Roaming for Notes and Nomad – Cheaper Faster Better Stronger
Modern Roaming for Notes and Nomad – Cheaper Faster Better StrongerModern Roaming for Notes and Nomad – Cheaper Faster Better Stronger
Modern Roaming for Notes and Nomad – Cheaper Faster Better Strongerpanagenda
 
Sample pptx for embedding into website for demo
Sample pptx for embedding into website for demoSample pptx for embedding into website for demo
Sample pptx for embedding into website for demoHarshalMandlekar2
 
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024BookNet Canada
 
DevoxxFR 2024 Reproducible Builds with Apache Maven
DevoxxFR 2024 Reproducible Builds with Apache MavenDevoxxFR 2024 Reproducible Builds with Apache Maven
DevoxxFR 2024 Reproducible Builds with Apache MavenHervé Boutemy
 
Emixa Mendix Meetup 11 April 2024 about Mendix Native development
Emixa Mendix Meetup 11 April 2024 about Mendix Native developmentEmixa Mendix Meetup 11 April 2024 about Mendix Native development
Emixa Mendix Meetup 11 April 2024 about Mendix Native developmentPim van der Noll
 

Recently uploaded (20)

TeamStation AI System Report LATAM IT Salaries 2024
TeamStation AI System Report LATAM IT Salaries 2024TeamStation AI System Report LATAM IT Salaries 2024
TeamStation AI System Report LATAM IT Salaries 2024
 
DSPy a system for AI to Write Prompts and Do Fine Tuning
DSPy a system for AI to Write Prompts and Do Fine TuningDSPy a system for AI to Write Prompts and Do Fine Tuning
DSPy a system for AI to Write Prompts and Do Fine Tuning
 
Fact vs. Fiction: Autodetecting Hallucinations in LLMs
Fact vs. Fiction: Autodetecting Hallucinations in LLMsFact vs. Fiction: Autodetecting Hallucinations in LLMs
Fact vs. Fiction: Autodetecting Hallucinations in LLMs
 
[Webinar] SpiraTest - Setting New Standards in Quality Assurance
[Webinar] SpiraTest - Setting New Standards in Quality Assurance[Webinar] SpiraTest - Setting New Standards in Quality Assurance
[Webinar] SpiraTest - Setting New Standards in Quality Assurance
 
The Ultimate Guide to Choosing WordPress Pros and Cons
The Ultimate Guide to Choosing WordPress Pros and ConsThe Ultimate Guide to Choosing WordPress Pros and Cons
The Ultimate Guide to Choosing WordPress Pros and Cons
 
Testing tools and AI - ideas what to try with some tool examples
Testing tools and AI - ideas what to try with some tool examplesTesting tools and AI - ideas what to try with some tool examples
Testing tools and AI - ideas what to try with some tool examples
 
What is DBT - The Ultimate Data Build Tool.pdf
What is DBT - The Ultimate Data Build Tool.pdfWhat is DBT - The Ultimate Data Build Tool.pdf
What is DBT - The Ultimate Data Build Tool.pdf
 
Ensuring Technical Readiness For Copilot in Microsoft 365
Ensuring Technical Readiness For Copilot in Microsoft 365Ensuring Technical Readiness For Copilot in Microsoft 365
Ensuring Technical Readiness For Copilot in Microsoft 365
 
TrustArc Webinar - How to Build Consumer Trust Through Data Privacy
TrustArc Webinar - How to Build Consumer Trust Through Data PrivacyTrustArc Webinar - How to Build Consumer Trust Through Data Privacy
TrustArc Webinar - How to Build Consumer Trust Through Data Privacy
 
How AI, OpenAI, and ChatGPT impact business and software.
How AI, OpenAI, and ChatGPT impact business and software.How AI, OpenAI, and ChatGPT impact business and software.
How AI, OpenAI, and ChatGPT impact business and software.
 
H2O.ai CEO/Founder: Sri Ambati Keynote at Wells Fargo Day
H2O.ai CEO/Founder: Sri Ambati Keynote at Wells Fargo DayH2O.ai CEO/Founder: Sri Ambati Keynote at Wells Fargo Day
H2O.ai CEO/Founder: Sri Ambati Keynote at Wells Fargo Day
 
What's New in Teams Calling, Meetings and Devices March 2024
What's New in Teams Calling, Meetings and Devices March 2024What's New in Teams Calling, Meetings and Devices March 2024
What's New in Teams Calling, Meetings and Devices March 2024
 
New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
 
A Framework for Development in the AI Age
A Framework for Development in the AI AgeA Framework for Development in the AI Age
A Framework for Development in the AI Age
 
Decarbonising Buildings: Making a net-zero built environment a reality
Decarbonising Buildings: Making a net-zero built environment a realityDecarbonising Buildings: Making a net-zero built environment a reality
Decarbonising Buildings: Making a net-zero built environment a reality
 
Modern Roaming for Notes and Nomad – Cheaper Faster Better Stronger
Modern Roaming for Notes and Nomad – Cheaper Faster Better StrongerModern Roaming for Notes and Nomad – Cheaper Faster Better Stronger
Modern Roaming for Notes and Nomad – Cheaper Faster Better Stronger
 
Sample pptx for embedding into website for demo
Sample pptx for embedding into website for demoSample pptx for embedding into website for demo
Sample pptx for embedding into website for demo
 
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
 
DevoxxFR 2024 Reproducible Builds with Apache Maven
DevoxxFR 2024 Reproducible Builds with Apache MavenDevoxxFR 2024 Reproducible Builds with Apache Maven
DevoxxFR 2024 Reproducible Builds with Apache Maven
 
Emixa Mendix Meetup 11 April 2024 about Mendix Native development
Emixa Mendix Meetup 11 April 2024 about Mendix Native developmentEmixa Mendix Meetup 11 April 2024 about Mendix Native development
Emixa Mendix Meetup 11 April 2024 about Mendix Native development
 

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