🌳 STEP 24: ツリーマップとサンバーストチャート

階層構造を持つデータを効果的に可視化しよう!

📋 このステップで学ぶこと

階層構造データとは何か、なぜ可視化が重要か
ツリーマップ（Treemap）の作成と活用方法
サンバーストチャート（Sunburst）の作成方法
クリックで階層を深掘りするドリルダウン機能
実務例（予算配分、ファイルシステム、売上分析）
カスタマイズとインタラクティブ機能

🌳 1. 階層構造データとは

なぜ階層構造の可視化を学ぶのか

私たちの身の回りには、親子関係を持つデータがたくさんあります。

例えば、会社の組織図は「会社 → 部門 → チーム → 個人」という階層になっています。パソコンのフォルダも「Cドライブ → Documents → Projects → ファイル」という階層構造です。

このような階層構造データを表やリストで見ると、全体像を把握するのが難しくなります。しかし、ツリーマップやサンバーストチャートを使うと、階層の深さや各要素の大きさを一目で理解できます。

【階層構造の例：会社の組織図】企業全体（親） ├── 営業部（子） │ ├── 東日本営業（孫） │ └── 西日本営業（孫） ├── 開発部（子） │ ├── フロントエンド（孫） │ └── バックエンド（孫） └── 管理部（子） ├── 人事（孫） └── 経理（孫）【用語の説明】・親（Parent）: 上位の要素・子（Child）: 下位の要素・ルート（Root）: 最上位の要素（この例では「企業全体」）・リーフ（Leaf）: 最下位の要素（子を持たない要素）

階層構造データの可視化方法

階層構造を可視化する方法はいくつかありますが、このステップでは特に実務で役立つツリーマップとサンバーストチャートを学びます。

    🌳 階層構造データの可視化方法
    
                方法
                特徴
                向いている用途
            
                ツリーマップ
                四角形の大きさで量を表現
                予算配分、市場シェア、ディスク使用量
            
                サンバーストチャート
                円形で階層を表現（美しい）
                組織図、カテゴリ分類、プレゼン向け
            
                ツリー図
                枝分かれで関係性を表現
                意思決定ツリー、家系図
            
                インデントツリー
                リスト形式でシンプル
                ファイル一覧、目次

方法	特徴	向いている用途
ツリーマップ	四角形の大きさで量を表現	予算配分、市場シェア、ディスク使用量
サンバーストチャート	円形で階層を表現（美しい）	組織図、カテゴリ分類、プレゼン向け
ツリー図	枝分かれで関係性を表現	意思決定ツリー、家系図
インデントツリー	リスト形式でシンプル	ファイル一覧、目次

💡 ツリーマップ vs サンバーストチャート

比較項目	ツリーマップ	サンバーストチャート
形状	四角形の集合	円形（ドーナツ状）
スペース効率	◎ 非常に良い	○ 普通
量の比較	◎ 面積で直感的	○ 角度で表現
階層の見やすさ	○ 入れ子で表現	◎ 輪で表現
見た目の美しさ	○ シンプル	◎ 華やか
おすすめ用途	分析、レポート	プレゼン、Web

📦 2. ツリーマップ（Treemap）

ツリーマップとは

ツリーマップは、階層構造を入れ子の四角形で表現するグラフです。各四角形の面積が値の大きさを表します。

例えば、会社の部門別予算をツリーマップで表すと、予算が多い部門ほど大きな四角形になります。これにより、「どの部門にお金がたくさん使われているか」が一目でわかります。

データ構造の理解

ツリーマップを作るには、3つのリストが必要です。

