We’re not that far. Not at all. I was actually going to write some completion percentage, but I think I’ll just leave that as a mystery and surprise you when the time comes. But until then… some videos from the 2.0 world!
Animated TreeMaps
In order to show some of the new features I’ve been writing a simple example with TreeMap animations. TreeMap animations are integrated into the built-in classes of the Toolkit, but you can also create your own animations by altering either built-in Node/Edge params, or also canvas specific styles like shadows.
Here’s a short video of an Animated TreeMap, it also has animations when switching layouts. I think it’s better seen in fullscreen.
Zooming and Panning
The new Event system allows many customizations, such as Dragging and Dropping nodes, (right)clicking native Canvas nodes, etc. This will be the subject of a longer post, since there is a lot of machinery involving Native Canvas, SVG and HTML events, event delegation, etc. I’ve also been working in making a modular Canvas class enabling canvas background extensions.
Some of these changes had some desirable effects, such as enabling Panning and Zooming in a generic way, across all visualizations, as can be seen in this video:
A Force Directed Example
These features can be combined into useful and interesting examples. This Force Directed example uses the new Event system, zooming, panning and animations to make a complete graph editing tool. These are some of the graph interactions that can be made with the JavaScript InfoVis Toolkit (also better seen in fullscreen):
I hope you liked it. I know I’m having a great time working in this project.
I’ll be back with more updates.
Hello there, I'm Nicolas Garcia Belmonte, a Computer Science Engineer from the Buenos Aires Institute of Technology, in Argentina. I live in France now.
The examples look very nice, especially the last two ones. I hope you get the work done soon as i am going to adapt the features for a wrapper in gwt
Very interesting Great job !!
When you release it ??
@Jan Uhlmann: @atOm: I will release it shortly, I can’t say more, it’d ruin the surprise!
These look amazing.
I noticed this is under the BSD license. Are you not affiliated with the rgraph.net project? Because I notice they have an actual fee for code reuse and wasn’t sure if the naming was just a coincidence.
Not at all, actually, the RGraph visualization in the JavaScript InfoVis Toolkit doesn’t even exist in the rgraph.net library. The name is just a coincidence :S . I’ve never been good with names (the project is abbr. the “JIT” also :S ).
These examples look great. I’m especially interested in development of the force-directed layout.
Do you have plans to create such a layout with a spring algorithm, so that there are as few crossing edges as possible?
I’m thinking of TouchGraph or SpringGraph as examples that function the way I have in mind; I believe these use the Fruchterman-Reingold algorithm.
I’m currently using a Force-Directed from a paper I read (which I don’t remember its name anymore), but I know the algorithm is far too simplistic. I know there are other algos that exist which are far better, but currently I’m focused in packaging and writing documentation. It’s been a while since I last made a release and I think that it would be nice if I had something to show in the near future
But I’m planning in implementing a better FD algo in the near future
Cheer ^^
Being curious: As you treat “in the next version also Nodes and Edges as separate entities”: Will it be possible to *label* edges?
Cheers
Frithjof
Hi,
Unfortunately this is something I have to implement but isn’t in the scope of 2.0.0. The “features” I was going to add are closed by now.
At the Google Group you can find workarounds that have been discussed for this and I will probably be adding this as a feature in the next minor versions (perhaps 2.0.1?). You can always file an issue or feature request here: http://github.com/philogb/jit/issues/ and I will try to add it when I have some time
Hi,
thanks for the clarifying answer!
Frithjof
There’s some interesting force-directed layouts written in JavaScript implemented by Kyle Scholz at:
http://www.kylescholz.com/blog/2006/06/force_directed_graphs_in_javas.html
This was done back in 2006; if you expand the examples link, you’ll see that the layouts appear to be spring-based. Example three demonstrates best what I have in mind.
Awesome!
I have a suggestion for the animated treemap: also animate loading different datasets. Similar to the (flash-based) treemap here:
http://www.drasticdata.nl/DrasticTreemapGApi/index.html
@Jack Hotchkiss: All ForceDirected layouts should behave similarly. The FD layout implemented in the toolkit would show the same results as the example 3 for that dataset. The problem is that that dataset is a very small one, and also a tree(!) not a graph, so making non-crossing edges is trivial. Actually some of the examples I made with the FD layout in the JIT with trees show non-crossing edges. I’d like to see that FD layout with more nodes, say 50, and also for non strict trees, but for more general graph structures.
@Michiel: cool! that kind of behavior is already built in the toolkit since the TreeMap implements all Graph.Op methods, like morphing and adding/removing nodes with animations