階層構造を持つデータの可視化

随時更新します。

階層構造を持つデータ

社会に存在するデータのうち、たとえばこのようなデータが該当する。

• コンピュータOSが管理するファイルシステムにおけるファイルとディレクトリの関係
• 書籍の構造（部、章、節）
• レガシーな会社組織（社長、部長、課長）
• 生物の分類法
• 文献学（philology）

表現方法

大きく三つに分ける。

• 隣接関係・ダイアグラム（Adjacency diagrams）...入れ子（nested）

  • アイシクル・ツリー（Icicle Tree）
  • サンバースト・チャート（Sunburst Chart）

• エンクロージャー・ダイアグラム（Enclosure diagrams）...入れ子（nested）

  • ツリーマップ（Treemaps）
  • サークルパッキング（Circle Packing）

• ノードリンク・ダイアグラム（Node-link diagrams）...積み重ね（stacked）

  • Dendrograms https://en.wikipedia.org/wiki/Dendrogram
  • Tidy Trees https://github.com/d3/d3-hierarchy/blob/master/README.md#tree
  • Phylogenetic Tree Diagrams
  • Hive Plot http://www.hiveplot.net/
  • BioFabric http://www.biofabric.org/

隣接関係・ダイアグラム（Adjacency diagrams）

ノードの相対的な配置によるトポロジーを示す。アイシクル・ツリーは矩形のレイアウトを使用し、サンバースト・チャートは放射状のレイアウトを使用する。

アイシクル・ツリー（Icicle Tree）

• https://homes.cs.washington.edu/~jheer/files/zoo/
• 上から下（垂直）または左右（水平）へ階層関係を表現している。ネストしないため、スペース効率は低下する。各セルの面積は、ツリーマップと同じように、データと連動している。垂直へ階層関係を表現する場合は、階層ごとに高さを一律にし、データと連動させない。

サンバースト・チャート（Sunburst Chart）

• John Stasko作

  • http://www.cc.gatech.edu/gvu/ii/sunburst/
  • http://www.cc.gatech.edu/~stasko/

• 矩形のレイアウトではなく、放射状のレイアウトを使用する空間充填ビジュアライゼーション手法。

• 階層の各レベルを一周する円で示し、一番内側の円が階層の最上位に相当する。階層を持たない(1階層しかない) サンバースト・チャートは、ドーナツ・グラフのように表示されてしまう。通常は複数の階層を持ち、内側から外側に向かって階層構造が下がっていく。そのためサン・バースト（太陽の爆発）と呼ばれる。

• D3.jsでの実装例

  • http://bl.ocks.org/mbostock/4063423

• Excelで実装されている

  • https://support.office.com/ja-jp/article/Office-2016-%E3%81%A7%E3%82%B5%E3%83%B3%E3%83%90%E3%83%BC%E3%82%B9%E3%83%88%E5%9B%B3%E3%82%92%E4%BD%9C%E6%88%90%E3%81%99%E3%82%8B-4a127977-62cd-4c11-b8c7-65b84a358e0c

• Multilevel Pie Chartと呼ばれることも。

エンクロージャー・ダイアグラム（Enclosure diagrams）

領域エンコードも使用するが、包含によってトポロジーを表示する。 ツリーマップは、領域を矩形に再帰的に細分する。 サークルパッキングはサークルをネストする。サークルパッキングはツリーマップほど空間効率的ではないが、おそらくトポロジーをより容易に示す。

ツリーマップ（Treemaps）

ツリーマップは、限られた表示スペースを効率的に使用して大量の階層データを描く、空間充填ビジュアライゼーションといえる。

メリーランド大学のHuman-Computer Interaction Labで開発された。元々は、共有しているハードディスクの容量が限られていたことから、可視化することで効率よく使うために、このチャートが作られた。

ツリー構造のノードリンクダイアグラムだと、描画に必要なスペースが広すぎたので、限られたスペースを有効に活用するためだという。

• http://www.cs.umd.edu/hcil/treemap-history/

如何に知覚的に問題がないツリーマップを作るべきかについて「ツリーマップを作成するための知覚的ガイドライン」（Perceptual Guidelines for Creating Rectangular Treemaps）というタイトルでJeffrey Heerらが論文を発表している。

