java - Visualizing set hierarchies as color coded graphs

Question

I have been reading quite a bit on graphing libraries for Java and Javascript lately but I haven't found a good way to do what I want to do.

Essentially I have a hierarchy of sets with regards to a bunch of elements (up to several thousands). These sets can be fully or partly overlapping, fully covering or completely disjoint from one another. What I would like to do is to display the following information:

• The size of a set (in relation to the other sets)
• A "heat" value (in color code) of a set calculated from the elements it covers
• The full topology of the sets in a single graph (so that overlaps, intersections etc are displayed to the user)

---

Edit: Perhaps I should give an example of what I mean by sets and elements and partially overlapping hierarchies. The following is an over-simplified version of the kind of sets I deal with (note that numbers 1-10 and letters a-h and X represent elements which are comparable to one another):

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}

---

I am not sure how I would go about displaying this information in an intuitive way. I have seen Voronoi ¹,² graphs which I really like visually, however they have a different mathematical background so I don't think I'll be able to portray the hierarchies I have in a proper manner. I would like to create these graphs during runtime (in case of Java) or using Javascript in case of HTML deployment, either is perfectly fine. One thing that is a constraint, however, is that the graphs need to be either created, or can be exportable, to high-res vector graphics.

My questions in short:

1. Is there a nice way to visualize the kind of data I have? If so does it exist in a readily implemented form (i.e. a library)?
2. If there is no easy solution to the problem, in other words if I need to invent my wheel in this case, how do I go about implementing such a graph myself? What is a good starting point? What do I pay extra attention to?

Thanks!

Edit: I potential idea I had was to layout all the elements in the universal set as a hexagonal grid with the desired color overlay, and then draw the boundaries for the sets. There are however several problems with that idea, in particular the problem of designating locations for the elements, so that the sets are not split all over the graph. Any comments/suggestions?

Answer 1

はい、これはかなりよく研究された問題です。あなたが説明しているものはハイパーグラフと呼ばれます。各要素はグラフの頂点として表すことができ、セットはハイパーエッジです。その場合、問題はハイパーグラフの視覚化の問題になります。

残念ながら、最も単純なグラフでも複雑な視覚化を行うことができるため、これに対する完全で一般化されたソリューションはありません。

セットが比較的小さい場合（<5要素）、 graphvizのような通常のグラフ描画ライブラリを使用できます。これを行うには、各セット内の頂点のすべてのペアを接続し、それらを異なる色にするだけです。これにより、次のようなソリューションが得られます。

Answer 2

2次元グリッドを考えましたか:

• 1軸にセット番号を入れる
• すべてのセットで見つかった固有の要素を他の軸に配置します
• セット内で要素が見つかった各セルに色を付けます (その行と列のラベルを見て)

通常、この視覚化方法はこれまでに説明したより複雑な方法よりも劣りますが、数千の要素と数千のセットがある場合に実際に可能であるという利点があります。

トリックは、ユーザーにとって有用な方法で最も多くの情報をまとめる方法で行と列を並べることです。私の本能は、あなたが解決しようとしている問題は、色付きのセルを可能な限り「塊状」にすることだと言っています。隣接する色付きのセルの各セットが「領域」と呼ばれる場合、異なる領域の数が最小になり、それらに穴が最も少なくなるようにします。

これはそれ自体が非常に複雑な問題ですが、各セットの隣接係数を他のすべてのセットに対して処理することで、少なくとも部分的に解決できます。あなたが探しているのは、近さの「島」です。したがって、最も類似したセットのペアから始めて、それらをグラフに追加し、それらを領域と見なします。それが保持するペアを置き換える地域であなたの近さの数値を再計算します（何らかの方法で平均化しますか？）。次に近いアイテムのペア (各アイテムは領域またはセット) を見つけ、そのペアがグラフ内の既存の領域に近い特定のしきい値内にある場合は、その領域の片側に接続し、それ以外の場合は新しい、領域を分離します（再びペアの近さの値を削除し、領域自体を再計算します）。最終的に、すべてのセットがリージョンに追加され、すべてのリージョンが結合されます。

これで最適な構成が得られることはないかもしれませんが、ランダムな分布に比べて領域が少ないものになるはずです。

最後に、ユーザーが興味深いセットまたは要素を選択し、それを完全に再配置されたグラフのシードとして使用できるようにすることで、動的な並べ替えが役立つ場合があります。その要素 (および結合後の領域)への近さに基づいて各加算を計算します。他の要素と)、全体的に最も低い親密さではありません。

これは、質問のサンプル データ セットに対して上記のロジック プロセスを実行した結果の図です。

列の順序を決定するのは複雑ですが、基本的には、列を隣接するように移動しても、既に追加されたセグメントの色付きのブロック領域が妨げられない場合は、ある程度妥当な結果を得ることができます。

追加の考え:

• セットの近さの計算は、それらが共通する要素の数だけでなく、共通していない要素の数でもあります。セットの 2 つのペアが、ペア間で共通の 3 つの要素を持っているが、一方に 5 つの非共有要素があり、もう一方に 3 つの非共有要素がある場合、3 つの非共有要素を持つペアは、他のペアよりも一致しています。
• グラフにセットを追加した後、要素を並べ替える機会があります。要素をできるだけ左端に積み重ねることは、最初の配置の良い出発点です。その後、最も一般的な要素を一番左に積み重ねるのが良さそうです。その後、それは崩壊します。色付きのセルを対角線 (左上から右下) に近づけることも有用なアルゴリズムになるのではないかと考えています。方法関係。
• 色付きのブロブが他のすべてのセットから完全に切り離されたセットで構成されている場合 (例の X を含むセットなど)、別のグラフに移動できます。

Answer 3

この問題には多くのアプローチがありますが、個人的には、Raphael JSのようなツールで動的に生成された SVG を使用してベン図のようなものを描き、好きなように色付けします。また、Raphael にはSetのような APIがあり、要素とその関係に関する完全な詳細情報を提供できます。そこにあるSVG からコードへのコンバーターも、SVG 要素を生成する方法を理解するのに役立つでしょう。

または、ベン図などのツールを使用することもできます。

これは、このシナリオに簡単に適応できるようです。バブル チャートを作成できるFlotr2もあります。

またはCanvas Express。

後のツールのいずれかでもう少し微調整すると、適切に実行できるようになります...

Answer 4

データを適切な形式で取得するためのソリューションがありません。グラフを作成するために MIT によって作成されたこの JavaScript プラグインsigmajsを見てください。受け入れるデータは見ていませんが、一見の価値があるかもしれません。