I'm looking for examples of interfaces that allow users to explore complex, interconnected systems on a variety of levels, from high-level patterns to low-level details.

In the mapping world, this has been tackled many ways with geographical data being the base data layer. Zooming in and out lets you drill in or get a wider perpective, small thumbnail maps keep you oriented, sidebar panes or in-context balloons let you examine individual map features, data-overlay switches let you add and remove data attributes, etc.

I'm interested in applying similar patterns to social-style webs of data, usually represented in network or wiring-style block diagrams.

Here are a few interesting examples:

  • LinkedInMaps is an elegant web-app, but too simple for my needs (imagine an order of magnitude or two more complexity)
  • The cross-platform graph editor yEd is much more complex, and the way it shows the same node using two different diagrams helps clarify the gnarly network graph (it's my fault that the nodes and edges are so jarringly presented, not the app's): enter image description here
  • Google Earth with the Sky dataset turned on blurs the geographic/social lines a little because of the depth and complexity of displaying constellations and nebulae: enter image description here

I'm interested in:

  1. Expanding this set of examples in general (whether source is a stand-alone app, web app, industrial controller app, etc). What variations are out there?

  2. Relevant, live, web applications. Due to the challenges of implementing something like this on the web, performance and technical limitations can profoundly influence UX.

Thanks, and let me know if/how I can improve this question.

  • Representing graphs or trees is a generic thing, what do you aim for? What kind of application do you have in mind? – alfa64 Dec 2 '11 at 6:13

The examples produced by Walrus are simply stunning.

Walrus is the best I have seen for handling very large trees. It would also be hopelessly slow for what you want to do interactively, and besides is not a web app, but it could provide the 'top level' as canned images. Then when you get down to subsets you can use an interactive method.

3D is just becoming manageable on the web (see Google Body). 3D really helps for large trees, and being able to use the GPU gives you the chance of the performance you seek. For example recoloring subsets that match a particular criterion can be very rapid indeed since the re-render is by GPU not CPU. It, WebGL, is how I would try to get round the technical limitations on the web.

| improve this answer | |
  • +1 Hadn't seen walrus's output before - stunning indeed. (Gotta love the retro use of animated gif's, too. Once they load they wiggle so fast!) The 3D aspect seems to have pro's and con's - it includes complexities that aren't present in 2D depictions - overlaps, hidden nodes, focal length etc. Google Sky is similar in that regard, I suppose. Good point about WebGL and performance. For projects that require IE 6+ support (mine will likely target IE8+ at a minimum - darn you corporate america!), there's also Flash 10.1+ with some GPU support. – peteorpeter May 25 '11 at 4:49

Not the answer you're looking for? Browse other questions tagged or ask your own question.