ofnodesandedges.com

Introducing sigma.js

alexis.jacomy@gmail.com (Alexis Jacomy) — Thu, 22 Mar 2012 00:00:00 PDT

I just released sigma.js, a JavaScript graph drawing library. It has been developed from my experience with SiGMa for Flash, but with big changes to make it more fluid and scalable.

I learned to manipulate and explore graphs with Gephi, which is definitely user-oriented, and I just wanted to design a tool that makes possible to use the same graphs on the Web.

A lot of examples are available in this page, and here is a sample:

The main update

SiGMa’s paradigm was to draw everything all the time : “if it goes laggy, well, no surprise, it will be laggy all the time”. When I decided to write a new version in JavaScript, it was useless to continue that way. Indeed, having a freezing JS script running will make the whole page navigation freezing, which is not acceptable.

So, using Linkfluence and especially Antonin Rohmer experience, I started to write sigma.js such as it is possible to draw nodes and/or edges and/or labels pseudo-asynchronously. More precisely, it is possible to inject frames while drawing a layer. That makes possible to draw pretty large graphs without freezing the browser. You can take a deeper look at the code here.

What is left to do

My main motivation while developing sigma.js was to be able one day to manipulate and explore a graph on a tactile support (drag and drop, two fingers rotations, Minority Report styled interfaces…). I do not have any tactile support to test yet, but I still expect to implement these features soon.

The other features to come will depend on users, if there are any.

Alternatives

I have seen a lot of great tools to draw graph recently, some more customizable and with better APIs than sigma.js:

GraphGL is a great library using Three.js and WebGL to draw graphs
d3.js is an amazing tool to manipulate data, and includes features to draw graphs with SVG
gexf.js is another great tool for Gephi users to expose their works on the web – with a built-in interface that makes it really friendly to use

Thanks

Finally, it took me awhile to design the API, thanks to Mathieu Jacomy for his help, since he kind of started using sigma.js before I even started to decide anything about what had to be public, and tweaked the whole code, making me aware of which features he wanted to see available.

SiGMa-client demo

alexis.jacomy@gmail.com (Alexis Jacomy) — Thu, 06 Oct 2011 00:00:00 PDT

I just added on this blog a demo of SiGMa-client, with some HTML interface to activate the different features already accessible from JavaScript. I will continue to add on this demo the new SiGMa-client features along its development. Also, these features are described more precisely in SiGMa-client’s wiki.

The demo is here.

Feel free to tell me if you see any missing feature or is you meet any issue!

First SiGMa generic client release

alexis.jacomy@gmail.com (Alexis Jacomy) — Mon, 19 Sep 2011 00:00:00 PDT

I just finished a first version of the generic SiGMa Flash client, my graph visualization web application. Since the release of Stargit some months ago, I wanted to write a generic version of the Stargit client, fed from JavaScript, and configured with a simple JSON file, the main goal is to make it usable in custom applications without having to compile in Flash Builder.

How to use it

There are three ways to interact with SiGMa:

First, it is possible to set most of the initial display settings, like the default nodes color, edges color labels font, and much more.
Also, it is possible to add callbacks on specific user actions. Currently, the implemented ones are ‘onClickNodes’, ‘onOverNodes’ and ‘onReady’ (called when SiGMa ended its loading/initialization).
Finally, a lot of SiGMa’s methods can be directly called from JavaScript.

The initial settings and the callbacks are set by the user in a JSON config file, while SiGMa’s methods are (or will be) all described in the documentation.

Example

I wrote back in JavaScript the AS3 code from my last post to generate a random graph (just added the orphan nodes removal). Then, I wrote a function, ‘feedSiGMa()’ to give the graph to SiGMa:

Also, I just modified some initial settings (colors and font), and added my three callbacks in my config file. So, SiGMa will call ‘feedSiGMa()’ after its loading, and everytime you click the button. The callbacks on mouse interaction with the nodes just display the node IDs in the console of your browser:

About the HTML code, SiGMa, as any other Flash application, can be embed with the ‘object’ and ‘embed’ tags:

Finally, here is the result (if nothing is displayed or if the graph does not move, try clicking the button):

I started documenting more precisely the different methods and initial parameters available in the wiki. And of course, don’t hesitate to use it, give a feedback or report issues!

Experimenting Jangaroo with SiGMa

alexis.jacomy@gmail.com (Alexis Jacomy) — Sat, 10 Sep 2011 00:00:00 PDT

I just tried Jangaroo to obtain quickly a Flash-less version of SiGMa.

How to compile SiGMa-core with Jangaroo

Install JDK
Install Maven 3
Follow the Jangaroo tutorial to become familiar with it (eventually get more familiar with Jangaroo)
Clone SiGMa-core repository and copy SiGMa-core/src/com/ into src/main/joo/
Create a file Main.as inside src/main/joo/ and write your code
Create a file index.html inside src/main/webapp/ and write your HTML file

