組み合わせに最適な視覚化

Question

アイテムのセットから選択できるすべての方法を示すために、どのような視覚化/グラフを使用する必要がありますか？ （つまり、可能な組み合わせの数）

具体的には、2つの動物からの潜在的な子孫を示しています。各親はいくつかの遺伝子を所有しており、子孫は各タイプの親遺伝子を0、1、または両方継承します。遺伝子には楽しい名前（たとえば、fire）があり、それらの遺伝子の組み合わせには独自の名前（fire + pastel = firefly）がある場合がありますが、これは要点の外です。

親からの2つおよび2つの遺伝子（1つを共有）を示す簡単な例を次に示します。これは、2 ^ 2 = 16の可能性をもたらします。

現在のUIは可能性のリストを表示しますが、視覚的にその大きさを伝えるものはありません。第2に、共通性を共有する（つまり、同じ遺伝子を含む）結果が視覚的に関連しているとしたらすばらしいでしょう。

私のアイデアは、ひし形のグラフ、または層状ネットワークのようなものです。ここで、上部はすべての遺伝子が選択された結果であり、その下はN-1のノードの行で、下の行が0になるまで続きます。エッジは、共有遺伝子を持つレイヤー間のノードを接続します。ノードのサイズは確率を示します。このグラフのようなものかもしれません（ただし、データは無視してください）。

私は Punnett Squares を知っていますが、これがこの順序の組み合わせに最適であるかどうかはわかりません（同等の結果を組み合わせないもの）。

ありがとう！

Answer 1

2つのグループからの選択のみに制限されることが予想される場合、これはマトリックスまたはヒートマップの視覚化に適しています。これは、アイテムのすべての組み合わせが有効である場合に特に当てはまります。ヒートマップは、スパースグループ（非常にスパースなグループなど）を扱う場合にはあまり役に立ちません。その場合は、おそらく、力有向グラフのようなもので、よりきれいな視覚化をするでしょう。

3つ以上のグループが参加することが予想される場合、問題はより困難になります。ある種のグラフがおそらく最良の選択ですが、対話や解釈が難しくなる可能性があります。

ヒートマップは、交差点の色を変えることができるため、変数間の重みをエンコードする場合に最適です。交差点に形状を配置し、サイズを使用して別の変数をエンコードすることもできます。以下の例でわかるように、ヒートマップは非常にコンパクトな表現です。

D3を使用している場合は、2つのグループの組み合わせを示す2つの例を次に示します。

• Truliaの例の場合 、組み合わせは曜日と時刻です。彼らは何かをエンコードするために色を使用します（サイトの使用法？） 

• レミスの例の場合 、彼らは実際にはグループの割り当てを示すために色を使用しており、色の存在は関連を示します。これにより、スパースデータを処理するときに、マトリックス内の2つのデータが提供されます。

• ジャーナルの例の場合 、出版物の数を示すサイズで時間とジャーナルをエンコードしています。色は連続しているように見えますが、意味がある場合はエンコードできます。 

ヒートマップは、外部フレームワークを必要とせずにシンプルなCSS/HTMLで生成できるため、ニースです。または、d3を使用してHTMLバージョンまたはSVGを生成できます。 TruliaはHTMLです。 Les MisはSVGです。

さらに考えると、ヒートマップを拡張して、複数の組み合わせで機能させることができます。 1つの可能性は、異なるグループの複数のヒートマップを表示することです。 4つ以上のカテゴリがある場合、これはおそらく手に負えなくなります。また、視覚化するアイテムをユーザーが選択できるようにすることもできます。コンテキストとユーザーによっては、それほど混乱しないかもしれません。