将集合层次结构可视化为颜色编码图形

我最近一直在阅读有关Java和Javascript图形库的相关内容，但我还没有找到一个很好的方法来做我想做的事情。

基本上我有一组关于一堆元素的集合（最多几千）。 这些组可以完全或部分重叠，完全覆盖或完全彼此不相交。 我想要做的是显示以下信息：

• 集合的大小（与其他集合相关）
• 根据它所涵盖的元素计算的集合的“热量”值（颜色代码）
• 单个图形中集合的完整拓扑（以便向用户显示重叠，交叉点等）

---

编辑：也许我应该举例说明我的意思是集合和元素以及部分重叠的层次结构。 以下是我处理的那种集合的过度简化版本（请注意，数字1 – 10和字母a – h和X表示彼此相当的元素）：

 Set1 = {1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11} Set2 = {1, 2, 3, 4, 5, 6} Set3 = {1, 2, 3} Set4 = {1, 4, 5, 6, 7} Set5 = {a, b, c, d, e, f, g, h} Set6 = {a, b, c, d, e} Set7 = {a, b, c, 7} Set8 = {2, 4, 7, 8, c, f} Set9 = {X} 

---

我不确定如何以直观的方式显示这些信息。 我见过Voronoi¹， ²图形，我非常喜欢它们，但是它们有不同的数学背景，所以我认为我不能以适当的方式描绘我所拥有的层次结构。 我想在运行时（在Java的情况下）或在HTML部署的情况下使用Javascript创建这些图，要么非常好。 然而，有一个限制因素是图形需要创建或可以导出到高分辨率矢量图形。

我的问题简而言之：

1. 有没有一种很好的方法可视化我拥有的数据类型？ 如果是这样，它是否以易于实现的forms（即图书馆）存在？
2. 如果问题没有简单的解决方法，换句话说，如果我需要在这种情况下发明我的轮子，我该如何自己实现这样的图形？ 什么是一个好的起点？ 我应该特别注意什么？

谢谢！

编辑：我可能的想法是将通用集中的所有元素布局为具有所需颜色叠加的六边形网格，然后绘制集合的边界。 然而，该想法存在若干问题，特别是指定元素的位置的问题，使得集合不会在整个图形上分割。 有什么意见/建议吗？

Answer 1

是的，这是一个相当充分研究的问题。 你所描述的被称为超图 。 每个元素都可以表示为图形中的顶点，并且这些集合是超边界。 然后问题变成可视化超图。

不幸的是，没有一个完美的，通用的解决方案，因为即使最简单的图形也可以具有复杂的可视化。

如果您的集合相对较小（<5个元素），则可以使用常规图形绘制库，如graphviz 。 要做到这一点，只需连接每组中的所有顶点对，然后对它们进行不同的着色。 这将产生类似于此的解决方案：

Answer 2

你考虑过二维网格：

• 将设定编号放在一个轴上
• 将所有集合中的唯一元素放在另一个轴上
• 为集合中找到元素的每个单元格着色（通过查看该行和列的标签）

虽然这种可视化方法通常不如目前提到的一些更复杂的可视化方法，但是当你拥有数千个元素和数千个集合时，它具有实际可行的优点。

诀窍在于以一种对用户有用的方式将最多信息放在一起的方式对行和列进行排序。 我的直觉说你要解决的问题是让彩色细胞尽可能“斑点” – 如果每组相邻的有色细胞被称为“区域”，则具有最少数量的不同区域，并且他们有最少的洞。

这本身就是一个非常复杂的问题，但至少可以通过针对每个集合处理每个集合的一些邻接因子来至少部分地解决。 您正在寻找的是接近的“孤岛” – 所以从一对最相似的集开始，将它们添加到图中，并将它们视为一个区域。 重新计算您的亲密度数字与替换它所拥有的对的区域（以某种方式平均？）。 找到下一个最接近的项目对（每个项目是一个区域或一组），如果该项目在图表中任何现有区域的某个接近阈值内，请附加到该区域的一侧，否则创建一个新项目，单独的区域（再次移除该对的接近度值并重新计算该区域本身）。 最终，所有集合都将添加到区域，并且所有区域都将加入。 连接两个区域可以具有四种可能性（可能需要翻转），因此可以通过两个区域的4个边缘上的组的紧密度来计算在图中附着的哪个边。

虽然这可能永远不会给出最佳配置，但它应该提出与随机分布相比具有很少区域的东西。

最后，一些动态重新排序可能是有用的，允许用户选择一个有趣的集合或元素，并将其用作完全重新排列的图表的种子，根据与该元素的接近程度计算每个添加（并且随后在合并后计算该区域）与另一个元素），而不是任何一个最低的亲密度。

下面是结果图，在您的问题中对示例数据集完成了上述逻辑过程：

决定如何对列进行排序是很复杂的，但基本上你可以通过将列移动到相邻时获得一些合理的结果，这样的移动不会干扰任何已经添加的段的彩色块区域。

其他想法：

• 计算集合的接近程度不仅仅是它们共有多少个元素，还有它们有多少不相同的元素。 如果两对集合在这些对之间具有共同的3个元素，但是一个具有5个非共享元素而另一个具有3个非共享元素，则具有3个非共享元素的对与另一个具有更接近的匹配。
• 向图表添加集合后，可以重新排序元素。 尽可能将元素堆叠在最左边是第一次放置的良好开端。 在那之后，最左边堆叠最常见的元素似乎很好。 在那之后，它崩溃了。 我想知道是否让彩色单元格靠近对角线（从左上角到右下角）也是一个有用的算法 – 这让我想起了一些设计结构矩阵，尽管它只显示单向依赖，而不是两个 -方式关系。
• 当彩色blob由与所有其他集完全不相交的集（例如，示例中包含X的集）组成时，可以将其移动到单独的图中。

Answer 3

这个问题有很多种方法，但就个人而言，我会使用动态生成的SVG和Raphael JS这样的工具绘制一个维恩图表，并按照我想要的方式对其进行着色。 此外，Raphael有像Set这样的api，可以让你提供有关元素及其关系的完整详细信息。 SVG to Code转换器也可能有助于理解如何生成SVG元素。

或者你可以使用像维恩图这样的工具：

这似乎很容易适应这种情况。 还有Flotr2可以创建气泡图：

甚至是Canvas Express 。

使用任何后续工具进行一些调整将使您能够正确完成它…

Answer 4

我没有你的解决方案来获取正确格式的数据。 看看麻省理工学院创建的这个javascript插件，用于构建图形， sigmajs 。 没看过它接受的数据，但可能值得一看。