我应该使用什么样的可视化来显示组合？

Question

我需要创建一个可视化/图表，显示从一组项目中选择的所有方式（即可能的组合数量）

具体地说，我展示了来自两只动物的潜在后代，其中每个亲本可能拥有一些基因，并且后代遗传每种类型的0,1或两个亲本基因。基因有趣的名字（例如，火），有时这些基因的组合有自己的名字（火+粉彩=萤火虫），但这不是重点。

这是一个简单的例子，显示来自父母的2个和2个基因（共享1个），这使得2 ^ 2 = 16种可能性。

当前用户界面显示了可能性列表，但没有任何可视化表达的大小。其次，如果具有共同性（即包含相同基因）的结果可以在视觉上相关，那将是很好的。

我的想法类似于菱形图形或分层网络，其中顶部是选择所有基因的结果，并且低于那个具有N-1的一行节点，依此类推，直到底行为止0已选中。边缘将连接具有共享基因的层之间的节点。节点的大小可以指示概率。像这样的东西（但忽略数据）：

我知道Punnett Squares，但我不确定它对于这个顺序的组合是最好的（对于一个它并没有结合相同的结果）。

我希望d3js会有这样的东西但是在画廊中的大量例子中我没有看到任何类似的东西。

谢谢！

Answer 1

  

当前用户界面显示了可能性列表，但没有任何可视化表达量级。

而不是用分数注释每种可能性 - 例如“1/16” - 在您的可能性旁边放置一个水平条形图，其中条形图的大小与该可能性的可能性成正比。您也可以通过降低可能性来对可能性进行排序。