Skip to main content

Better force-directed graph visualization

Published onJan 27, 2021
Better force-directed graph visualization

In visualizing knowledge as connected nodes, force directed graphs can be useful to visualize connections and overall complexity. Usually these visualizations are done in 2D, but with the advent of 3D web frameworks, it may be possible to leverage the extra dimension to add some visual clarity to the structure of these networks.

This VR navigable 3D network organizes nodes in 3D space, but has no key or additional data.

However, when datasets are incredibly large, it can be easy to get lost in the complexity of the overall dataset. Additionally, the location and orientation of these nodes don’t always correspond to semantic similarity.

I propose a front-end javascript visualization tool based on force directed graphs that has a few features to facilitate navigation between nodes. For the thought exercise in this prototype, let’s consider a visualization tool that helps explore papers.

Show multimedia information about selected nodes

The first is a selected overlay. When a node is selected, it should divulge the information it contains either over the visualization, or to the side. For the purpose of this prototype, it will be an HTML snippet that contains text and multimedia like an abstract, list of keywords, publishing metadata, and images. Rendering arbitrary HTML is important because it will allow for an additional place to render a custom interface regarding this node.

Selectively display and organize adjacent nodes

The second is selective saliency of adjacent nodes. The user should be able to choose which type of child nodes can be pushed to the foreground and be selectable. The other types will be pushed away from the user. For example, a user could select “Author” and a list of author nodes would come the foreground and “cited papers” would be pushed to the background. Tertiary connections would be increasingly translucent in order to communicate the complexity of the network and inspire further exploration without inhibiting clarity. Camera movement should keep the selected node in the center.

I also believe translucency and ambient movement may be able to provide more information. Could links and nodes traversed by many users be more opaque and bright? Could nodes with dissimilar semantic information be further away?


Interlay ideas

Sources + underlays

  • Catalog of visualizations + tools, including 3D + more

  • Catalog of sample datasets widely used to demonstrate them

  • Common tools (dbs, viz) that generate relevant graph output

Queries to answer, affordances

  • How can I visualize a large graph I care about?

  • What existing open tools can I adapt to a new purpose?

  • How can I compare different viz approaches applied to my graph?

  • To what extent do different topics converge?

Audiences + overlays

  • Use 3D well. Show current 2D visuals in a greyed-out way

  • Communites around catalogs (graphcommons)

  • Analysis of topics in a discussion or debate

No comments here
Why not start the discussion?