Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Graph Visualization Is Hard!

sebastien
September 22, 2014

Graph Visualization Is Hard!

A 15min presentation on graph visualization made for VisMtl #2 in September 2014.

sebastien

September 22, 2014
Tweet

More Decks by sebastien

Other Decks in Design

Transcript

  1. Graph Visualization Is Hard! FFunction Graph Visualization Is Hard! Sébastien

    Pierre MTLVIS #2 Montréal, September 22nd 2014
  2. Graph Visualization Is Hard! About this presentation For beginners &

    experts This presentation is designed to be accessible to anyone interested in dataviz. You'll learn the basics, discover some tools and hopefully learn something new, whatever your level of expertise. Sharing Impressions I've become more and more interested in graph visualization, and wanted to share my impressions about what makes it a difficult (but very interesting) data visualization topic.
  3. Graph Visualization Is Hard! A Short Introduction to Graphs

  4. Graph Visualization Is Hard! ONE NODE 1

  5. Graph Visualization Is Hard! 1 2 TWO NODES

  6. Graph Visualization Is Hard! 1 2 AN EDGE

  7. Graph Visualization Is Hard! 1 2 A GRAPH (LINK)

  8. Graph Visualization Is Hard! 1 2 A DIRECTED GRAPH

  9. Graph Visualization Is Hard! 1 2 ANOTHER GRAPH 3 4

  10. Graph Visualization Is Hard! 1 2 WHICH IS ALSO A

    TREE (in a tree, each node has only one or no parent) 3 4
  11. Graph Visualization Is Hard! 1 2 THIS ONE IS NOT

    A TREE ANYMORE (nodes 2-3-4 form a cycle) 3 4
  12. Graph Visualization Is Hard! 1 2 BUT IS A NETWORK

    (ie. there is always a path between any two nodes) 3 4
  13. Graph Visualization Is Hard! 1 2 THIS IS NOT A

    NETWORK ANYMORE (ie. it is not possible to go from 1 to 2) 3 4
  14. Graph Visualization Is Hard! GRAPH > NETWORK > TREE

  15. Graph Visualization Is Hard! Valdis Krebs, http://orgnet.com Graphs are used

    to map organizations
  16. Graph Visualization Is Hard! Graphs are used to map social

    networks
  17. Graph Visualization Is Hard! Graphs are used to map knowledge

  18. Graph Visualization Is Hard! Context Collective Mind Mapping I animated

    a workshop in August 2014, where participants were invited to collectively create concept maps on the theme of “Smart City”. Using a simple methodology, the resulting hand- drawn maps can be converted to CSV files and later visualized. Experimenting with these relatively small datasets reminded me of how challenging graph visualization can be!
  19. Graph Visualization Is Hard! . Summer Participatory IT Workshop, “Defining

    the Smart City, together” 2014
  20. Graph Visualization Is Hard! . Summer Participatory IT Workshop, “Defining

    the Smart City, together” 2014 1
  21. Graph Visualization Is Hard! . Summer Participatory IT Workshop, “Defining

    the Smart City, together” 2014 1 2
  22. Graph Visualization Is Hard! . Summer Participatory IT Workshop, “Defining

    the Smart City, together” 2014 1 3 2
  23. Graph Visualization Is Hard! . Summer Participatory IT Workshop, “Defining

    the Smart City, together” 2014 1 3 2 4
  24. Graph Visualization Is Hard! Extracting Data CSV File Each node

    has a number, which allows to represent both the structure of the graph and the order in which the nodes were created. Format Each row represents a node with the following information: - INDEX - LABEL - PARENT(S) INDEX(ES)
  25. Graph Visualization Is Hard! Trying to visualize the data

  26. Graph Visualization Is Hard! First visualization attempt [random placement +

    force layout]
  27. Graph Visualization Is Hard! Iteration 2 [ring placement]

  28. Graph Visualization Is Hard! Iteration 3 [ring placement, bubble packing

    layout]
  29. Graph Visualization Is Hard! Using Sigma.js [Atlas-2 layout]

  30. Graph Visualization Is Hard! Using Sigma.js [Atlas-2 layout] Each run

    of the algorithm will yield a different graph, ie. there is no determinism. Each run of the algorithm will yield a different graph, ie. there is no determinism.
  31. Graph Visualization Is Hard! Using Graphviz [neato, no overlap]

  32. Graph Visualization Is Hard! Using D3 [force-directed layout] Smart City

    Pipe Dreams Agency Surveillance Humans Data Homogeneity Dysfonctional Systems Resistance Politics Trapped Engagement Bureaucracy Apathy Control Efficiency Buildings Algorithms Coordinated Transport Shared Knowledge Technocracy Database Sustainable Life Entanglement Care Ownership Options Situated Learning Events
  33. Graph Visualization Is Hard! Gephi [Fruchterman-Reingold layout] Smart City Pipe

    Dreams Agency Surveillance Humans Data Homogeneity Dysfonctional Systems Resistance Politics Trapped Engagement Bureaucracy Apathy Control Efficiency Buildings Algorithms Coordinated Transport Shared Knowledge Technocracy Database Sustainable Life Entanglement Care Ownership Options Situated Learning Events
  34. Graph Visualization Is Hard! Gephi [Yifan Hu layout] Smart City

    Pipe Dreams Agency Surveillance Humans Data Homogeneity Dysfonctional Systems Resistance Politics Trapped Engagement Bureaucracy Apathy Control Efficiency Buildings Algorithms Coordinated Transport Shared Knowledge Technocracy Database Sustainable Life Entanglement Care Ownership Options Situated Learning Events
  35. Graph Visualization Is Hard! Layout is key The layout defines

    how your graph looks like. As such, it is the main way to make sense of & communicate the data.
  36. Graph Visualization Is Hard!

  37. Graph Visualization Is Hard! Structure should be apparent The layout

    should also make structure more visible. If all nodes are displayed too regularily, it becomes hard to read the graph. When clusters & levels are apparent, the data's intrinsic structure becomes visible.
  38. Graph Visualization Is Hard!

  39. Graph Visualization Is Hard! Determinism is desirable Many layout algorithms

    use a random factor to initially position the nodes, which results in the same graph having a very large number of possible forms.
  40. Graph Visualization Is Hard! Interactive Graph Exploration

  41. Graph Visualization Is Hard! Context From Experience Pretty much each

    time I had to visualize a graph, I found the interaction to be as challenging as the layout. I'll show a couple of projects I've worked on that illustrate different ways of navigating through a graph.
  42. Graph Visualization Is Hard! Revealicious, 2005

  43. Graph Visualization Is Hard! Takeaway Exploring by Focus Point In

    Revalicious, the graph is always represented relatively to a focus point (the currenlty selected node). This saves from having to represent the graph in its entirety, which would be quite difficult in this case given the large number of interconnections.
  44. Graph Visualization Is Hard! National Geographic Explorerhttp://sebastienpierre.ca/files/vismtl-2/ngs-explorers.webms, 2011

  45. Graph Visualization Is Hard! Takeaway Don't Display Everything In National

    Geographic Explorers, we couldn't display the whole graph because of overlap and screen resolution. We used interactivity to reveal and relayout the graph as you go deeper in the different branches. The layout is semi-deterministic, in the sense that the relayout of a sub-graph depends on the current layout of the graph.
  46. Graph Visualization Is Hard! From Bench Thttp://sebastienpierre.ca/files/vismtl-2/benchtoclinic.webmo Clinic, 2012

  47. Graph Visualization Is Hard! Takeaway Graphs Are Maps In Bench

    to Clinic, the graph (which is close to a GANTT chart) is laid out entirely, and can be explored by panning and zooming, just like you would do with an on-line map. In this case the semantics of zooming were different, as only time would strech or contract. The nodes' and timeline mutually adapt to each other ensuring that there is enough space to draw the nodes and have a time step as even as possible.
  48. Graph Visualization Is Hard! MaMairie, 2014

  49. Graph Visualization Is Hard! Takeaway Path & Context In MaMairie

    we found that displaying the whole organizational diagram was overwhelming. Instead, we chose to only represent the current pah of organizations and institutions that link the citizen to the city. We gave up the overview to reduce the complexity of discovering the structure.
  50. Graph Visualization Is Hard! Tools

  51. Graph Visualization Is Hard! Gephi Popular Gephi is quite popular

    and is often used to generate static graph visualizations. It offers a good range of layouts and works well on large graphs. Data-Driven Gephi puts the focus on working with tabular data, as well as import/export to CSV & GraphML. Clunky Interface & Poor Interaction Created by researchers & engineers, Gephi's interface is not a model of simplicity. The biggest drawback is that is the discrepancy between the graph editing and the graph preview as well as the time to render the graph.
  52. Graph Visualization Is Hard! yEd Amazing Layouts Oddly enough, yEd

    seem less known than Gephi, but is offers similar features, with a wider selection of parameterable layouts and a much better user interface. It is a great tool to get started with a graph data. WYSIWYG No rendering is required, everything is displayed in realtime. You can actually use it to draw UML graphs & flowcharts. Great Graph Exploration yED works really well for exploring a graph, as you can have instant information on each node (including a nice neighborhood preview) but also calculate numerical properties easily.
  53. Graph Visualization Is Hard! NetworkX Python Library NetworkX is not

    an interactive tool, but a library that allows to programmatically create and manipulate graphs. It is best when you're dealing with large graphs or a series of similar graphs to compare. Analysis & Algorithms NetworkX implements a lot of classic graph algorithms, which allow to manipulate them at a large scale. Some Layouts A couple of layouts are offered for quick visualization, but yEd or Gephi are better at that.
  54. Graph Visualization Is Hard! Some thoughts to conclude...

  55. Graph Visualization Is Hard! . Implicit Information Drawing a graph

    by hand is a complex task, where the information needs to fit the physical space of the paper sheet. The process of positioning nodes and drawing edges captures more than just the information to be mapped. The decisions made to position nodes is likely to take into considration some form of implicit grouping / clustering, putting elements that are related close together.
  56. Graph Visualization Is Hard! . Custom layout algorithm I find

    that the best way to get started with creating a new layout for a graph is by doing it manually, step-by-step using representative data. You'll quickly get insights about the structure of the data and have a feel of the different operations to perform.
  57. Graph Visualization Is Hard! . Don't depend on tools, create

    your own! Graph layout has such a dramatic effect on the result that I find that you shouldn't be limiting yourself to ready-made layouts. Tools such as yEd or Gephi are really great to understand the data in the first place. Use them as a starting point and get insights into the data, and improve on your findings to create the layout that will best reveal the information hidden in the data.
  58. Graph Visualization Is Hard! Thanks! Graph Visualization Is Hard! Sébastien

    Pierre sebastien@ffctn.com www.ffctn.com