My use example

I started back from the most basic example at SiGMa-core README page, modified the code to create a random graph of N nodes and M edges, and then started the ForceAtlas 2 algorithm.

Here is the src/main/joo/Main.as file:

Result

And here is the result:

I did not go further than this simple example. Jangaroo is still missing some classes and features (especially about the TextFields management, Vectors, etc…), but there is a lot of interesting things about it:

Most classes from the AS3 ‘flash’ package are already implemented
The transformation seems pretty smart (the TextFields are transformed into span tags, the Graphics are transformed into canvas tags)
The generated JavaScript sources look pretty readable
The whole project is open-source (Apache license), and seems to be actively maintained

So, since the strong/weak spots are not the same with Flash compilation and Jangaroo compilation, and since the TextFields are not supported as well with both technologies, I do not think that Jangaroo is the best solution to port AS3 sources to JS without trouble.

But still, it looks pretty great, the examples work really well, and Jangaroo might be a really good and promising answer to develop Flash-less Web applications without having to throw your whole AS3 sources away.

StarGit

alexis.jacomy@gmail.com (Alexis Jacomy) — Mon, 20 Jun 2011 00:00:00 PDT

I write some graph visualization tools for around two years now, and I missed several occasions to work fully on a specific case – most of the time because the tools I had with me at the time did not fit exactly to the dataset. But that time I have been luckier: I was finishing a first version of my new SiGMa core, when I wanted some data to play with. I found the @psychemedia’s Friendviz (Twitter network visualized with Protovis), and tried to feed my graph visualization core with Web APIs.

Especially, I played with Github API, and I showed it to a colleague, Franck, who made at linkfluence last year a really nice visualization of the followers network of Github. So, I showed my prototype to him, and he told me that he was actually not only reprocessing Github’s data to do a new visualization, but also that he was looking for an interactive way to explore his results. Here is how we started to work on StarGit.

I will focus here on the choices we made about ergonomy and interface. If you are interested about the data or the server-side technologies, you should take a look at Franck’s blog post about StarGit.

What we wanted:

The goal was to make possible for a Github user to see his ego-centered network, like with InMaps for LinkedIn users. Since Franck is an active user of Github (which is not my case, I’ve never contributed to any project), he wanted to observe how programmers do collaborate with others, instead of the social network side of Github. So, lot of users will not appear on Stargit (including me, actually). But at the same time, that makes most of the networks definitely smaller than if it was followers networks, and made possible to use a client-side graph managment, instead of a server-side application that processes the networks, like with InMaps.

The graph:

It was not that easy to obtain for each user a graph that is significant, and also not to big to be well processed by the client application. Even with only the collaborations in the network, some “super-users” were still making some networks totally unbalanced. And also, lot of users do not have enough connections to make the graph interesting.

So, to make the networks relevant to watch:

We include the frontiers in the graphs. So basically, a user will find his neighbors and their neighbors in his network.
To avoid the “star effect” (if I have a neighbor who has 1000 neighbors I don’t care about, they will look like a huge star on my network, which is not what I want), we remove all the leaves (nodes with only one neighbor).
We blacklisted the 100 biggest users, until we find a way to integrate them in the networks relevantly.

The interface:

The best Web interfaces I know to explore networks are most about visualizing a map (like the excellent linkfluence maps interface, or the recent Flashless Raphael Velt’s maps interface). The network has already its shape, users zoom and move the map like with Google Maps, and a caption is here to explain what mean the different graphic components (nodes sizes, nodes colors, etc).

At the same time, I personally enjoy playing with Gephi and chosing what I want to see in my graphs. For example, in Stargit, I mean that the user might like to see by himself if his nearest neighbors share his main programming language, or his country, or a specific project…

So, here is how works Stargit interface:

An input field is at the same time the title of the network, and one way to change the network, by writing another user’s login.
The nodes color and size are defined by two different comboboxes, and the user can chose what he wants to see in the network.
When the user rolls the mouse over a node, the main information about this node (avatar, website, country, etc) will be displayed at the bottom-middle of the screen.
When a user clicks on a node, it will display the network centered on this node.

About the layout algorithm, I implemented in SiGMa with a little help from my brother his fresh new ForceAtlas2, also available in Gephi (with a nice blog post about it). I will tell more about this new SiGMa core in a later post. The sources of the Flash project are available here.

Here it is, I hope you will enjoy browsing this huge and so much interesting database that is Github, with Stargit!

Blog update

alexis.jacomy@gmail.com (Alexis Jacomy) — Sun, 19 Jun 2011 00:00:00 PDT

Hi! Here is the fresh new version of OfNodesAndEdges.com, my blog about graph visualization, back on stage! I did not have the time to migrate the old posts, I will try to do that as soon as possible.