title: How to generate very complex tree structure in HTML
body: <p>In our game, we have a typical tech tree, which is currently edited by hand - very hard to maintain and error-prone: <a href="http://igmarauders.isotx.com/library/images/a/a3/Techtree-july26-2011-vehicles-resized.png" rel="nofollow">http://igmarauders.isotx.com/library/images/a/a3/Techtree-july26-2011-vehicles-resized.png</a></p>
  
  <p>If at all possible, I'd like to generate this in an HTML form, but I have no idea where to start. Maybe people here have tackled similar problems and can point me in the right direction?</p>
  
  <p>Some technical details:</p>
  
  <ul>
  <li>Every node is an entity, with a unique ID (number)</li>
  <li>Every entity has a list of prerequisites (other entities)</li>
  <li>The starting tech (on the left) is an array of entities</li>
  <li>Only entities that can be traced back to the starting tech show up in the map</li>
  <li>The research level (the columns along the top) are a property available for each entity</li>
  <li>Entities of the same types but different levels (e.g. <code>Assault Archos LvL 1</code>, <code>Assault Archos LvL 2</code>) are linked by a property from the higher level to the lower level (and the higher level always has the lower level as a prerequisite too)</li>
  <li>We can distinguish between <code>Technology</code> (upper part) and <code>Vehicles</code> (lower part) by the entity type, a per-entity property.</li>
  <li>The actual names are also a per-entity property, and not really important for the tree itself</li>
  </ul>
  
  <p>Finally:</p>
  
  <ul>
  <li>You can ignore the differentiation between solid lines and dotted lines (I don't even know what the difference really is)</li>
  <li>The boxes that group vehicles together that are unlocked by one research project are nice to have, but not required</li>
  </ul>
  
  <p>Thanks in advance. I have searched on Google, but all the "complex tree" examples I found were childishly simple compared to mine :)</p>
  
  <p><b>edit</b>: Here is some sample data, in a JSON format: <a href="http://pastebin.com/Fa3JcnRw" rel="nofollow">http://pastebin.com/Fa3JcnRw</a></p>
  
  <p><b>edit 2</b>: Also, if it matters, we use PHP on the server side, but I'm open to alternatives - we could generate the static HTML in a build script for example.</p>