Constellation: Thinkmap-Like Graph Visualizations in Flash

Actionscript-powered interfaces for network navigation and visualization

Over the past few years I've developed and optimized several force-directed graph visualizations like the one below. These Thinkmap-like interfaces are perfect for displaying social networks, sitemaps, and citation maps.

This particular interface visualizes the relationships between several movies and actors. It's a single-layer radial tree interface where a node representing a movie appears in the center. Actors in that movie appear in a circle around it and clicking any of those nodes causes it to move to the center. At that point any movies that actor has acted in appear in a circle around the center.

Sample customizations of the Constellation interface

The network visualization framework was built to handle customizations to both the appearance and behaviour of the interface. I've used it for several projects and hopefully the screenshots below give some idea of the customizations possible.

Visualizing customer needs for Allstate Insurance

I worked with the fine folks at Chicago's SGDP to build this interface for Allstate Insurance. It uses the same interactive behaviour as the actor/movie Constellation above to allow users to visualize some of the thoughts and questions customers might have. In addition, clicking certain nodes triggers animations and voice overs.

Referral network visualization for Chemdry

This interactive visualization is very similar to the well-known Thinkmap interface. It's a radial tree with two layers of nodes extending from the center node. This swf communicates with a server-side script to load portions of a large graph from a database. It was built in collaboration with Neboweb, based in Atlanta, Georgia.

Product refinement interface for i-tingle

This is a specialized interface for choosing products based on desired features. Each feature is represented by a node and grouped by category. When a feature is selected, other features are emphasized if there are products that have both features. If no product has both features then the node is suppressed. This prototype was built for i-tingle, a company in Zurich, Switzerland.

Want to see more live demos?

Here links to some more live demos. Note that some of these are experimental but they're all fun to use.

• Similar-Music Visualization
• Facebook Mutual Friend visualization
• Movie + actor visualization using Constellation Roamer

If you're interested in using Constellation in your project, you can purchase the Constellation Roamer Graph Visualization at Asterisq or contact me for consulting work.