Joe Parry
Seeing Graphs
How to successfully visualize connected
data
Agenda
• The graph design process
• Interaction models
• Why animate?
• Strategies for visualizing larger networks
• A reference architecture
GRAPH MODELLING
+ Data Visualisation
= Graph Visualisation
Why use the graph data model?
Data models are generally interchangeable, but
each have their own strengths in certain.
The graph data model is good for…
• Social interactions
• Dependency management
• Organizational structures
• Connectivity of systems
• Biological processes
• Financial transactions
• Communications
• http://keylines.com/why
Good in what sense?
Graph models answer questions:
• what depends on what
• how do things flow
• where are the risks
• impact analysis
A quick clarification…
In any data, there is not ‘one graph’. Any single
data set can be modelled in many different ways:
Perhaps more suitable for
understanding social networks?
Probably a more accurate picture
of how email sending works
Graph Modelling
+ DATA VISUALISATION
= Graph Visualisation
Data is invisible
To be seen, data must be
VISUALLY ENCODED
There are many different options for
encoding data
We need to understand which works best for
our audience
Fortunately, people have already researched
the most accurate encoding methods…
Quantitative Ordinal Nominal
More Accurate
Less Accurate
Quantitative Ordinal Nominal
Position Position Position
Length Density Hue
Angle Saturation Density
Slope Hue Saturation
Area Length Shape
Density Angle Length
Saturation Slope Angle
Hue Area Slope
Shape Shape Area
Visual encoding by data type
Data visualisation is a
DESIGN PROCESS
Graph Modelling
+ Data Visualisation
= GRAPH VISUALISATION
There are several design
options for graph visualisation
Matrix
• All nodes have a column & a row
• A dot is put in the middle if a link exists
• Good for finding clusters
• But requires a lot of cross referencing to
understand the details
Edge bundling
• Nodes are around the edge
• Links between the nodes are bundled to
show patterns
• Detail can become spread out
• Computationally difficult to create
Hive plots
Hive Plots
• Nodes are grouped into categories
• Links between nodes are added
• This can help display huge networks
with a lessened ‘hairball’ effect
• But generally Hive Plots are less intuitive
Classic node-link diagram
• Intuitive
• Easy to understand
• The most ‘successful’ option
for conveying data
INTERACTIONS
Why is interaction needed?
• The user needs to drive their own focus
• Allows the user to see details on demand
• Allows the user to add or remove bits of
the graph
Interactions users expect
• Zooming
• Multiple node selection
• Hover and tooltip events
• Context menus
• Gestures & tablet support
• Expand on demand
• Searching
• Commands
ANIMATION
Why animate?
• Users expect it
• It provides smoother transitions:
– eases context switching for users
– Allows them to keep a mental model
• Animations
– can show data
– can show dynamics
STRATEGIES FOR LARGER
NETWORKS
Beyond a certain size, no automatic layout
will help you decipher a graph
Your options include:
1. Use color
2. Use filters
3. Allow users to expand
4. Link & Node aggregation
REFERENCE ARCHITECTURE
Graph Database
Neo4j
Web Server
Reference Architecture
Document Store
Search Index
User Authentication
(eg Active Directory)
Chart Store
http://keylines.com/architecture
Cambridge Intelligence
Start-up, founded May 2011
We make network visualisation tools
(big data projects, fraud, security services)
All demos made with
info@keylines.com
Questions?
Contact Information

More Related Content

PDF
Visualizing NoSQL databases as networks
PDF
Supercharged graph visualization for cyber security
PPTX
Visualizing the neo4j graph database with key lines
PDF
Dynamic networks
PPTX
Bringing Networks to Life Using Visualization for User Engagement
PPTX
NDC Minnesota 2019 - Fundamentals of Azure IoT
PDF
Google Cloud infrastructure in Conrad Connect by Google & waylay
PDF
Data visualization in JavaScript
Visualizing NoSQL databases as networks
Supercharged graph visualization for cyber security
Visualizing the neo4j graph database with key lines
Dynamic networks
Bringing Networks to Life Using Visualization for User Engagement
NDC Minnesota 2019 - Fundamentals of Azure IoT
Google Cloud infrastructure in Conrad Connect by Google & waylay
Data visualization in JavaScript

