I need to choose a small and efficient visualization library that supports force directed layout and works on majority of browsers including those on smart phones. Some visualization libraries are written with either Canvas or SVG in mind while some others are at a lower level and support both methods for rendering the graphs. I am considering both SVG and Canvas during my testing to see their potential. If you have ideas about how or why I should use one of there methods, please let me know.
Can I avoid both SVG and Canvas and create my visualization purely based on CSS and positioning of DOM elements? I came across a pure CSS line graph during my searching which makes me believe it may be possible to create the TallyTree graphs in that way. However, I am not willing to go down that road right now since the benefits are not clear to me and it may significantly limit how I could change the visualizations in future. For example I don’t know how I would be able to control curving of the edges of the graph.
I only need the force directed layout for now, so I was not very concerned about other aspect of these libraries. Below is a summary of what I found. I tested demos of these libraries on Firefox, Chromium and the native browser on my android phone which is a samsung galexy s running android 2.2. Unfortunately, SVG support on android was disabled in the webkit built until version 3.0. I would love to use SVG because of all its benefit, but I am not sure if that would be a good idea considering that there are still many Android 2.x devices out there.
Arborjs is well documented and focused entirely on force directed layout. It does not force any particular drawing method so I can use Canvas or SVG. There are a few examples demonstrating usage of Arborjs for instance a graph with 117 nodes. For the most part performance is reasonable however in this demo the graph takes a long time to balance, which may be intentional and fixable by tweaking parameters. The demos also worked on my android browser.
I heard about D3 from a few colleagues and I specially like their focus on data. I tried some of their force directed layout demos such as this one. D3, at least in the demos use SVG to render. I dont think it is heavily dependent on SVG since they are a low level library, it should be easy to render things to Canvas as well.
JIT is the only library I came across that has also incorporates simple zooming and panning to all its visualizations including the force directed layout. It requires a nicely formatted JSON as input which is cool. The only issue I found with it is that when you move the nodes in the graph, it does not seem to animate them back to original position — that is something I like to have since the original layout of the graph has significance.
A few other libraries/frameworks out there that support force directed layout:
- Processing which has been around for some time and is a mature visualization toolkit. However, for the purpose of this project I think processing may be overkill so I decided not to use it
- Springy is what we used in the first prototype of TallyTree and it relies on canvas. In that implementation we used Raphael to handle drawing of the curves and since Raphael renders as an SVG element into the browser I was not able to see it on my old mobile phone
- I came across another canvas based layout that surprisingly worked well on my phone, but it is build with canvas in mind so it would probably be difficult to use SVG to render the visualization — but I am not sure yet
Almost all of the libraries I looked at above seem like a good fit and have their own advantages. I need to have an starting point and I like it to be something minimal and flexible that is under active development. I am going to start implementation of TallyTree with Arborjs and if any blockers appear along the way I may fall back to any other one of these libraries.
If you have any suggestions or comments please let me know!