使用d3.js

时间:2016-03-07 11:19:59

标签: javascript html d3.js data-visualization venn-diagram

我有一个应用程序列表和提供访问这些应用程序的服务器,有大量的交叉,例如:

Servers 01-09 provide App A, App, B
Servers 05-09 provide App C
Servers 10-14 also provide App A

目前,我在一张纸上画了许多包含服务器及其应用程序列表的盒子,这些盒子分组到运行相同应用程序的服务器中。使用上面的例子:一个标有01-09的方框,其中内部写有App A和App B,并与另一个标有05-09的方框重叠,其中写有App C。

我想将此转移到我可以在网站上显示的d3(我也在学习d3)提供的可视化中。我想到了一种超级venn diagram或其他东西?目标是轻松查看运行相同应用程序的服务器组。

是否有其他人遇到过这种可视化问题 - 您使用了哪些技术? d3内置了什么可以在这个实例中使用?

2 个答案:

答案 0 :(得分:1)

对我来说,最简单的方法是在表格中,因为你只有两个维度:

| Server | App A | App B | App C |
|--------------------------------|
| 01     |   X   |       |       |
| 02     |       |       |       |
etc

如果您在d3.js上设置(非常合理),我会垂直使用Co-occurrence graph服务器,水平使用应用程序。

或者,您可以使用具有一种形状的应用程序和具有另一种形状的服务器来尝试labelled force。我不认为它像桌子一样可读!

答案 1 :(得分:1)

在这种情况下,一个选项是使用Bipartite图形进行可视化。

https://en.wikipedia.org/wiki/Bipartite_graph

二分图是一种图形,其中有两组不同的节点,其中同一组的成员之间没有边,所有边都是从一组到另一组。

在这里,您可以将应用程序(A,B,C等)作为一个集合,将服务器(01-14)作为另一个集合。

此外,它取决于您希望通过此可视化实现的目标。例如,如果您的目的是显示和比较运行应用程序的服务器数量的服务器负载,则可以使用节点大小对其进行编码。