Featured image of post サークル・パッキング (Circle Packing)

サークル・パッキング (Circle Packing)

サークル・パッキング(Circle Packing)は名前の通り「円(circle)」を「詰め込む(packing)」ことで、全体と部分、親子関係を視覚的に表します。階層構造(ツリー構造)を円の入れ子で表現する可視化手法 です。各ノードが円として描かれ、親ノードが子ノードを内包するように配置されます。領域分割を長方形で行うツリーマップ(Treemap)と対比され 面積の大小よりも構造的な包含関係や階層の深さを直感的に理解させる 点に特徴があります。

歴史的経緯

サークル・パッキングのアイデアは数学的には古く、**円充填問題(circle packing problem)**として19世紀から研究されてきました。

情報可視化分野でこれをチャートとして用いる試みは1990年代後半から2000年代初頭にかけて進展し、特にJeffrey HeerMike Bostock(後にD3.jsの開発者)が開発したProtovisおよびD3.jsライブラリで実用的な実装が普及しました。

D3.js公式ドキュメントには、d3.pack()レイアウトとして標準的な実装が提供されています。

データ構造

サークル・パッキングは、**階層構造(Tree / Hierarchical Data)**を入力データとします。 各ノードは以下のような構造を持ちます。

フィールド意味
nameノードの名前
valueノードの値(サイズを決定)
children子ノードの配列(階層を構成)

JSON形式の例:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
{
  "name": "root",
  "children": [
    {"name": "A", "value": 10},
    {"name": "B", "children": [
      {"name": "B1", "value": 5},
      {"name": "B2", "value": 8}
    ]}
  ]
}

目的

主な目的は、階層的なグループ関係を直感的に示すことです。 特に、「どの要素がどのグループに属しているか」「全体に対してどの程度の大きさを占めているか」を一目で把握できます。ツリーマップに比べて幾何的なバランスがとれ、視覚的に柔らかい印象を与えます。

ユースケース

サークル・パッキングは、以下のような階層的データに適しています。

  • ファイルシステム構造:フォルダ(親円)とファイル(子円)を大きさで示す
  • 生物分類:界 → 門 → 綱 → 目 → 科 → 属 → 種の階層を視覚化
  • 企業・産業構造:業種別・企業別の経済規模を比較
  • 地域別データ:都道府県→市区町村→町丁などの人口構成

これらの用途では、階層全体の構造を俯瞰しやすく、個別の値も面積からおおよそ理解できます。

特徴

観点 内容 形状 円形(重なりなし) 表現対象 階層関係・構成比 面積の意味 値の大小を相対的に示す レイアウト 再帰的充填アルゴリズム(non-overlapping packing) 視覚印象 滑らかで有機的。ツリーマップよりも構造強調型。

チャートの見方

サークル・パッキングの基本的な読み方は以下の通りです。

要素意味
円のサイズ各要素の大きさ(数値や比率など)を表します。大きい円ほど値が大きいことを示します。
親円と子円大きな円の中に小さな円が入ることで、階層構造(親カテゴリ→子カテゴリ)を表します。
多くの場合、カテゴリや変数の種類を示します。例:業種別・分類別など。
円の位置近い位置に配置される円ほど関係が深いことを示す場合があります。ただし、位置には必ずしも数理的な意味はなく、配置は見やすさ重視です。

図全体を見ることで、「どのグループが全体の中でどれくらいの割合を占めるのか」「どのグループにどの小分類が含まれているか」を同時に把握できます。

デザイン上の注意点

  • 円の大きさの比較は人間にとってやや難しいため、数値ラベルや補助色を加えるとよい。
  • 階層が深すぎる場合は可読性が落ちるため、**インタラクティブなズーム(zoomable circle packing)**が有効。
  • 配色は、階層レベルやグループ単位で統一感を持たせる。
  • 外側の円と内側の円の間に十分な余白をとり、境界の認知性を確保する。

応用例

  • Zoomable Circle Packing(D3.js公式サンプル):クリックで階層を展開し、円がアニメーション的に拡大縮小する。
  • Kaggle データ構造可視化:Notebookフォルダの階層構成を円で表す。
  • 企業ドメイン分析:グループ会社間の関係をビジュアルに表す。

代替例

手法 特徴 適する状況 ツリーマップ(Treemap) 長方形領域で面積を最適配置 面積比較を重視する場合 サンバースト(Sunburst Chart) 円環構造で階層を放射状に表現 階層深度を強調したい場合 アイシクリーム(Icicle Chart) 水平または垂直方向に階層を積む ラベルを多く表示したい場合

まとめ

サークル・パッキングは、データの階層構造を有機的かつ直感的に示す優れた手法です。数値比較には向かないものの、階層的なグループ関係を美しく提示する際に有効であり、情報構造の「形」を見せるチャートとしてデータビジュアライゼーションにおいて重要な位置を占めています。

参考・出典

Licensed under CC BY-NC-SA 4.0
Nov 16, 2025 13:02 +0900