Tweet
Tweet

Slide 1

Slide 1 text

Graph Visualization Is Hard! FFunction Graph Visualization Is Hard! Sébastien Pierre MTLVIS #2 Montréal, September 22nd 2014

Slide 2

Slide 2 text

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.

Slide 3

Slide 3 text

Graph Visualization Is Hard! A Short Introduction to Graphs

Slide 4

Slide 4 text

Graph Visualization Is Hard! ONE NODE 1

Slide 5

Slide 5 text

Graph Visualization Is Hard! 1 2 TWO NODES

Slide 6

Slide 6 text

Graph Visualization Is Hard! 1 2 AN EDGE

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

Graph Visualization Is Hard! 1 2 A DIRECTED GRAPH

Slide 9

Slide 9 text

Graph Visualization Is Hard! 1 2 ANOTHER GRAPH 3 4

Slide 10

Slide 10 text

Graph Visualization Is Hard! 1 2 WHICH IS ALSO A TREE (in a tree, each node has only one or no parent) 3 4

Slide 11

Slide 11 text

Graph Visualization Is Hard! 1 2 THIS ONE IS NOT A TREE ANYMORE (nodes 2-3-4 form a cycle) 3 4

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

Graph Visualization Is Hard! GRAPH > NETWORK > TREE

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

Graph Visualization Is Hard! Graphs are used to map social networks

Slide 17

Slide 17 text

Graph Visualization Is Hard! Graphs are used to map knowledge

Slide 18

Slide 18 text

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!

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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)

Slide 25

Slide 25 text

Graph Visualization Is Hard! Trying to visualize the data

Slide 26

Slide 26 text

Graph Visualization Is Hard! First visualization attempt [random placement + force layout]

Slide 27

Slide 27 text

Graph Visualization Is Hard! Iteration 2 [ring placement]

Slide 28

Slide 28 text

Graph Visualization Is Hard! Iteration 3 [ring placement, bubble packing layout]

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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.

Slide 31

Slide 31 text

Graph Visualization Is Hard! Using Graphviz [neato, no overlap]

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

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.

Slide 36

Slide 36 text

Graph Visualization Is Hard!

Slide 37

Slide 37 text

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.

Slide 38

Slide 38 text

Graph Visualization Is Hard!

Slide 39

Slide 39 text

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.

Slide 40

Slide 40 text

Graph Visualization Is Hard! Interactive Graph Exploration

Slide 41

Slide 41 text

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.

Slide 42

Slide 42 text

Graph Visualization Is Hard! Revealicious, 2005

Slide 43

Slide 43 text

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.

Slide 44

Slide 44 text

Graph Visualization Is Hard! National Geographic Explorerhttp://sebastienpierre.ca/files/vismtl-2/ngs-explorers.webms, 2011

Slide 45

Slide 45 text

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.

Slide 46

Slide 46 text

Graph Visualization Is Hard! From Bench Thttp://sebastienpierre.ca/files/vismtl-2/benchtoclinic.webmo Clinic, 2012

Slide 47

Slide 47 text

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.

Slide 48

Slide 48 text

Graph Visualization Is Hard! MaMairie, 2014

Slide 49

Slide 49 text

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.

Slide 50

Slide 50 text

Graph Visualization Is Hard! Tools

Slide 51

Slide 51 text

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.

Slide 52

Slide 52 text

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.

Slide 53

Slide 53 text

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.

Slide 54

Slide 54 text

Graph Visualization Is Hard! Some thoughts to conclude...

Slide 55

Slide 55 text

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.

Slide 56

Slide 56 text

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.

Slide 57

Slide 57 text

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.

Slide 58

Slide 58 text

Graph Visualization Is Hard! Thanks! Graph Visualization Is Hard! Sébastien Pierre [email protected] www.ffctn.com