一套可视化层次为彩色编码图(Visualizing set hierarchies as color

2019-07-30 04:49发布

我一直在阅读上的绘图功能Java和JavaScript库,最近不少,但我还没有找到一个很好的方法做我想做的事情。

基本上我有套与问候一堆元素(多达几千)的层次结构。 这些组可以是完全或部分重叠,完全覆盖或完全彼此不相交的。 我想这样做是为了显示以下信息:

  • 一组(对其它组中的关系)的大小
  • 一组A“热”的值(在颜色代码)从它覆盖元件计算
  • 集合在一个单一的曲线图中的完整的拓扑(使得重叠,交叉点等被显示给用户)

编辑:也许我该给的我所说的组和元素和部分重叠的层次意味着一个例子。 下面是一个过于简化版本的种组I处理的(请注意,号码1 - 10和字母a - hX代表具有可比性彼此元素):

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. 是否有可视化的数据类型我有一个好办法吗? 如果是这样它在一个容易实现的形式(即库)存在吗?
  2. 如果没有容易的解决问题的方法,换句话说,如果我需要创造我的车轮在这种情况下,我怎么去实现这样的图自己? 什么是一个很好的起点? 我怎么格外注意?

谢谢!

编辑:我有我的潜力的想法是布局全集与所需的颜色叠加在六边形网格的所有元素,然后绘制边界的集合。 但是也有一些问题与想法,特别指定为元素的位置的问题,这样集不是所有在图形拆分。 任何意见/建议吗?

Answer 1:

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

不幸的是,不是一个完美的,一般化的解决了这个,因为即使是最简单的图表可以有复杂的可视化效果。

如果你的套都比较小(<5元),你可以使用常规的图形绘制库像graphviz的 。 要做到这一点,只需连接所有对每组内的顶点,并设置不同的颜色他们。 这将产生一个类似的解决方案:



Answer 2:

你有没有考虑一个二维的网格:

  • 把一组号码在一个轴上
  • 把所有组中发现的独特元素在另一轴上
  • 色其中元素是一组发现每个单元(通过查看行和列的标签)

虽然这种可视化方法通常会逊色一些迄今提到的更复杂的问题,它具有的美德实际上是可能的 ,当你有几千套元素和数千。

诀窍将是订购,在对用户有用的方式一起提出的大部分信息的方式的行和列。 我的直觉说,你要解决的问题是使有色细胞像“bloblike”成为可能,如果每个组相邻的有色细胞被称为“区”,拥有鲜明的领域和数量最少他们有孔他们最少。

这是在自己的权利一个非常复杂的问题,但至少可以部分地通过努力一些邻接因素每一组对每一其他组解决。 您要查找的是亲密的“孤岛” - 所以用一双最喜爱套开始,将它们添加到图表,并考虑他们的区域。 与该地区取代其持有的对重新计算你的亲近数字(平均以某种方式?)。 发现下一个最密切对项(每个项目是一个区域或一组),并且如果该对是贴近图中的任何现有区域的一定阈值内,附加到区域的一侧,否则创建一个新的,独立的区域(再除去对的接近度值,并重新计算该区域本身)。 最后,所有组将被添加到区域中,所有地区将被加入。 连接两个区域可以具有四种可能(可能需要翻转),所以其侧面在图形附着可以通过在这两个区域的4个边缘的套的接近度来计算。

虽然这可能永不放弃的最佳配置,就应该拿出点相比,随机分布有少数几个地区。

最后,一些动态重排序可能是有用的,通过允许用户选择一个有趣的组或元件,以及用其作为种子用于完全重新排列的图表,计算与元素被组合之后基于接近每次加入(并且随后该区域与另一个元件),而不是任何整体最低接近程度。

这里是一个图的结果的,具有做了设置在你的问题的数据的例子中,上述逻辑流程:

决定如何排序的列是复杂的,但基本上可以通过移动列相邻时,这样的举动不会打扰任何已加入的段的彩色块区域取得某种合理的结果。

更多的想法:

  • 计算一组亲密不是他们只是有多少元素有相同之处,也有多少元素有没有共通之处。 如果两个对组共同具有3个单元的对之间,但是一个有5个非共享元素,而另一个具有3个非共享元素,则对与3的非共享元素比其他更接近的匹配。
  • 增加一组到图形之后,有重新排序的元素的机会。 堆叠元素最左边的地是一个好的开始为第一个展示。 在此之后,堆叠最常见的元素最左边似乎不错。 在此之后,它打破了。 我不知道如果得到的彩色细胞接近对角线(从左上到右下)也将是一个有用的算法-这让我想起了一点的设计结构矩阵 ,虽然只显示单向依赖,而不是双这样的关系。
  • 当有色团块由多组是完全不相交从所有其它组(如含在例如X设定)时,它可以被移动到一个单独的图形。


Answer 3:

有许多方法解决这个问题,但就个人而言,我会使用动态生成的SVG与像一个工具绘制排序维恩图的拉斐尔JS和颜色是我想要的方式。 此外,拉斐尔有类似的API 集 ,可以使你给有关要素及其关系全面详细的信息。 有SVG到代码转换器也可能会帮助在了解如何生成的SVG元素。

另外,您可以使用类似的工具维恩图 :

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

甚至帆布快递 。

有一点更多的调整与任何后来工具将使你得到它得当...



Answer 4:

我没有你在正确的格式获取数据的解决方案。 看看由麻省理工学院建筑图形,创建这个JavaScript插件sigmajs 。 没有看过它接受的数据,但可能是值得一试。



文章来源: Visualizing set hierarchies as color coded graphs