Home/ Questions/Q 300481
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-12T06:55:05+00:00

So I’m working on a project that will, in the end, generate a kind

  • 0

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…

Cool Screenie

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.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.

    • 0