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:
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)
Shows only a part of the graph (so called fish eye) and let them zoom in and out
Let users edit the data
Let users select the Relationship types (like it is in [http://www.visualdataweb.org/gfacet/gfacet.php])
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:
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:
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:
VivaGraphJS [https://github.com/anvaka/VivaGraphJS
Anton: I have not tried it except for HelloWorld example and I judge more from its demos and descriptions. What I like is that it is highly customizable, fast and supports zooming. We can easily add text editors inside nodes to let users edit the data and send this info via data binding (Coffescript lib batman.js may be the best option for data binding purposes) to the server. Any linked data we have may fit, I think. May be entries editing may also be interesting here (if we let edit Data Entries and add relations from graph, but of course it is of a low priority for us)
SigmaJS [http://sigmajs.org/] Figure out how the add and remove everything on the fly and establish a hello world.
D3 [http://d3js.org/]
Comment on This Data Unit