【ツリーマップに必要なデータ構造】 data = dict( labels=[…], # 各ノードの名前 parents=[…], # 親ノードの名前（ルートは空文字 ”） values=[…] # 各ノードの値（面積を決定） ) 【具体例で理解しよう】 labels = [‘全体’, ‘A部門’, ‘B部門’, ‘A1’, ‘A2’, ‘B1’, ‘B2’] parents = [”, ‘全体’, ‘全体’, ‘A部門’, ‘A部門’, ‘B部門’, ‘B部門’] values = [0, 0, 0, 30, 20, 40, 25] ↓ これは以下の構造を表しています全体（親がない = ルート） ├── A部門（親 = 全体） │ ├── A1: 30（親 = A部門） │ └── A2: 20（親 = A部門） └── B部門（親 = 全体） ├── B1: 40（親 = B部門） └── B2: 25（親 = B部門）【親ノードの値が0の理由】子ノードの値の合計が親の面積になるため、親ノード自体には値を設定しない（0にする）のが一般的です。

基本的なツリーマップ

まずは、シンプルなツリーマップを作ってみましょう。

【px.treemap()のパラメータ解説】 fig = px.treemap( data, # データ（dict形式） names=’labels’, # ノード名が入っている列名 parents=’parents’, # 親ノード名が入っている列名 values=’values’, # 値が入っている列名 title=’タイトル’ # グラフのタイトル ) 【なぜこの形式なのか】 Plotlyは「どのノードが、どのノードの子か」を parentsリストで判断しています。これにより、自由な階層構造を表現できます。

▼ 入力するコード

import plotly.express as px

# シンプルな階層データ
data = dict(
    labels=[‘全体’, ‘A部門’, ‘B部門’, ‘C部門’, 
            ‘A1’, ‘A2’, ‘B1’, ‘B2’, ‘C1’],
    parents=[”, ‘全体’, ‘全体’, ‘全体’, 
             ‘A部門’, ‘A部門’, ‘B部門’, ‘B部門’, ‘C部門’],
    values=[0, 0, 0, 0, 
            30, 20, 25, 15, 35]
)

fig = px.treemap(
    data,
    names=’labels’,
    parents=’parents’,
    values=’values’,
    title=’基本的なツリーマップ’
)

fig.update_layout(
    font_size=14,
    height=500
)

fig.show()

💡 グラフの見方

このグラフでは、C1（35）が最も大きな四角形、B2（15）が最も小さな四角形になっています。面積の大きさ = 値の大きさです。クリックすると、その階層にズームできます。

実務例: 会社の予算配分

実際のビジネスで使えるツリーマップを作成してみましょう。会社の部門別予算を可視化します。

【追加機能の解説】 color=’values’ ↑ 値に応じて色を変える（大きい値ほど濃い色） color_continuous_scale=’Blues’ ↑ 使用するカラースケール（青のグラデーション） hover_data=[‘values’] ↑ マウスホバー時に表示する追加データ fig.update_traces( textinfo=’label+value’, # 四角形内にラベルと値を表示 marker=dict( line=dict(width=2, color=’white’) # 境界線を白に ) )

▼ 入力するコード

import plotly.express as px

# 会社の予算データ
data = dict(
    labels=[
        ‘全社予算’,
        ‘営業部’, ‘開発部’, ‘管理部’,
        ‘東日本営業’, ‘西日本営業’, ‘海外営業’,
        ‘フロントエンド開発’, ‘バックエンド開発’, ‘インフラ’,
        ‘人事’, ‘経理’, ‘総務’
    ],
    parents=[
        ”,
        ‘全社予算’, ‘全社予算’, ‘全社予算’,
        ‘営業部’, ‘営業部’, ‘営業部’,
        ‘開発部’, ‘開発部’, ‘開発部’,
        ‘管理部’, ‘管理部’, ‘管理部’
    ],
    values=[
        0,
        0, 0, 0,
        3000, 2500, 1500,
        2000, 3000, 1500,
        1200, 800, 500
    ]
)

fig = px.treemap(
    data,
    names=’labels’,
    parents=’parents’,
    values=’values’,
    title=’📊 2024年度 部門別予算配分（単位: 万円）’,
    color=’values’,
    color_continuous_scale=’Blues’,
    hover_data=[‘values’]
)

fig.update_layout(
    font_size=13,
    height=600
)

fig.update_traces(
    textinfo=’label+value’,
    textfont_size=12,
    marker=dict(line=dict(width=2, color=’white’))
)

fig.show()

# 予算の分析
print(“📈 予算分析:”)
print(f”営業部: {3000+2500+1500:,}万円”)
print(f”開発部: {2000+3000+1500:,}万円”)
print(f”管理部: {1200+800+500:,}万円”)
print(f”全社合計: {sum([3000,2500,1500,2000,3000,1500,1200,800,500]):,}万円”)

▼ 実行結果

📈 予算分析: 営業部: 7,000万円開発部: 6,500万円管理部: 2,500万円全社合計: 16,000万円

🎨 3. ツリーマップのカスタマイズ

カテゴリごとに色を分ける

値の大きさではなく、カテゴリで色分けしたい場合があります。例えば、「営業部は青、開発部は緑、管理部はオレンジ」のように分けると、部門の違いが一目でわかります。

【カテゴリ別色分けの方法】 # 1. 各ノードにカテゴリを割り当てる colors=[”, ‘A’, ‘B’, ‘C’, ‘A’, ‘A’, ‘A’, ‘B’, ‘B’, ‘C’, ‘C’] # 2. カラーマップを定義 color_map = { ‘A’: ‘#FF6B6B’, # 赤 ‘B’: ‘#4ECDC4’, # 青緑 ‘C’: ‘#45B7D1′ # 青 } # 3. px.treemapで指定 fig = px.treemap( data, …, color=’colors’, # カテゴリ列を指定 color_discrete_map=color_map # カラーマップを適用 )

▼ 入力するコード

import plotly.express as px

data = dict(
    labels=[‘全体’, ‘カテゴリA’, ‘カテゴリB’, ‘カテゴリC’,
            ‘A1’, ‘A2’, ‘A3’, ‘B1’, ‘B2’, ‘C1’, ‘C2’],
    parents=[”, ‘全体’, ‘全体’, ‘全体’,
             ‘カテゴリA’, ‘カテゴリA’, ‘カテゴリA’, 
             ‘カテゴリB’, ‘カテゴリB’, 
             ‘カテゴリC’, ‘カテゴリC’],
    values=[0, 0, 0, 0,
            100, 80, 60, 90, 70, 50, 40],
    # カスタムカラー用のカテゴリ
    colors=[”, ‘A’, ‘B’, ‘C’,
            ‘A’, ‘A’, ‘A’, ‘B’, ‘B’, ‘C’, ‘C’]
)

# カテゴリごとに色を分ける
color_map = {
    ‘A’: ‘#FF6B6B’,  # 赤
    ‘B’: ‘#4ECDC4’,  # 青緑
    ‘C’: ‘#45B7D1′   # 青
}

fig = px.treemap(
    data,
    names=’labels’,
    parents=’parents’,
    values=’values’,
    color=’colors’,
    color_discrete_map=color_map,
    title=’カテゴリ別に色分けしたツリーマップ’
)

fig.update_layout(
    height=500,
    showlegend=False
)

fig.update_traces(
    marker=dict(line=dict(width=3, color=’white’))
)

fig.show()

実務例: ECサイトの売上分析

ECサイトの売上データを、カテゴリ別の売上額と前年比成長率で可視化してみましょう。成長率で色分けすることで、「どのカテゴリが伸びているか」がわかります。

【成長率で色分けする方法】 color=’growth’ # 成長率の列で色を決める color_continuous_scale=[‘#E74C3C’, ‘#F39C12’, ‘#2ECC71’] ↑ 赤 → オレンジ → 緑のグラデーションマイナス成長は赤、プラス成長は緑 color_continuous_midpoint=0 ↑ 0%を中央値（オレンジ）に設定これにより、プラス/マイナスが直感的にわかる

▼ 入力するコード

import plotly.express as px

# ECサイトの売上データ
data = dict(
    labels=[
        ‘全体売上’,
        ‘電化製品’, ‘衣料品’, ‘食品’,
        ‘スマートフォン’, ‘PC’, ‘カメラ’,
        ‘メンズ’, ‘レディース’, ‘キッズ’,
        ‘生鮮食品’, ‘加工食品’, ‘飲料’
    ],
    parents=[
        ”,
        ‘全体売上’, ‘全体売上’, ‘全体売上’,
        ‘電化製品’, ‘電化製品’, ‘電化製品’,
        ‘衣料品’, ‘衣料品’, ‘衣料品’,
        ‘食品’, ‘食品’, ‘食品’
    ],
    values=[
        0,
        0, 0, 0,
        4500, 3200, 1800,
        2100, 3400, 1200,
        1500, 2200, 1800
    ],
    # 成長率（前年比）
    growth=[
        0,
        0, 0, 0,
        15.2, 8.5, -3.2,
        12.1, 18.4, 5.6,
        22.3, 14.7, 9.8
    ]
)

fig = px.treemap(
    data,
    names=’labels’,
    parents=’parents’,
    values=’values’,
    color=’growth’,
    color_continuous_scale=[‘#E74C3C’, ‘#F39C12’, ‘#2ECC71′],
    color_continuous_midpoint=0,
    title=’📊 ECサイト売上分析（色: 前年比成長率 %）’,
    hover_data={‘growth’: ‘:.1f’}
)

fig.update_layout(
    font_size=12,
    height=600
)

fig.update_traces(
    textinfo=’label+value’,
    textfont_size=11,
    marker=dict(
        line=dict(width=2, color=’white’),
        colorbar=dict(
            title=’成長率(%)’,
            titleside=’right’
        )
    )
)

fig.show()

    📊 このグラフからわかること
    スマートフォンが最大の売上カテゴリ（4,500万円）
レディース衣料品が高成長（+18.4%）→ 緑色
カメラが唯一のマイナス成長（-3.2%）→ 赤色
食品カテゴリ全体が好調（全て2桁成長）
面積の大きさ = 売上額、色 = 成長率という2つの指標を同時に表現

☀️ 4. サンバーストチャート（Sunburst）

サンバーストチャートとは

サンバーストチャートは、階層構造を同心円状に表現するグラフです。中心がルート（最上位）で、外側に向かって階層が深くなります。

ツリーマップと比べて見た目が美しく、プレゼンテーションや報告書で人気があります。

【サンバーストチャートの読み方】 ┌─────────────────┐ ╱ ╲ ╱ 外側の輪: 孫カテゴリ ╲ │ ┌───────────────┐ │ │ ╱ 内側の輪: 子カテゴリ ╲ │ ││ ┌─────────┐ ││ ││ │ 中心: │ ││ ││ │ ルート │ ││ ││ └─────────┘ ││ │ ╲ ╱ │ │ └───────────────┘ │ ╲ ╱ ╲ ╱ └─────────────────┘ 【各部分の意味】・中心: ルート（最上位の親）・内側の輪: 第1階層（子）・外側の輪: 第2階層（孫）・角度（扇形の大きさ）: 値の大きさ

基本的なサンバーストチャート

サンバーストチャートの作り方は、ツリーマップとほとんど同じです。px.treemap() を px.sunburst() に変えるだけで作成できます。

【px.sunburst()のパラメータ】 fig = px.sunburst( data, # データ（dict形式） names=’labels’, # ノード名が入っている列名 parents=’parents’, # 親ノード名が入っている列名 values=’values’, # 値が入っている列名 title=’タイトル’ # グラフのタイトル ) 【ツリーマップとの違い】・関数名が px.treemap() → px.sunburst() に変わるだけ・データ構造は完全に同じ・見た目だけが四角形 → 円形に変わる

▼ 入力するコード

import plotly.express as px

# 階層データ
data = dict(
    labels=[‘全体’, ‘A’, ‘B’, ‘C’, 
            ‘A1’, ‘A2’, ‘B1’, ‘B2’, ‘C1’, ‘C2’],
    parents=[”, ‘全体’, ‘全体’, ‘全体’, 
             ‘A’, ‘A’, ‘B’, ‘B’, ‘C’, ‘C’],
    values=[0, 0, 0, 0, 
            30, 25, 40, 20, 35, 15]
)

fig = px.sunburst(
    data,
    names=’labels’,
    parents=’parents’,
    values=’values’,
    title=’基本的なサンバーストチャート’
)

fig.update_layout(
    font_size=14,
    height=600
)

fig.show()

💡 サンバーストチャートの操作方法

クリック: その部分にズーム（中心が変わる）
中心をクリック: 一つ上の階層に戻る
ホバー: 詳細データを表示

実務例: ファイルシステムの容量分析

パソコンのディスク使用量を可視化してみましょう。どのフォルダが多くの容量を使っているかが一目でわかります。

【追加のカスタマイズ】 fig.update_traces( textinfo=’label+value’, # ラベルと値を表示 insidetextorientation=’radial’ # テキストを放射状に配置 ) 【insidetextorientationの選択肢】・’radial’: 放射状（外側を向く）・’tangential’: 接線方向・’horizontal’: 水平・’auto’: 自動（デフォルト）

▼ 入力するコード

import plotly.express as px

# ファイルシステムのデータ
data = dict(
    labels=[
        ‘Cドライブ’,
        ‘Program Files’, ‘Users’, ‘Windows’,
        ‘Adobe’, ‘Microsoft Office’, ‘Google’,
        ‘Documents’, ‘Pictures’, ‘Videos’,
        ‘System32’, ‘Temp’, ‘Logs’
    ],
    parents=[
        ”,
        ‘Cドライブ’, ‘Cドライブ’, ‘Cドライブ’,
        ‘Program Files’, ‘Program Files’, ‘Program Files’,
        ‘Users’, ‘Users’, ‘Users’,
        ‘Windows’, ‘Windows’, ‘Windows’
    ],
    values=[
        0,
        0, 0, 0,
        15.2, 8.5, 3.2,
        12.4, 45.8, 120.5,
        18.7, 5.3, 2.1
    ]
)

fig = px.sunburst(
    data,
    names=’labels’,
    parents=’parents’,
    values=’values’,
    title=’💾 ディスク使用量分析（単位: GB）’,
    color=’values’,
    color_continuous_scale=’Reds’
)

fig.update_layout(
    font_size=12,
    height=700
)

fig.update_traces(
    textinfo=’label+value’,
    insidetextorientation=’radial’
)

fig.show()

🎯 5. ドリルダウン機能

ドリルダウンとは

ドリルダウンとは、グラフをクリックしてより詳細な階層を見る機能です。PlotlyのツリーマップとサンバーストチャートにはこのE機能が標準で搭載されています。

例えば、世界の人口データで「アジア」をクリックすると、アジアの国々の詳細が表示されます。さらに「日本」をクリックすると、日本の都市の詳細が表示されます。

【ドリルダウンの使い方】 1. クリック: その部分にズーム例: 「アジア」をクリック → アジアの国が表示 2. 中心/左上をクリック: 一つ上の階層に戻る例: 「アジア」表示中に中心クリック → 「世界」に戻る 3. branchvalues=’total’ の設定親ノードの値を子の合計にするこれにより、親をクリックしても全体が見える

▼ 入力するコード

import plotly.express as px

# 詳細な階層データ（世界 → 大陸 → 国 → 都市）
data = dict(
    labels=[
        ‘世界’,
        ‘アジア’, ‘ヨーロッパ’, ‘アメリカ’,
        ‘日本’, ‘中国’, ‘インド’,
        ‘ドイツ’, ‘フランス’, ‘イギリス’,
        ‘アメリカ合衆国’, ‘カナダ’, ‘メキシコ’,
        ‘東京’, ‘大阪’, ‘名古屋’,
        ‘北京’, ‘上海’, ‘広州’,
        ‘ムンバイ’, ‘デリー’, ‘バンガロール’
    ],
    parents=[
        ”,
        ‘世界’, ‘世界’, ‘世界’,
        ‘アジア’, ‘アジア’, ‘アジア’,
        ‘ヨーロッパ’, ‘ヨーロッパ’, ‘ヨーロッパ’,
        ‘アメリカ’, ‘アメリカ’, ‘アメリカ’,
        ‘日本’, ‘日本’, ‘日本’,
        ‘中国’, ‘中国’, ‘中国’,
        ‘インド’, ‘インド’, ‘インド’
    ],
    values=[
        0,
        0, 0, 0,
        0, 0, 0,
        8300, 6700, 6800,
        33100, 3800, 12900,
        1395, 883, 232,
        2154, 2424, 1508,
        2095, 3255, 1045
    ]
)

fig = px.sunburst(
    data,
    names=’labels’,
    parents=’parents’,
    values=’values’,
    title=’🌍 世界の都市人口（万人）- クリックでドリルダウン’,
    branchvalues=’total’  # 親の値を子の合計にする
)

fig.update_layout(
    font_size=13,
    height=700
)

fig.update_traces(
    insidetextorientation=’radial’,
    marker=dict(
        line=dict(width=2, color=’white’)
    )
)

fig.show()

💡 ドリルダウンを試してみよう！

上のグラフで以下の操作を試してください：

「アジア」をクリック → アジアの国（日本、中国、インド）が表示
「日本」をクリック → 日本の都市（東京、大阪、名古屋）が表示
中心をクリック → 一つ上の階層に戻る

ツリーマップでも同じデータを表示

同じデータをツリーマップで表示してみましょう。サンバーストチャートとの違いを確認してください。

▼ 入力するコード

import plotly.express as px

# 同じデータをツリーマップで表示
data = dict(
    labels=[
        ‘世界’,
        ‘アジア’, ‘ヨーロッパ’, ‘アメリカ’,
        ‘日本’, ‘中国’, ‘インド’,
        ‘ドイツ’, ‘フランス’, ‘イギリス’,
        ‘アメリカ合衆国’, ‘カナダ’, ‘メキシコ’,
        ‘東京’, ‘大阪’, ‘名古屋’,
        ‘北京’, ‘上海’, ‘広州’,
        ‘ムンバイ’, ‘デリー’, ‘バンガロール’
    ],
    parents=[
        ”,
        ‘世界’, ‘世界’, ‘世界’,
        ‘アジア’, ‘アジア’, ‘アジア’,
        ‘ヨーロッパ’, ‘ヨーロッパ’, ‘ヨーロッパ’,
        ‘アメリカ’, ‘アメリカ’, ‘アメリカ’,
        ‘日本’, ‘日本’, ‘日本’,
        ‘中国’, ‘中国’, ‘中国’,
        ‘インド’, ‘インド’, ‘インド’
    ],
    values=[
        0,
        0, 0, 0,
        0, 0, 0,
        8300, 6700, 6800,
        33100, 3800, 12900,
        1395, 883, 232,
        2154, 2424, 1508,
        2095, 3255, 1045
    ]
)

fig = px.treemap(
    data,
    names=’labels’,
    parents=’parents’,
    values=’values’,
    title=’🌍 世界の都市人口（万人）- ツリーマップ版’,
    color=’values’,
    color_continuous_scale=’Viridis’
)

fig.update_layout(
    font_size=12,
    height=700
)

fig.update_traces(
    textinfo=’label+value’,
    marker=dict(
        line=dict(width=2, color=’white’)
    )
)

fig.show()

💼 6. 実務での活用例

例1: 会社組織の人員配置

会社の組織図と人員配置をサンバーストチャートで可視化します。部門ごとに色分けすることで、組織構造が一目でわかります。

▼ 入力するコード

import plotly.express as px

# 組織の人員データ
data = dict(
    labels=[
        ‘全社’,
        ‘営業本部’, ‘技術本部’, ‘管理本部’,
        ‘国内営業’, ‘海外営業’, ‘営業企画’,
        ‘開発部’, ‘インフラ部’, ‘QA部’,
        ‘人事部’, ‘経理部’, ‘法務部’,
        ‘東日本’, ‘西日本’, ‘アジア’, ‘アメリカ’, ‘ヨーロッパ’,
        ‘フロントエンド’, ‘バックエンド’, ‘モバイル’
    ],
    parents=[
        ”,
        ‘全社’, ‘全社’, ‘全社’,
        ‘営業本部’, ‘営業本部’, ‘営業本部’,
        ‘技術本部’, ‘技術本部’, ‘技術本部’,
        ‘管理本部’, ‘管理本部’, ‘管理本部’,
        ‘国内営業’, ‘国内営業’, ‘海外営業’, ‘海外営業’, ‘海外営業’,
        ‘開発部’, ‘開発部’, ‘開発部’
    ],
    values=[
        0,
        0, 0, 0,
        0, 0, 8,
        0, 15, 12,
        18, 15, 8,
        35, 28, 12, 15, 10,
        25, 30, 18
    ],
    # 部署タイプ（色分け用）
    dept_type=[
        ”,
        ‘sales’, ‘tech’, ‘admin’,
        ‘sales’, ‘sales’, ‘sales’,
        ‘tech’, ‘tech’, ‘tech’,
        ‘admin’, ‘admin’, ‘admin’,
        ‘sales’, ‘sales’, ‘sales’, ‘sales’, ‘sales’,
        ‘tech’, ‘tech’, ‘tech’
    ]
)

color_map = {
    ‘sales’: ‘#3498DB’,   # 営業: 青
    ‘tech’: ‘#2ECC71’,    # 技術: 緑
    ‘admin’: ‘#F39C12′    # 管理: オレンジ
}

fig = px.sunburst(
    data,
    names=’labels’,
    parents=’parents’,
    values=’values’,
    color=’dept_type’,
    color_discrete_map=color_map,
    title=’👥 組織図と人員配置（総人数: 214名）’
)

fig.update_layout(
    font_size=12,
    height=700
)

fig.update_traces(
    textinfo=’label+value’,
    insidetextorientation=’radial’
)

fig.show()

例2: プロジェクトのタスク管理

プロジェクトのタスクを工数と進捗率で可視化します。進捗率で色分けすることで、「どのタスクが遅れているか」がわかります。

▼ 入力するコード

import plotly.express as px

# タスクデータ
data = dict(
    labels=[
        ‘プロジェクト’,
        ‘フェーズ1: 企画’, ‘フェーズ2: 開発’, ‘フェーズ3: テスト’,
        ‘要件定義’, ‘設計’, ‘ドキュメント作成’,
        ‘フロントエンド実装’, ‘バックエンド実装’, ‘DB構築’,
        ‘単体テスト’, ‘結合テスト’, ‘UAT’
    ],
    parents=[
        ”,
        ‘プロジェクト’, ‘プロジェクト’, ‘プロジェクト’,
        ‘フェーズ1: 企画’, ‘フェーズ1: 企画’, ‘フェーズ1: 企画’,
        ‘フェーズ2: 開発’, ‘フェーズ2: 開発’, ‘フェーズ2: 開発’,
        ‘フェーズ3: テスト’, ‘フェーズ3: テスト’, ‘フェーズ3: テスト’
    ],
    # 工数（人日）
    values=[
        0,
        0, 0, 0,
        15, 25, 8,
        35, 45, 20,
        12, 18, 10
    ],
    # 進捗率
    progress=[
        0,
        0, 0, 0,
        100, 100, 100,
        80, 70, 90,
        50, 30, 0
    ]
)

fig = px.treemap(
    data,
    names=’labels’,
    parents=’parents’,
    values=’values’,
    color=’progress’,
    color_continuous_scale=[‘#E74C3C’, ‘#F39C12’, ‘#2ECC71′],
    range_color=[0, 100],
    title=’📊 プロジェクトタスク管理（色: 進捗率 %）’
)

fig.update_layout(
    font_size=12,
    height=600
)

fig.update_traces(
    textinfo=’label+value’,
    marker=dict(
        line=dict(width=2, color=’white’),
        colorbar=dict(
            title=’進捗率(%)’,
            titleside=’right’
        )
    )
)

fig.show()

💡 このグラフの読み方

面積 = 工数（人日）の大きさ
色 = 進捗率（赤: 0%、オレンジ: 50%、緑: 100%）

フェーズ1: 企画 は全て100%完了（緑色）
フェーズ2: 開発 は70-90%進行中（黄緑〜オレンジ）
フェーズ3: テスト の UAT が0%（赤）→ 要注意

📝 STEP 24 のまとめ

    ✅ このステップで学んだこと
    
                トピック
                重要ポイント
            
                階層構造データ
                親子関係を持つデータ（labels, parents, values）
            
                ツリーマップ
                四角形で量を表現、スペース効率が良い
            
                サンバーストチャート
                円形で階層を表現、見た目が美しい
            
                ドリルダウン
                クリックで階層を深掘りできる
            
                色のカスタマイズ
                カテゴリ別、値別で色分け可能
            
                実務活用
                予算、組織、売上、タスク管理に使える

トピック	重要ポイント
階層構造データ	親子関係を持つデータ（labels, parents, values）
ツリーマップ	四角形で量を表現、スペース効率が良い
サンバーストチャート	円形で階層を表現、見た目が美しい
ドリルダウン	クリックで階層を深掘りできる
色のカスタマイズ	カテゴリ別、値別で色分け可能
実務活用	予算、組織、売上、タスク管理に使える

💡 最重要ポイント

ツリーマップとサンバーストチャートは、複雑な階層構造を直感的に理解できる強力なツールです。

ツリーマップは量の比較に、サンバーストチャートは階層の理解に優れています。どちらもドリルダウン機能により、大量のデータでも効率的に探索できます。

次のステップでは、地理的なデータを地図上に表示する方法を学びます！

📝 実践演習

演習 1 基礎

3階層の簡単なツリーマップを作成してください（全体→カテゴリ→サブカテゴリ）。

【解答】

labels、parents、valuesの3つのリストを定義し、px.treemap()に渡します。

import plotly.express as px

data = dict(
    labels=[‘全体’, ‘A’, ‘B’, ‘A1’, ‘A2’, ‘B1’, ‘B2’],
    parents=[”, ‘全体’, ‘全体’, ‘A’, ‘A’, ‘B’, ‘B’],
    values=[0, 0, 0, 30, 20, 40, 25]
)

fig = px.treemap(
    data,
    names=’labels’,
    parents=’parents’,
    values=’values’,
    title=’3階層ツリーマップ’
)

fig.update_layout(height=500)
fig.show()

演習 2 応用

サンバーストチャートで、売上データ（地域→国→都市）を表現してください。

【解答】

px.sunburst()を使い、4階層のデータを作成します。

import plotly.express as px

data = dict(
    labels=[
        ‘世界’, ‘アジア’, ‘ヨーロッパ’,
        ‘日本’, ‘中国’, ‘ドイツ’, ‘フランス’,
        ‘東京’, ‘大阪’, ‘北京’, ‘上海’, ‘ベルリン’, ‘パリ’
    ],
    parents=[
        ”, ‘世界’, ‘世界’,
        ‘アジア’, ‘アジア’, ‘ヨーロッパ’, ‘ヨーロッパ’,
        ‘日本’, ‘日本’, ‘中国’, ‘中国’, ‘ドイツ’, ‘フランス’
    ],
    values=[
        0, 0, 0,
        0, 0, 0, 0,
        500, 300, 600, 400, 350, 450
    ]
)

fig = px.sunburst(
    data,
    names=’labels’,
    parents=’parents’,
    values=’values’,
    title=’地域別売上’,
    color=’values’,
    color_continuous_scale=’Blues’
)

fig.update_layout(height=600)
fig.show()

演習 3 発展

会社の部門別予算をツリーマップで表現し、成長率で色分けしてください。

【解答】

growthリストを追加し、color=’growth’で色分けします。

import plotly.express as px

data = dict(
    labels=[
        ‘全社’, ‘営業’, ‘開発’, ‘管理’,
        ‘東日本’, ‘西日本’, ‘フロント’, ‘バック’, ‘人事’, ‘経理’
    ],
    parents=[
        ”, ‘全社’, ‘全社’, ‘全社’,
        ‘営業’, ‘営業’, ‘開発’, ‘開発’, ‘管理’, ‘管理’
    ],
    values=[
        0, 0, 0, 0,
        5000, 4000, 3000, 4000, 1500, 1000
    ],
    growth=[
        0, 0, 0, 0,
        12.5, 8.3, 15.2, 10.1, 5.4, 3.2
    ]
)

fig = px.treemap(
    data,
    names=’labels’,
    parents=’parents’,
    values=’values’,
    color=’growth’,
    color_continuous_scale=[‘#E74C3C’, ‘#F39C12’, ‘#2ECC71′],
    title=’部門別予算（色: 成長率）’
)

fig.update_layout(height=600)
fig.update_traces(
    textinfo=’label+value’,
    marker=dict(
        line=dict(width=2, color=’white’),
        colorbar=dict(title=’成長率(%)’)
    )
)

fig.show()

❓ よくある質問

Q1: ツリーマップとサンバーストチャート、どちらを使うべきですか?

目的によって使い分けましょう。

量の比較重視: ツリーマップ（面積で直感的に比較できる）
階層の理解重視: サンバーストチャート（階層の深さが視覚的に分かる）
プレゼン用: サンバーストチャート（見た目が美しい）
分析用: ツリーマップ（スペース効率が良い）

Q2: 階層が深すぎて見づらい場合はどうすればいいですか?

以下の方法を試してください：

1. 階層を分割: 重要な部分だけ別グラフにする
2. ドリルダウン活用: 最初は上位階層のみ表示
3. フィルタリング: 値が小さいものを「その他」にまとめる
4. 図のサイズ拡大: heightパラメータを大きくする

Q3: 親ノードの値はどう設定すればいいですか?

2つの方法があります：

1. 親ノード=0: 子の値の合計が親になる（branchvalues=’total’）
2. 親ノードに値設定: 親独自の値を持つ（branchvalues=’remainder’）

推奨: ほとんどの場合、親ノードは0にして子の合計を使うのがシンプルです。

Q4: DataFrameから直接ツリーマップを作れますか?

はい、path引数を使うと簡単に作れます。

fig = px.treemap(df, path=['大分類', '中分類', '小分類'], values='売上')

これにより、DataFrameの列名を指定するだけで階層構造が自動的に作成されます。

📝

学習メモ

データ可視化マスター - Step 24

📋 過去のメモ一覧 ▼