title: Arranging elements with a variable size on a fixed canvas
body: <p>Input:
  I have created and filled an array/table in velocity. This array currently contains 3 things:</p>
  
  <p>(note that this example is pure fiction)</p>
  
  <ol>
  <li>Top level community name (e.g. Stack Overflow USA, Stack Overflow BEL)</li>
  <li>Subcommunity (e.g. stackOverflow.com/r/USA/CSS and stackOverflow.com/r/BEL/JSON)</li>
  <li>Owner(s) of the subcommunity (e.g. Frank) </li>
  </ol>
  
  <p>Depending on the situation and the point in time, the amount of top level communities, that have a variable number of subcommunities are each owned by a variable number of owners. And, each top level community can also have one or more owners.</p>
  
  <p>(input) table example:</p>
  
  <pre><code>SO USA, , Phil
  SO USA, CSS, Frank
  SO USA, JSON, Marc
  SO BEL, CSS, Marieke
  SO BEL, CSS, Francis
  SO BEL, JSON, Patrick
  SO FRA, , Francois
  </code></pre>
  
  <p>output:</p>
  
  <p>I now want to position these communities and sub communities graphically on a webpage like this</p>
  
  <p><img src="https://imgur.com/lX1rF" alt=""></p>
  
  <p>Depending on the amount of subcommunities, the top level community will have a different size, and should therefore be parsed where it fits best on the page (e.g on a 600pxx800px canvas).</p>
  
  <p>Here are my questions:</p>
  
  <ul>
  <li>does somebody know code that has already been written to solve this kind of problem?</li>
  <li>if not, how would I best tackle this?</li>
  </ul>