title: Automatic Spacing for Flowchart
body: <p>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... </p>
  
  <p>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...</p>
  
  <p><img src="https://imgur.com/E4DUe.jpg" alt="Cool Screenie"></p>
  
  <p>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. </p>
  
  <p>Feel free to ask any questions to clarify my rambling.</p>