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.
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!
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)
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.
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
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
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
sebastien
juliantruitt
uxaustralia
greensmile
manuchat
freee
momo555
ozontech
tomorrow56
nutionbypersol
yuyaink
chriscoyier
cromwellryan
mclloyd
productmarketing
speakerdeck
jonyablonski
sferik
morganepeng
iamctodd
maggiecrowley
jonrohan
deanohume