Graph Visualization Libraries

Created on Feb. 12, 2013, 11:43 p.m. by Anonymous & updated by antonkulaga on May 2, 2013, 4:44 p.m. Hevok on May 2, 2013, 4:44 p.m. Anonymous on May 2, 2013, 4:44 p.m.

Denigma needs to choose highly scalable graph layout libraries to represent data and enable to edit Content graphically and dynamically.

There are a lot of alternative options which need to be evaluated to choose appropriate for specific purposes.

What we need is a Graph Visualization Demo that can be shown to others to attract them to Denigma.

What need to make in two weeks a prototype that supports the following:

  1. Will get data from Denigma that is organized as graphs (we have to decide from what data to start but I think we have a lot of linked data there)

  2. Shows only a part of the graph (so called fish eye) and let them zoom in and out

  3. Let users edit the data

  4. Let users select the Relationship types (like it is in [])

Possible solution may be choosing directed-layout JavaScript lib and add some extra features on top of it.

There is different kind of data that need to be visualized as graph in Denigma.

If it is easier to add and remove nodes on the fly we can use such a libary in different parts of Denigma, even as an alternative interface for entry viewing and editing.

It might be required to show different levels of details (especially when showing different hierarchy levels form Organisms down to molecular processes).

We need to be able to represent nodes with other shapes and even with images.

We should add HTML components to nodes to let users edit them, but we may hide them when users are moving the graph for performance reasons.

What we need most of all are labels for graph nodes, they must be visible all the time. For other things, we may show HTML elements here and there and expand nodes when user stopped the graph and /or hovered the mouse on one of the elements.

The following need to be test:

  1. Feed the lib with data, how easy is it and how looks it like
  2. Remove and adding nodes on the fly and seeing how the graph is being restructured
  3. Check how labels can be added and changed
  4. Check how easy to change the shape and Content of separate nodes and react on users action (i.e. hover mouse over the node, drag, and drop the node, etc.)

In some graph libs the size of the node is not taken into account for layout so they do well for small dots but for rectangles with text you get nodes overlaying each other. Data Units are rectangles with texts. Some of them with only labels and some (those that are expanded by the user) with some additional elements.

Another important thing is the ability to work with edges, to highlight the edges of chosen nodes and to react on mouse that is over the node.

Not all graph layout libs provide us easy API for such tasks (they let us see mouse over nodes, change their styles but forget to provide similar API for edges).

As Links are also Data Units, they shall be editable too. Although this is not always true, because sometimes we don not need properties on the links (e.g. hierarchies). So we can perhaps employ different library for such special cases where node attributes are not so important.

We need to:

  1. Get mouse events from Links. Let user click them or react when mouse is over them,
  2. Change link style on the fly, if the user chooses the node we must change the style of all incoming and outgoing edges from it to highlight its connections.

It is not to hard to overlay the node with some custom HTML when knowing its position, but it is hard for the link as we need to know its beginning and end position and have the ability to change the line style for it. If the lib provides such API we can code the rest.

Specification for both graph lib testing and prototype need to be created.

Here is a list of libs to consider:


Tags: graphs, visualization
Categories: Quest
Parent: Graph Visualization

Update entry (Admin) | See changes

Comment on This Data Unit