title: Organization chart - tree, online, dynamic, collapsible, pictures - in D3
body: <p>I am a noob in web-development. I'm trying to create a tree-like hierarchical company org chart. I tried both google's <a href="https://developers.google.com/chart/interactive/docs/gallery/orgchart" rel="noreferrer">visualization chart</a> and Mike Bostock's <a href="http://bl.ocks.org/mbostock/4339083" rel="noreferrer">D3 Reingold tree</a>.</p>
  
  <p>I want these features :</p>
  
  <ul>
  <li>tree structure : either top-down (<em>google</em>) or left-right (<em>D3</em>)</li>
  <li>online/dynamic : viewable in browser and able to read data from json (both <em>google</em> &amp; <em>D3</em>), not static visio or ppt diagram </li>
  <li>collapsible : able to hide subtrees (both)</li>
  <li>space-adjusting : nodes should fill visible area, to reduce scrolling (only <em>D3</em>)</li>
  <li>attributes : display name, title &amp; possibly picture (only <em>google</em>)</li>
  </ul>
  
  <p>Above I've marked which tool allows which features, afaik.<br>
  <strong>I prefer the D3 version</strong> because it looks cool.<br>
  I can modify the .json to include additional fields (title, url to photo etc.) - here is a <a href="http://paste.ubuntu.com/11737717/" rel="noreferrer">sample</a></p>
  
  <p>My question is - how do I modify the <a href="http://bl.ocks.org/mbostock/4339083" rel="noreferrer">D3 code</a> to display an employee's name, then title in the next line, and maybe picture too ?</p>
  
  <p>Or if that's not feasible - how do I modify the <a href="https://developers.google.com/chart/interactive/docs/gallery/orgchart" rel="noreferrer">google code</a> to automatically adjust spacing, so that all children of a node are close together, and I don't have to horizontally scroll ?</p>