What's hot (20)

PPTX
SMAC
PDF
EENA2019: Track2 session2 _Emergency Management : an approach to real time ma...
PPTX
Iot & security automation-by Er. Nashet Ali
PDF
20 Latest Computer Science Seminar Topics on Emerging Technologies
PDF
Go real-time with the InternetOfThings
PDF
Developing io t applications in the fog a distributed dataflow approach
PDF
May 2013 Federal Cloud Computing Summit Presentation
PDF
Startup Bootcamp - Intro to NoSQL/Big Data by DataZone
PDF
A Unified Semantic Engine for Internet of Things and Smart Cities: From Senso...
PDF
Enrich Machine-to-Machine Data with Semantic Web Technologies for Cross-Domai...
PDF
FIWARE Global Summit - Big Data and Machine Learning with FIWARE
PPTX
Innovation in the public sector
PDF
May 2013 Federal Cloud Computing Summit Welcome by Dr. David McClure
PDF
2014.11 meetup presentation v1
PDF
IoT in the Cloud: Build & Unleash the Value in your Renewable Energy System
PPTX
Cloud of things (IoT + Cloud Computing)
PDF
Assisting IoT Projects and Developers in Designing Interoperable Semantic Web...
PPT
Web Based presentation tools
PDF
The Evolution of Everything (EvE) and Genetic Programming
PPTX
About AI
SMAC
EENA2019: Track2 session2 _Emergency Management : an approach to real time ma...
Iot & security automation-by Er. Nashet Ali
20 Latest Computer Science Seminar Topics on Emerging Technologies
Go real-time with the InternetOfThings
Developing io t applications in the fog a distributed dataflow approach
May 2013 Federal Cloud Computing Summit Presentation
Startup Bootcamp - Intro to NoSQL/Big Data by DataZone
A Unified Semantic Engine for Internet of Things and Smart Cities: From Senso...
Enrich Machine-to-Machine Data with Semantic Web Technologies for Cross-Domai...
FIWARE Global Summit - Big Data and Machine Learning with FIWARE
Innovation in the public sector
May 2013 Federal Cloud Computing Summit Welcome by Dr. David McClure
2014.11 meetup presentation v1
IoT in the Cloud: Build & Unleash the Value in your Renewable Energy System
Cloud of things (IoT + Cloud Computing)
Assisting IoT Projects and Developers in Designing Interoperable Semantic Web...
Web Based presentation tools
The Evolution of Everything (EvE) and Genetic Programming
About AI
Ad

Similar to Seeing Graphs - How to successfully visualize connected data (20)

