Force Directed Graphs are self-organizing, visually appealing tools for representing relational data. The look is organic, because algorithms simulate the way charged particles arrange in space. They work great in user interfaces because the user has access to data nodes while the graph is being organized. Take a look (go ahead and play, they're interactive):

Show Example

So, what am I using these for?

Recently, I've been considering alternatives to the traditional list and tree views used in search result user interfaces. I'm looking for display tools that can show relationships among results, rather than simply ranking them by score. Force Directed Graphs looked promising, so I started writing this library to determine if a client-resident implementation in Javascript is a viable option.

Initial Findings

Performance: As currently implemented, the graphing engine consumes a lot of processing power, even after the graph has settled. An entropy-based throttle would help.

Scaling: The layout algorithm has a complexity of On 2 :(. It just doesn't scale very well.

Next Steps

I need to produce some functional user interfaces. Lists make very efficient use of space. Users greatly benefit from lengthy titles, annotations, urls, and even thumbnail images in results. It'll certainly be a challenge to incorporate large amounts of text in a user interface based on force directed graphs. Please please please leave a comment if you've seen examples in the wild or have some suggestions. I'll be publishing the results here, so be sure to check back.

As promised, I'm providing an open source license for the files referenced here. I've chosen a Creative Commons Attribution License, which means you are free to distribute the files and create derivative works as long as you include the license and attribution information contained in each file. I will follow up with a post describing each of these files to help you integrate with your project.