views:

64

answers:

7

I'm a member of a small but fairly sociable online forum, and just for fun we've been plotting a chart of who's met who in real life. Here's what it looked like fairly recently. (The colour is the "distance" from the currently-selected user, e.g., yellow is someone who's met someone who's met them. And no, I'm not Zak.) Apologies for the faded lines, they don't seem to have weathered the SO upload process very well.

Link chart

It's generated as SVG, with a big block of JSON defining who's met who. The position (x,y) of each member on the chart is hard-coded into that JSON. Until now, it's been fairly easy to cope when someone meets someone else - at worst, maybe two or three people need to be shuffled around - but it does involve editing the co-ordinates manually. And now that the European and North American contingents are meeting up, and a few on the periphery are showing up at meets, all hell is breaking loose...

We can put some effort into making all the nodes draggable, which would make the job of re-arranging a bit less tiresome. But it seems more sensible to let the computer take care of positioning them, especially as the problem will only get harder with more members.

So, does anyone know of an algorithm for positioning these nodes on the chart, based on which other nodes they're linked with?

Ideally, it would

  • minimise or avoid long links
  • avoid having lines run underneath unrelated nodes
  • take account of the fact that well-connected nodes are bigger
  • do its best to show the wider "all these guys met each other" relationships (the big circle at the bottom is largely the result of one meet, for example, though the chart has no idea of when any two people met)

but if it gets us close enough to tweak it, that's progress.

And, what's the real name for these charts? I believe they're called "link charts", but I'm not getting good results from Google using that name or anything else I can think of.

We'll likely be implementing this in PHP or Javascript, but right now it's how to begin approaching the problem that's the bigger question.

Edit: Some great answers coming already. I would be very interested in the actual algorithm(s) used, though, as well as tools that do the job.

+2  A: 

You can google for graph visualization. There are more libraries for this, including GraphViz, but probably not all your requirements will be met.

Adam Schmideg
+2  A: 

The real name for it is "graph". To generate graph, and have a good layout algorithm, the best is to use a software which will do the job.

I advise you to use Gephi.

This soft is able to do all the things you want to.

Guillaume Lebourgeois
+1 for Gephi, that looks fascinating.Gonna have a stab at doing it myself first, though.
Ed Daniel
+2  A: 

Have a look at the yWorks tools.

Frank
+1  A: 

If you can deal w/ Java, take a look at prefuse.

Jason S
+1  A: 

Have a look at NodeXL

Also, this book may be relevant.

Lior Kogan
+1  A: 

What you are looking for are f.e. force-based algorithms. There are quite a few libraries, and some have been named already, like prefuse, yWorks. Here a few more: jung, gvf, jGraph.

Ralph Rickenbach
Thank you, particularly for the Wikipedia link. I'd wondered if it was going to come down to "link them all with rubber bands and see where they end up", and I was kind of right :) Gonna have some fun with this, I think.
Ed Daniel
A: 

mxGraph has an organic layout written in JavaScript

David