PPT
Big Data & Graphs in Rome
PPTX
DV-Unit-4.pptxfgfgsfgsfgsdfgsdfsdfgfdgfgf
PDF
Big Data Visualization
PDF
II-SDV 2014 Network Visualisation - unpicking the knot ( Cambridge Intelligen...
PPTX
Data Structure Graph DMZ #DMZone
PDF
GraphTech Ecosystem - part 3: Graph Visualization
PPTX
Network graphs n’at
PDF
Leverage graph technologies to discover hidden insights in your EHS & Sustain...
PPT
PPTX
Frontiers of Computational Journalism week 8 - Visualization and Network Anal...
PPT
10. Graph Databases
PDF
The Graph Abstract Data Type-DATA STRUCTURE.pdf
PDF
Data visualisationsummit 2013
PPTX
PDF
Meaningful User Experience
PDF
Managing Connected Big Data in Art with Neo4j Graph Database - Lorenzo Speran...
DOCX
Final_Paper_Revision
PPTX
Apache Spark GraphX highlights.
PPTX
Uml structural diagrams
Big Data & Graphs in Rome
DV-Unit-4.pptxfgfgsfgsfgsdfgsdfsdfgfdgfgf
Big Data Visualization
II-SDV 2014 Network Visualisation - unpicking the knot ( Cambridge Intelligen...
Data Structure Graph DMZ #DMZone
GraphTech Ecosystem - part 3: Graph Visualization
Network graphs n’at
Leverage graph technologies to discover hidden insights in your EHS & Sustain...
Frontiers of Computational Journalism week 8 - Visualization and Network Anal...
10. Graph Databases
The Graph Abstract Data Type-DATA STRUCTURE.pdf
Data visualisationsummit 2013
Meaningful User Experience
Managing Connected Big Data in Art with Neo4j Graph Database - Lorenzo Speran...
Final_Paper_Revision
Apache Spark GraphX highlights.
Uml structural diagrams
Ad

Seeing Graphs - How to successfully visualize connected data

  • 1. Joe Parry Seeing Graphs How to successfully visualize connected data
  • 2. Agenda • The graph design process • Interaction models • Why animate? • Strategies for visualizing larger networks • A reference architecture
  • 3. GRAPH MODELLING + Data Visualisation = Graph Visualisation
  • 4. Why use the graph data model? Data models are generally interchangeable, but each have their own strengths in certain. The graph data model is good for…
  • 5. • Social interactions • Dependency management • Organizational structures • Connectivity of systems • Biological processes • Financial transactions • Communications • http://keylines.com/why
  • 6. Good in what sense? Graph models answer questions: • what depends on what • how do things flow • where are the risks • impact analysis
  • 7. A quick clarification… In any data, there is not ‘one graph’. Any single data set can be modelled in many different ways: Perhaps more suitable for understanding social networks? Probably a more accurate picture of how email sending works
  • 8. Graph Modelling + DATA VISUALISATION = Graph Visualisation
  • 9. Data is invisible To be seen, data must be VISUALLY ENCODED
  • 10. There are many different options for encoding data We need to understand which works best for our audience Fortunately, people have already researched the most accurate encoding methods…
  • 11. Quantitative Ordinal Nominal More Accurate Less Accurate Quantitative Ordinal Nominal Position Position Position Length Density Hue Angle Saturation Density Slope Hue Saturation Area Length Shape Density Angle Length Saturation Slope Angle Hue Area Slope Shape Shape Area Visual encoding by data type
  • 12. Data visualisation is a DESIGN PROCESS
  • 13. Graph Modelling + Data Visualisation = GRAPH VISUALISATION
  • 14. There are several design options for graph visualisation
  • 15. Matrix • All nodes have a column & a row • A dot is put in the middle if a link exists • Good for finding clusters • But requires a lot of cross referencing to understand the details
  • 16. Edge bundling • Nodes are around the edge • Links between the nodes are bundled to show patterns • Detail can become spread out • Computationally difficult to create
  • 17. Hive plots Hive Plots • Nodes are grouped into categories • Links between nodes are added • This can help display huge networks with a lessened ‘hairball’ effect • But generally Hive Plots are less intuitive
  • 18. Classic node-link diagram • Intuitive • Easy to understand • The most ‘successful’ option for conveying data
  • 20. Why is interaction needed? • The user needs to drive their own focus • Allows the user to see details on demand • Allows the user to add or remove bits of the graph
  • 21. Interactions users expect • Zooming • Multiple node selection • Hover and tooltip events • Context menus • Gestures & tablet support • Expand on demand • Searching • Commands
  • 23. Why animate? • Users expect it • It provides smoother transitions: – eases context switching for users – Allows them to keep a mental model • Animations – can show data – can show dynamics
  • 25. Beyond a certain size, no automatic layout will help you decipher a graph Your options include:
  • 28. 3. Allow users to expand
  • 29. 4. Link & Node aggregation
  • 31. Graph Database Neo4j Web Server Reference Architecture Document Store Search Index User Authentication (eg Active Directory) Chart Store http://keylines.com/architecture
  • 32. Cambridge Intelligence Start-up, founded May 2011 We make network visualisation tools (big data projects, fraud, security services)
  • 33. All demos made with [email protected] Questions? Contact Information