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

    View Slide

  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.

    View Slide

  3. Graph Visualization Is Hard!
    A Short Introduction
    to Graphs

    View Slide

  4. Graph Visualization Is Hard!
    ONE NODE
    1

    View Slide

  5. Graph Visualization Is Hard!
    1 2
    TWO NODES

    View Slide

  6. Graph Visualization Is Hard!
    1 2
    AN EDGE

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  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

    View Slide

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

    View Slide

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

    View Slide

  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

    View Slide

  14. Graph Visualization Is Hard!
    GRAPH > NETWORK > TREE

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  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!

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  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)

    View Slide

  25. Graph Visualization Is Hard!
    Trying to visualize
    the data

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  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.

    View Slide

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

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  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.

    View Slide

  36. Graph Visualization Is Hard!

    View Slide

  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.

    View Slide

  38. Graph Visualization Is Hard!

    View Slide

  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.

    View Slide

  40. Graph Visualization Is Hard!
    Interactive Graph Exploration

    View Slide

  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.

    View Slide

  42. Graph Visualization Is Hard!
    Revealicious, 2005

    View Slide

  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.

    View Slide

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

    View Slide

  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.

    View Slide

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

    View Slide

  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.

    View Slide

  48. Graph Visualization Is Hard!
    MaMairie, 2014

    View Slide

  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.

    View Slide

  50. Graph Visualization Is Hard!
    Tools

    View Slide

  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.

    View Slide

  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.

    View Slide

  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.

    View Slide

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

    View Slide

  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.

    View Slide

  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.

    View Slide

  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.

    View Slide

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

    View Slide