Automatic Spacing for Flowchart

Question

So I'm working on a project that will, in the end, generate a kind of flow chart using the Flickr api. You will supply a seed tag, and the program will use that seed tag to find other related Flickr pictures that have common tags...

I have all of the back end stuff up and running but I'm stumped on the formatting. Here is a screenie of what I would like it to look like...

Here's my question. Is there a good way of approaching the spacing of each branch? By this is mean, I would like to have a function where I could simply create a new node (or "branch") and specify which existing node I would like it to attach to. This is all good and fine, but I need to be able to automatically and intelligently place the new node on the page so it doesn't overlap any existing lines or nodes. I guess this is more of a general programming question as if I knew the process I could code it, but for those who are interested I am doing this in Javascript/HTML/CSS for the styling and maybe some PHP for the Flickr calls.

Feel free to ask any questions to clarify my rambling.

Answer 1

You could use a spring model between the nodes. Each node exerts a repelling force against every other node. Allow all the nodes to push against each other a certain number of times and you'll come up with a reasonable solution. You'll want to have a couple limits to make sure nodes don't go flying off into space and that you don't oscillate between a couple similar states.

Implementing it in Javascript/PHP is left as an exercise for the reader.

An alternative is to use a graph layout program such as GraphViz.

Answer 2

I look forward to seeing the results of your project. I agree with scompt about using graphviz.