CSS Zend Garden
KingCrunchs kleine WeltHow to Visualize Graphs in Your Web-Application (InfoVis and JSViz)
I had to visualize some simple directed (acyclic and cyclic) graphs in one of the projects I am currently working on. If you google for packages that will help you to visualize graphs, you will probably find at least two JavaScript packages: JSViz and InfoVis. In this post I would like to share my experience with these two packages with you.
Both packages are open source packages. You may download them directly from the JSViz and InfoVis homepage.
Running Exmaple
The running example I will use is the representation of parameters in an online game which influence each other. This game is being developed for and with schools in Austria, Italy and Slovenia. The basic idea behind the game is that pupils will create their own virtual living environment. This environment is being described using a set of parameters like ‘Jobs’, ‘Industry’, ‘Agriculture’ and so on. If you invest resources in a parameter this will not only increase or decrease the corresponding parameter, but also other parameters connected with this parameter. For instance, if you invest in ‘Industry’ this will have a positive impact on ‘Jobs’ but a negative impact on ‘Agriculture’.
JSViz
JSViz is a small but powerful JavaScript package that will enable you to draw interactive graphs using SVG or HTML on you website. It actually was very easy to adop the examples to my needs. The graph itself (nodes and edges) may be described in a simple XML file. I used HTML rendering, which basically means that you create a <div> tag (or any other HTML tag) for each node. This has the big advantage that it is very easy to use your favorite JavaScript package like Dojo or JQuery to add other effects, e.g. a simple onMouseOver() effect.
Example I: The first example I implemented uses only text divs to depict parameters. Red and Green “lines” are used to depict a positive (green) or negative (red) impact. The thicker the line, the higher the impact. Nodes can be dragged and dropped on the screen. You may have a look at this example here.
If you are using Internet Explorer 8 you probably just found out the biggest disadvantage of JSViz: it does not support IE8 :-(. I tried to post this issue on the JSViz project homepage. However, this projects currently seems to hibernate. Beside that, I could not find any manual or API documentation except the code itself (which is okay as the code is pretty straight forward).
InfoVis
Compared to JSViz, InfoVis is a big package. InfoVis is much more than a simple package to depict graphs. You may use InfoViz to draw bar charts, pie charts, sunbursts and so on. Moreover, InfoVis comes with a set of fancy animations. Just have a look at the sunburst demo of a file system visualization.
Beside the fact that InfoVis is very powerful, it also supports all modern browsers. Furthermore, the API is documented (although the documentation isn’t perfect it is quite useful and a good starting point). Graphs are created using a JSON object which should make it quite easy to load a graph using AJAX.
Example II: Here is what I did to demonstrate a simple graph visualization using a force directed graph. This example uses the same data as example I.
Example III: for the Hypertree example I had to use a bigger data set. In this example, you may click on a node description to zoom into the graph.
More interesting stuff regarding InfoVis may be found on Nicolas Belmonte’s blog. @Nicolas: keep up the great work!
Have fun! ;-)
No related posts.
Great information! I’ve been looking for something like this for a while now. Thanks!
I just signed up to your blogs rss feed. Will you post more on this subject?
Actually, I used this tool for a project which has been finished a few weeks ago. So, unless I need something like this in another project, I’ll probably not going to write more posts on this subject. However: Never say never ;-)