So, I'm working on a project that will eventually generate a kind of flowchart using the Flickr api. You put a seed tag, and the program will use that seed tag to find other related Flickr images that have common tags ...
I have all the back-end elements and are running, but I am formatted. Here is an example of how I would like to look ...

Here is my question. Is there a good way to get closer to the spacing of each branch? This implies that I would like to have a function where I could just create a new node (or "branch") and indicate which existing node I would like to connect to. This is all good and good, but I need to be able to automatically and intelligently place a new node on the page so that it does not overlap 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 do this in Javascript / HTML / CSS for styling and possibly for PHP calls Flickr
Feel free to ask any questions to clarify my incoherence.