Sigma.js Cleans up Hairball Network Visualizations
It’s creator, Alexis Jacomy, has really pushed the practice of network visualization forward with this tool. He has combined elements of existing examples in new ways that seem to work better together. Especially worth noting are the ‘hide node‘ and ‘fish-eye‘ examples.
His hard work really pays off in the speed and responsiveness of the tool. The quick interactions, snappy hover events, fast loading data and quick drawing graph all combine to make the user feel more in control of the network itself. And since it runs in the browser with JS it can be used on almost any site. The library has already been used to visualize Facebook connections in the Russian SSM community and Wikipedia co-editing patterns.
Interestingly, Santiago Ortiz developed a network visualization of data driven resources that uses a lot of the same principles. I think it’s worth noting the differences between this tool and Sigma.js. The fish-eye effect is quite extreme here and perhaps as a result it’s more difficult to target a specific node with the mouse. Showing related nodes is accomplished with a change in scale and animation but this actually adds to the visual noise of the piece and doesn’t make the connection visually stronger like dimming the unconnected nodes would. Re-visualizing this data with sigma.js might make it easier for users to navigate the network and discover new visualization resources.
The Sigma.js code is open to contributors, hosted on Github and ready for people to use. It’s another in a what I hope is a trend of complex visualization types ported to open web languages and made public for people to use and improve. I first saw this with Gregor Aisch’s Bubble Tree visualization which I wrote about earlier. To keep up I’ve started a collection of visualization projects hosted on Github so if you’ve used any good ones you should let me know on twitter or post it in the comments below.