在固定画布上排列可变大小的元素

Question

输入： 我已经创建并填充了一个数组/表格的速度。这个数组目前包含3件事：

（请注意，这个例子是纯粹的小说）

1. 顶级社区名称（例如Stack Overflow USA，Stack Overflow BEL）
2. 子社区（例如stackOverflow.com/r/USA/CSS和stackOverflow.com/r/BEL/JSON）
3. 子社区的所有者（例如Frank）

根据具体情况和时间点，具有可变数量的子社区的顶级社区的数量均由可变数量的所有者拥有。而且，每个顶级社区也可以拥有一个或多个所有者。

（输入）表示例：

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

输出：

我现在想要将这些社区和子社区以图形方式放置在这样的网页上



根据子社区的数量，顶级社区将具有不同的大小，因此应该在页面上最适合的地方进行解析（例如在600pxx800px画布上）。

以下是我的问题：

• 有人知道为解决这类问题而编写的代码吗？
• 如果没有，我将如何最好地解决这个问题？