• http://vis.berkeley.edu/papers/treepercept/

他に以下のような論文がある。

• The Shaping of Information by Visual Metaphors. Caroline Ziemkiewicz and Robert Kosara, 2008.

• A Comparison of 2-D Visualizations of Hierarchies. Todd Barlow and Padraic Neville, 2001.

• The effect of aesthetic on the usability of data visualization. Nick Cawthon and Andrew Vande Moere, 2007.

ライブラリへの実装例

• D3.js

  • https://github.com/d3/d3-hierarchy/blob/master/README.md#treemap
  • http://bl.ocks.org/mbostock/4063582

• plotly

  • https://plot.ly/javascript/treemaps/

• Excel

  • https://support.office.com/ja-jp/article/Office-2016-%E3%81%A7%E3%83%84%E3%83%AA%E3%83%BC%E3%83%9E%E3%83%83%E3%83%97-%E3%82%B0%E3%83%A9%E3%83%95%E3%82%92%E4%BD%9C%E6%88%90%E3%81%97%E3%81%BE%E3%81%99%E3%80%82-dfe86d28-a610-4ef5-9b30-362d5c624b68

• R

  • https://flowingdata.com/2010/02/11/an-easy-way-to-make-a-treemap/

• Google Charts

  • https://developers.google.com/chart/interactive/docs/gallery/treemap

作品例

• "Map of the Market" by Martin Wattenberg

  • http://www.bewitched.com/marketmap.html
  • 彼が SmartMoney.com に在籍していたときの作品。
  • 四角形の面積が会社の時価総額に対応し、色は最後の市場終値から株価がどのように変化したかを示している。
  • 通常のツリーマップとの違いとしては、読みやすくて操作しやすさを考えて、矩形がなるべく正方形になるようなアルゴリズムを新たに採用した、とのこと。
  • http://www.bewitched.com/marketmap.html
  • 彼の作品に History Wiredもある。
  • http://americanhistory.si.edu/exhibitions/history-wired

• "Newsmap" by Marcos Weskamp

  • http://newsmap.jp/

• "How the Giants of Finance Shrank, Then Grew, Under the Financial Crisis" by AAA

  • http://www.nytimes.com/interactive/2009/09/12/business/financial-markets-graphic.html
  • 時間による変化をアニメーションで表現している。

サークルパッキング（Circle Packing）

• https://github.com/d3/d3-hierarchy/blob/master/README.md#pack
• 円のサイズは、量的データを表現する。 囲む円は各階層のおおよその累積サイズを示すが、無駄なスペースのために歪みがある。葉ノードのみを正確に比較することができる。

ツリーマップの応用例

サーキュラー・ツリー・マップ（Circular Treemap）

• http://lip.sourceforge.net/ctreemap.html
• 放射状のレイアウトを持つツリーマップ。
• 入れ子の円で階層構造と、要素の値を表現する。
• オリジナルのツリーマップと異なり、スペースを若干活用できずに犠牲にしてしまう。
• ノードのアスペクト比は常に同一（正円である）という良さがある。
• ツリーマップの作者Ben Shneidermanにはリジェクトされたらしい。

サーキュラー・パテーション（Circular Partitions）

• Tasos SidiropoulosとKrzysztof Onak作
• https://onak.pl/papers/circular_partitions_for_visualization_and_embeddings.php
• ユークリッド平面の階層的分割を実現する。アスペクト比が小さく、指定された容積制約を満たす、凸多角形の階層からなる。これらのパーティションを適用して、一般的なツリーマップの視覚化方法の自然な拡張を得る、という。またこのアルゴリズムは矩形のみを使用することに制約されず、構築されたポリゴンのアスペクト比をより良く保証することができる、とのこと。

サーキュラー・ボロノイ・ツリーマップ（Circular Voronoi Treemap）

• 放射状のレイアウトで、ボロノイを用いたツリーマップ。
• New York TimesのAmanda Coxの作品
  • http://www.nytimes.com/interactive/2008/05/03/business/20080403_SPENDING_GRAPHIC.html
• Jason Davies
  • https://www.jasondavies.com/voronoi-treemap/

パーテイション・レイアウト