🎬 STEP 22: アニメーショングラフ

時間とともに変化するデータを動くグラフで表現しよう！

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

アニメーショングラフの基本概念と活用場面
animation_frameパラメータによる時系列アニメーション
再生コントロール（再生・停止・スピード調整）
トランジション効果のカスタマイズ
様々なグラフタイプでのアニメーション（散布図、棒、地図、3D）
アニメーションの保存と共有方法

🎬 1. アニメーショングラフとは

なぜアニメーションが必要なのか

アニメーショングラフは、時間の経過やデータの変化を動きで表現するグラフです。静的なグラフでは表現しにくい「変化の過程」を、直感的に伝えることができます。

例えば、「日本の人口が減少している」というデータを見せるとき、1950年から2020年までの棒グラフを並べるより、年ごとに棒が伸び縮みするアニメーションの方が、変化の様子が圧倒的にわかりやすくなります。

💡 身近な例で考えてみよう

天気予報のニュースを思い出してください。

静的なグラフ：「明日の気温は東京20度、大阪22度、福岡23度」と数字を並べる
アニメーション：日本地図上で、時間とともに気温の色が変化していく動画

どちらがわかりやすいかは明らかですよね。アニメーションはストーリーを語るのに最適なツールです。

    🎬 アニメーショングラフのメリット
    
                メリット
                説明
                活用例
            
                時系列変化の表現
                データの推移を直感的に把握できる
                株価の推移、人口変動
            
                ストーリーテリング
                データで物語を語ることができる
                「なぜ売上が伸びたか」の説明
            
                注目を集める
                プレゼンで強いインパクトを与える
                経営会議での報告
            
                多次元データの表現
                X、Y、色、サイズに加えて時間軸を追加
                国別の経済発展の比較

メリット	説明	活用例
時系列変化の表現	データの推移を直感的に把握できる	株価の推移、人口変動
ストーリーテリング	データで物語を語ることができる	「なぜ売上が伸びたか」の説明
注目を集める	プレゼンで強いインパクトを与える	経営会議での報告
多次元データの表現	X、Y、色、サイズに加えて時間軸を追加	国別の経済発展の比較

アニメーションの操作方法

Plotlyで作成したアニメーショングラフには、自動的に再生コントロールが付きます。ユーザーは自由に再生・停止・任意の時点への移動ができます。

【アニメーションの操作パネル】 ┌─────────────────────────────────────────────┐ │ ▶️ 再生 ⏸️ 停止 │ │ │ │ ◀──────────●───────────▶ │ │ 2010 2015 2020 2025 │ │ ↑ │ │ スライダー │ │ （任意の時点に移動可能） │ └─────────────────────────────────────────────┘ 【各ボタンの機能】 ▶️ 再生ボタン : アニメーションを開始/再開 ⏸️ 停止ボタン : アニメーションを一時停止 🎚️ スライダー : ドラッグして任意の時点に移動

animation_frameの仕組み

Plotlyでアニメーションを作る鍵は、animation_frameパラメータです。このパラメータに列名を指定すると、その列の値ごとに「フレーム」が作成され、順番に表示されます。

【animation_frameの仕組み】例：年（year）列でアニメーションを作る場合データフレーム: ┌──────┬─────────┬────────┐ │ year │ country │ value │ ├──────┼─────────┼────────┤ │ 2020 │ Japan │ 100 │ │ 2020 │ USA │ 200 │ │ 2021 │ Japan │ 110 │ │ 2021 │ USA │ 210 │ │ 2022 │ Japan │ 120 │ │ 2022 │ USA │ 220 │ └──────┴─────────┴────────┘ animation_frame=’year’ を指定すると：フレーム1（2020年）→ フレーム2（2021年）→ フレーム3（2022年）各フレームでその年のデータだけが表示され、自動的に次のフレームに遷移する

💡 animation_groupとは

animation_groupは、フレーム間で同じ要素を追跡するためのパラメータです。

例えば、国別のデータでanimation_group=’country’を指定すると、日本のデータポイントは常に日本として表示され、アニメーション中も追跡できます。

これを指定しないと、各フレームで点がランダムに配置され、「どの国がどう変化したか」がわからなくなります。

📊 2. 基本的なアニメーションの作成

Gapminderデータセットとは

このステップでは、Gapminder（ギャップマインダー）というデータセットを使います。これは、世界各国の経済発展と健康に関する有名なデータセットで、アニメーショングラフの定番です。

【Gapminderデータセットの内容】 country : 国名 continent : 大陸（アジア、ヨーロッパ、アフリカなど） year : 年（1952〜2007年、5年ごと） lifeExp : 平均寿命（歳） pop : 人口 gdpPercap : 一人当たりGDP（ドル） iso_alpha : 国コード（3文字）このデータで有名なのが「ハンス・ロスリング」のTEDトーク。彼は、このデータのアニメーションを使って、世界が貧困から脱却していく様子を印象的に示しました。

散布図のアニメーション

まずは、最も有名な「バブルチャートアニメーション」を作成しましょう。X軸に一人当たりGDP、Y軸に平均寿命、バブルのサイズに人口を設定し、年ごとにアニメーションさせます。

以下のコードをGoogle Colabに入力して実行してください。

※ コードが横に長い場合は横スクロールできます

# ライブラリのインポート
# plotly.express: 簡単にインタラクティブなグラフを作成できるライブラリ
import plotly.express as px

# Gapminderデータセットを読み込む
# px.data.gapminder(): Plotly内蔵のサンプルデータ
gapminder = px.data.gapminder()

# アニメーション付き散布図を作成
fig = px.scatter(
    gapminder,                    # 使用するデータ
    x=’gdpPercap’,                # X軸：一人当たりGDP
    y=’lifeExp’,                  # Y軸：平均寿命
    animation_frame=’year’,       # ★アニメーションの基準（年ごと）
    animation_group=’country’,    # ★同じ国を追跡
    size=’pop’,                   # バブルのサイズ：人口
    color=’continent’,            # 色：大陸
    hover_name=’country’,         # ホバー時に国名を表示
    log_x=True,                   # X軸を対数スケールに
    size_max=60,                  # バブルの最大サイズ
    range_x=[100, 100000],        # ★X軸の範囲を固定
    range_y=[25, 90],             # ★Y軸の範囲を固定
    title=’世界各国の発展（1952-2007）’,
    labels={                      # 軸ラベルを日本語に
        ‘gdpPercap’: ‘一人当たりGDP（ドル）’,
        ‘lifeExp’: ‘平均寿命（歳）’,
        ‘pop’: ‘人口’
    },
    height=700                    # グラフの高さ
)

# グラフを表示
fig.show()

💡 コードのポイント解説

パラメータ	意味	なぜ必要か
`animation_frame='year'`	年ごとにフレームを作成	アニメーションの基準を指定
`animation_group='country'`	国ごとに点を追跡	同じ国の変化を追える
`range_x=[100, 100000]`	X軸の範囲を固定	軸が動かず見やすい
`range_y=[25, 90]`	Y軸の範囲を固定	軸が動かず見やすい
`log_x=True`	X軸を対数スケールに	GDP差が大きいため

⚠️ range_x/range_yを固定する理由

range_x/range_yを指定しないと、毎フレームで軸の範囲が変わってしまいます。これでは、データが動いているのか軸が動いているのかわからず、非常に見にくいアニメーションになります。

必ず、全データを含む範囲を事前に確認し、range_x/range_yで固定しましょう。

棒グラフのアニメーション

棒グラフでもアニメーションが作れます。ここでは、アジア主要国の一人当たりGDPの推移を見てみましょう。

※ コードが横に長い場合は横スクロールできます

import plotly.express as px

# Gapminderデータを読み込み
gapminder = px.data.gapminder()

# アジアのデータのみ抽出
asia = gapminder[gapminder[‘continent’] == ‘Asia’]

# 主要国のみに絞り込む
# isin(): リストに含まれる値だけ抽出
countries = [‘China’, ‘India’, ‘Japan’, ‘South Korea’, ‘Thailand’]
data = asia[asia[‘country’].isin(countries)]

# 年ごとの棒グラフアニメーション
fig = px.bar(
    data,
    x=’country’,                  # X軸：国名
    y=’gdpPercap’,                # Y軸：一人当たりGDP
    animation_frame=’year’,       # 年ごとにアニメーション
    animation_group=’country’,    # 国ごとに追跡
    color=’country’,              # 国ごとに色分け
    range_y=[0, 35000],           # Y軸の範囲を固定（重要！）
    title=’アジア主要国の一人当たりGDP推移’,
    labels={
        ‘country’: ‘国’,
        ‘gdpPercap’: ‘一人当たりGDP（ドル）’
    },
    height=600
)

fig.show()

💡 このアニメーションからわかること

日本：1952年時点ですでに高く、その後も成長（1990年代にピーク）
韓国：1960年代は低かったが、急成長して日本に追いつく勢い
中国・インド：長らく低迷していたが、2000年代から急成長
タイ：着実に成長しているが、日韓ほどの急成長ではない

⚙️ 3. アニメーション設定のカスタマイズ

なぜカスタマイズが必要か

デフォルトのアニメーション設定は、多くの場合うまく機能しますが、再生速度や遷移の滑らかさを調整したい場面があります。

例えば、プレゼンテーションでは「ゆっくり見せたい」、Webサイトでは「テンポよく見せたい」など、用途によって最適な設定が異なります。

    📊 アニメーション設定の主なパラメータ
    
                パラメータ
                意味
                デフォルト
            
                frame.duration
                各フレームの表示時間（ミリ秒）
                500ms
            
                transition.duration
                フレーム間の遷移時間（ミリ秒）
                500ms

パラメータ	意味	デフォルト
frame.duration	各フレームの表示時間（ミリ秒）	500ms
transition.duration	フレーム間の遷移時間（ミリ秒）	500ms

【frame.durationとtransition.durationの違い】時間の流れ： ├─ frame 1 ─┼── 遷移 ──┼─ frame 2 ─┼── 遷移 ──┼─ frame 3 ─┤ ↑ ↑ duration transition frame.duration = 1000の場合：各フレームが1秒間表示される transition.duration = 500の場合：フレーム間の遷移に0.5秒かける（点が滑らかに移動する時間）【推奨設定】・速いテンポ : duration=300, transition=200 ・標準 : duration=500, transition=500 ・ゆっくり : duration=1000, transition=800 ・じっくり見せる: duration=1500, transition=1000

再生速度とトランジションの調整

以下のコードで、アニメーションの速度を調整できます。fig.layout.updatemenusを使って設定を変更します。

※ コードが横に長い場合は横スクロールできます

import plotly.express as px

gapminder = px.data.gapminder()
asia = gapminder[gapminder[‘continent’] == ‘Asia’]

# 基本のアニメーション散布図を作成
fig = px.scatter(
    asia,
    x=’gdpPercap’,
    y=’lifeExp’,
    animation_frame=’year’,
    animation_group=’country’,
    size=’pop’,
    color=’country’,
    hover_name=’country’,
    log_x=True,
    size_max=50,
    range_x=[100, 100000],
    range_y=[20, 90],
    title=’アジア諸国の発展（カスタム速度設定）’,
    height=600
)

# ★ アニメーション速度をカスタマイズ ★
# frame[‘duration’]: 各フレームの表示時間（ミリ秒）
# transition[‘duration’]: フレーム間の遷移時間（ミリ秒）
fig.layout.updatemenus[0].buttons[0].args[1][‘frame’][‘duration’] = 1000      # 1秒
fig.layout.updatemenus[0].buttons[0].args[1][‘transition’][‘duration’] = 500  # 0.5秒

fig.show()

💡 速度設定のコードの意味

fig.layout.updatemenus[0].buttons[0].args[1]は、再生ボタンの設定にアクセスしています。

updatemenus[0]：最初のメニュー（再生/停止ボタン）
buttons[0]：最初のボタン（再生ボタン）
args[1]：ボタンの引数（アニメーション設定）
['frame']['duration']：フレームの表示時間
['transition']['duration']：遷移時間

ボタンとスライダーの位置調整

再生ボタンやスライダーの位置を調整したい場合は、update_layout()を使います。

※ コードが横に長い場合は横スクロールできます

import plotly.express as px

gapminder = px.data.gapminder()

fig = px.scatter(
    gapminder,
    x=’gdpPercap’,
    y=’lifeExp’,
    animation_frame=’year’,
    size=’pop’,
    color=’continent’,
    log_x=True,
    size_max=60,
    range_x=[100, 100000],
    range_y=[25, 90],
    title=’世界各国の発展’,
    height=700
)

# ボタンとスライダーの位置を調整
fig.update_layout(
    # 再生/停止ボタンの設定
    updatemenus=[
        dict(
            type=’buttons’,
            showactive=False,
            y=1.15,          # Y位置（1より大きいとグラフの上）
            x=0.1,           # X位置（0〜1）
            xanchor=’left’,  # X方向の基準点
            yanchor=’top’    # Y方向の基準点
        )
    ],
    # スライダーの設定
    sliders=[
        dict(
            active=0,        # 初期位置
            y=-0.05,         # Y位置（負の値でグラフの下）
            len=0.9          # スライダーの長さ（0〜1）
        )
    ]
)

fig.show()

【位置調整のパラメータ】ボタンの位置： x=0.0 : 左端 x=0.5 : 中央 x=1.0 : 右端 y=1.0 : グラフ上端 y=1.15 : グラフより上スライダーの位置： y=0.0 : グラフ下端 y=-0.05 : グラフより少し下（推奨） len=0.9 : スライダーの長さ（0.9=グラフ幅の90%）

🎨 4. 高度なアニメーション例

洗練されたバブルチャートアニメーション

ここまでの知識を組み合わせて、プレゼンテーションで使える本格的なバブルチャートアニメーションを作成しましょう。マーカーのスタイル、レイアウト、アニメーション速度をすべてカスタマイズします。

※ コードが横に長い場合は横スクロールできます

import plotly.express as px

# Gapminder全データを使用
gapminder = px.data.gapminder()

# 詳細設定のバブルチャート
fig = px.scatter(
    gapminder,
    x=’gdpPercap’,
    y=’lifeExp’,
    animation_frame=’year’,
    animation_group=’country’,
    size=’pop’,
    color=’continent’,
    hover_name=’country’,
    log_x=True,
    size_max=60,
    range_x=[100, 100000],
    range_y=[25, 90],
    title=’📊 世界の発展: 健康と富（1952-2007）’,
    labels={
        ‘gdpPercap’: ‘一人当たりGDP（ドル、対数スケール）’,
        ‘lifeExp’: ‘平均寿命（歳）’,
        ‘pop’: ‘人口’,
        ‘continent’: ‘大陸’
    },
    height=750
)

# マーカー（バブル）のスタイルをカスタマイズ
fig.update_traces(
    marker=dict(
        opacity=0.7,                           # 透明度（重なりを見やすく）
        line=dict(width=0.5, color=’white’)    # 白い枠線
    )
)

# レイアウト全体を調整
fig.update_layout(
    # X軸の設定
    xaxis=dict(
        showgrid=True,
        gridcolor=’lightgray’,
        title_font=dict(size=14, color=’darkblue’)
    ),
    # Y軸の設定
    yaxis=dict(
        showgrid=True,
        gridcolor=’lightgray’,
        title_font=dict(size=14, color=’darkblue’)
    ),
    # タイトルの設定
    title_font=dict(size=20),
    # 凡例の設定
    showlegend=True,
    legend=dict(
        title=dict(text=’大陸’, font=dict(size=14)),
        font=dict(size=12)
    )
)

# アニメーション速度をカスタマイズ（ゆっくりめ）
fig.layout.updatemenus[0].buttons[0].args[1][‘frame’][‘duration’] = 800
fig.layout.updatemenus[0].buttons[0].args[1][‘transition’][‘duration’] = 600

fig.show()

地図上のアニメーション

scatter_geo()を使うと、世界地図上でアニメーションを表示できます。国別の人口やGDPの変化を、地理的な位置関係とともに可視化できます。

※ コードが横に長い場合は横スクロールできます

import plotly.express as px

gapminder = px.data.gapminder()

# 地図上でのアニメーション
fig = px.scatter_geo(
    gapminder,
    locations=’iso_alpha’,        # 国コード（3文字）で位置を指定
    color=’continent’,            # 大陸で色分け
    hover_name=’country’,         # ホバー時に国名を表示
    size=’pop’,                   # バブルサイズ：人口
    animation_frame=’year’,       # 年ごとにアニメーション
    projection=’natural earth’,   # 地図の投影法
    size_max=50,                  # バブルの最大サイズ
    title=’世界人口の推移（1952-2007）’,
    height=600
)

# 地図のスタイルを調整
fig.update_layout(
    geo=dict(
        showframe=False,              # 枠線を非表示
        showcoastlines=True,          # 海岸線を表示
        projection_type=’equirectangular’  # 投影法
    )
)

fig.show()

【地図の投影法（projection）の種類】 natural earth : 自然な見た目（おすすめ） equirectangular : 正距円筒図法（シンプル） orthographic : 地球儀のような見た目 mercator : メルカトル図法（Googleマップ風） robinson : ロビンソン図法用途に応じて選択。一般的には’natural earth’が見やすい。

3Dアニメーション

Plotlyは3Dグラフでもアニメーションが可能です。X、Y、Zの3軸に加えて時間軸を追加し、4次元のデータを可視化できます。

※ コードが横に長い場合は横スクロールできます

import plotly.express as px

gapminder = px.data.gapminder()

# 主要国のみに絞り込む
countries = [‘United States’, ‘China’, ‘Japan’, ‘Germany’, 
            ‘United Kingdom’, ‘France’, ‘India’, ‘Brazil’]
data = gapminder[gapminder[‘country’].isin(countries)]

# 3D散布図のアニメーション
fig = px.scatter_3d(
    data,
    x=’gdpPercap’,                # X軸：一人当たりGDP
    y=’lifeExp’,                  # Y軸：平均寿命
    z=’pop’,                      # Z軸：人口
    animation_frame=’year’,       # 年ごとにアニメーション
    animation_group=’country’,    # 国ごとに追跡
    color=’country’,              # 国で色分け
    hover_name=’country’,
    log_x=True,                   # X軸を対数スケールに
    size=’pop’,                   # バブルサイズ：人口
    size_max=30,
    range_x=[100, 100000],
    range_y=[40, 85],
    range_z=[0, 1.5e9],           # 人口の範囲
    title=’主要国の発展（3Dアニメーション）’,
    height=700
)

# 軸ラベルを日本語に
fig.update_layout(
    scene=dict(
        xaxis_title=’一人当たりGDP’,
        yaxis_title=’平均寿命’,
        zaxis_title=’人口’
    )
)

fig.show()

💡 3Dアニメーションの操作方法

ドラッグ：視点を回転
スクロール：ズームイン/アウト
ダブルクリック：視点をリセット
再生ボタン：アニメーション開始

💾 5. アニメーションの保存と共有

保存方法の選択肢

作成したアニメーションを保存・共有する方法はいくつかあります。最も簡単で推奨される方法はHTMLファイルとして保存することです。

    📊 アニメーションの保存方法
    
        
                方法
                メリット
                デメリット
                おすすめ度
            

        
                HTML保存
                インタラクティブ、簡単
                ブラウザが必要
                ★★★
            

                PNG保存（静止画）
                どこでも表示可能
                アニメーションしない
                ★★☆
            

                画面録画→動画
                どこでも再生可能
                手間がかかる
                ★★☆
            

                GIF変換
                SNSで共有しやすい
                外部ツールが必要
                ★☆☆
            

    

方法	メリット	デメリット	おすすめ度
HTML保存	インタラクティブ、簡単	ブラウザが必要	★★★
PNG保存（静止画）	どこでも表示可能	アニメーションしない	★★☆
画面録画→動画	どこでも再生可能	手間がかかる	★★☆
GIF変換	SNSで共有しやすい	外部ツールが必要	★☆☆

HTMLファイルとして保存（推奨）

write_html()メソッドを使うと、アニメーショングラフをHTMLファイルとして保存できます。このHTMLファイルをブラウザで開けば、インタラクティブなアニメーションが再生できます。

※ コードが横に長い場合は横スクロールできます

import plotly.express as px

gapminder = px.data.gapminder()

# アニメーショングラフを作成
fig = px.scatter(
    gapminder,
    x=’gdpPercap’,
    y=’lifeExp’,
    animation_frame=’year’,
    animation_group=’country’,
    size=’pop’,
    color=’continent’,
    log_x=True,
    size_max=60,
    range_x=[100, 100000],
    range_y=[25, 90],
    title=’世界各国の発展（1952-2007）’,
    height=700
)

# HTMLファイルとして保存
# write_html(): グラフをHTMLファイルとして出力
fig.write_html(‘gapminder_animation.html’)

print(“✅ gapminder_animation.html として保存されました！”)
print(“このファイルをブラウザで開くとアニメーションを再生できます。”)

【保存されたHTMLファイルの特徴】・ファイルサイズ：約1〜5MB（データ量による）・必要なもの：Webブラウザのみ・インターネット：不要（オフラインで動作）・共有方法：メール添付、クラウドストレージなど【Google Colabでの保存先】 Google Colabで実行した場合、ファイルは左側の「ファイル」パネルに保存されます。右クリック→ダウンロードで自分のPCに保存できます。

静止画（特定フレーム）の保存

アニメーション全体ではなく、特定の年のフレームだけを画像として保存したい場合は、その年のデータだけを抽出してグラフを作成し、PNGとして保存します。

※ コードが横に長い場合は横スクロールできます

# 注意: PNG保存にはkaleidoパッケージが必要
# インストール: !pip install kaleido

import plotly.express as px

gapminder = px.data.gapminder()

# 特定の年（2007年）のデータのみ抽出
data_2007 = gapminder[gapminder[‘year’] == 2007]

# 静止画としてグラフを作成（アニメーションなし）
fig = px.scatter(
    data_2007,
    x=’gdpPercap’,
    y=’lifeExp’,
    size=’pop’,
    color=’continent’,
    hover_name=’country’,
    log_x=True,
    size_max=60,
    title=’2007年の世界各国の発展’,
    height=600
)

# PNG画像として保存
# write_image(): 画像ファイルとして出力
fig.write_image(‘gapminder_2007.png’, width=1200, height=800)

print(“✅ gapminder_2007.png として保存されました！”)

⚠️ kaleidoのインストールについて

PNG/JPG/SVGなどの画像として保存するには、kaleidoというパッケージが必要です。Google Colabでは以下のコマンドでインストールできます。

!pip install kaleido

🎯 6. 実践例：ビジネスデータのアニメーション

月次売上推移のアニメーション

実際のビジネスシーンを想定して、商品別の月次売上推移をアニメーションで表現してみましょう。サンプルデータを生成して、棒グラフアニメーションを作成します。

※ コードが横に長い場合は横スクロールできます

import plotly.express as px
import pandas as pd
import numpy as np

# サンプルデータを生成
np.random.seed(42)  # 再現性のため

# データを格納するリスト
months = []
products = []
sales = []
years = []

# 商品リストと月リスト
product_list = [‘A商品’, ‘B商品’, ‘C商品’, ‘D商品’, ‘E商品’]
month_list = [‘1月’, ‘2月’, ‘3月’, ‘4月’, ‘5月’, ‘6月’]

# 3年分のデータを生成
for year in [2022, 2023, 2024]:
    for month in month_list:
        for product in product_list:
            months.append(month)
            products.append(product)
            years.append(year)
            # 年とともに売上が増加するトレンド
            base = 100 + (year – 2022) * 20
            sales.append(base + np.random.randint(-20, 30))

# データフレームを作成
df = pd.DataFrame({
    ‘年’: years,
    ‘月’: months,
    ‘商品’: products,
    ‘売上’: sales
})

# 年月を結合して1つの列に
df[‘年月’] = df[‘年’].astype(str) + ‘年’ + df[‘月’]

# アニメーション棒グラフ
fig = px.bar(
    df,
    x=’商品’,
    y=’売上’,
    color=’商品’,
    animation_frame=’年月’,       # 年月でアニメーション
    animation_group=’商品’,       # 商品ごとに追跡
    range_y=[0, 200],             # Y軸の範囲を固定
    title=’📈 商品別月次売上推移（2022-2024）’,
    labels={
        ‘商品’: ‘商品名’,
        ‘売上’: ‘売上（万円）’
    },
    height=600
)

# アニメーション速度を調整（やや速め）
fig.layout.updatemenus[0].buttons[0].args[1][‘frame’][‘duration’] = 600
fig.layout.updatemenus[0].buttons[0].args[1][‘transition’][‘duration’] = 400

fig.show()

💡 このアニメーションの活用例

経営会議：過去3年の売上推移を視覚的に報告
営業チーム：どの商品が成長しているかを共有
マーケティング：キャンペーン効果の時系列確認

累積データのアニメーション

累積売上（日ごとに足し合わせた売上）のアニメーションも効果的です。右肩上がりに伸びていく様子を可視化できます。

※ コードが横に長い場合は横スクロールできます

import plotly.express as px
import pandas as pd
import numpy as np

# サンプルデータを生成
np.random.seed(42)

# 2024年1月〜6月の日付を生成
dates = pd.date_range(‘2024-01-01’, ‘2024-06-30′, freq=’D’)

# 累積売上データを作成
data = []
cumulative = 0
for i, date in enumerate(dates):
    daily_sales = 10 + np.random.randint(-5, 15)  # 日次売上
    cumulative += daily_sales                       # 累積
    data.append({
        ‘日付’: date,
        ‘日次売上’: daily_sales,
        ‘累積売上’: cumulative
    })

df = pd.DataFrame(data)

# 月の列を追加（アニメーション用）
df[‘月’] = df[‘日付’].dt.strftime(‘%Y年%m月’)

# 累積売上の折れ線グラフアニメーション
fig = px.line(
    df,
    x=’日付’,
    y=’累積売上’,
    animation_frame=’月’,         # 月ごとにアニメーション
    range_x=[df[‘日付’].min(), df[‘日付’].max()],
    range_y=[0, df[‘累積売上’].max() * 1.1],
    title=’📊 2024年 累積売上推移’,
    labels={
        ‘日付’: ‘日付’,
        ‘累積売上’: ‘累積売上（万円）’
    },
    height=600
)

# 線のスタイルを調整
fig.update_traces(
    line=dict(color=’steelblue’, width=3)
)

fig.show()

📝 STEP 22 のまとめ

    ✅ このステップで学んだこと
    
                トピック
                重要ポイント
            
                animation_frame
                時系列データをアニメーション化。年や月を指定
            
                animation_group
                同じ要素（国、商品など）をフレーム間で追跡
            
                range_x/range_y
                軸の範囲を固定。見やすいアニメーションの鍵
            
                速度調整
                frame.duration/transition.durationで調整
            
                様々なグラフ
                散布図、棒、折れ線、地図、3Dすべてで可能
            
                HTML保存
                write_html()でインタラクティブに共有

トピック	重要ポイント
animation_frame	時系列データをアニメーション化。年や月を指定
animation_group	同じ要素（国、商品など）をフレーム間で追跡
range_x/range_y	軸の範囲を固定。見やすいアニメーションの鍵
速度調整	frame.duration/transition.durationで調整
様々なグラフ	散布図、棒、折れ線、地図、3Dすべてで可能
HTML保存	write_html()でインタラクティブに共有

💡 最重要ポイント

アニメーショングラフはデータの時間的変化を直感的に伝える最強の手法です。覚えておくべき3つのポイント：

animation_frame：アニメーションの基準列を指定
range_x/range_y：軸の範囲を必ず固定する
write_html()：HTMLとして保存して共有

これでPlotlyのインタラクティブ可視化の基礎は完璧です！次のステップでは、サンキーダイアグラムという特殊な可視化を学びます！

📝 実践演習

演習 1 基礎

Gapminderデータで、アジア諸国のみを使った年ごとのアニメーション散布図を作成してください。

【解答例】

import plotly.express as px

# データ読み込み
gapminder = px.data.gapminder()

# アジアのみ抽出
asia = gapminder[gapminder[‘continent’] == ‘Asia’]

# アニメーション散布図
fig = px.scatter(
    asia,
    x=’gdpPercap’,
    y=’lifeExp’,
    animation_frame=’year’,       # 年でアニメーション
    animation_group=’country’,    # 国を追跡
    size=’pop’,
    color=’country’,
    hover_name=’country’,
    log_x=True,
    size_max=50,
    range_x=[100, 100000],        # X軸の範囲を固定
    range_y=[20, 90],             # Y軸の範囲を固定
    title=’アジア諸国の発展’,
    height=600
)

fig.show()

演習 2 応用

GapminderデータからG7諸国を抽出し、年ごとの平均寿命を棒グラフアニメーションで表示してください。

【解答例】

import plotly.express as px

gapminder = px.data.gapminder()

# G7諸国のリスト
g7 = [‘United States’, ‘United Kingdom’, ‘France’, ‘Germany’, 
      ‘Italy’, ‘Canada’, ‘Japan’]

# G7のデータのみ抽出
data = gapminder[gapminder[‘country’].isin(g7)]

# 棒グラフアニメーション
fig = px.bar(
    data,
    x=’country’,
    y=’lifeExp’,
    animation_frame=’year’,       # 年でアニメーション
    animation_group=’country’,    # 国を追跡
    color=’country’,
    range_y=[60, 85],             # Y軸の範囲を固定
    title=’G7諸国の平均寿命推移’,
    labels={
        ‘country’: ‘国’,
        ‘lifeExp’: ‘平均寿命（歳）’
    },
    height=600
)

fig.show()

演習 3 発展

Gapminderデータで、大陸別の人口推移を世界地図上でアニメーション表示してください。

【解答例】

import plotly.express as px

gapminder = px.data.gapminder()

# 地図上のアニメーション
fig = px.scatter_geo(
    gapminder,
    locations=’iso_alpha’,        # 国コードで位置を指定
    color=’continent’,            # 大陸で色分け
    hover_name=’country’,
    size=’pop’,                   # バブルサイズ：人口
    animation_frame=’year’,       # 年でアニメーション
    projection=’natural earth’,   # 投影法
    size_max=60,
    title=’世界人口の推移（1952-2007）’,
    height=600
)

# 地図のスタイル調整
fig.update_layout(
    geo=dict(
        showframe=False,
        showcoastlines=True
    )
)

fig.show()

❓ よくある質問

Q1: アニメーションが飛び飛びに動きます。なめらかにするにはどうすればいいですか？

transition.durationを長くしましょう。例えば1000msに設定すると、フレーム間の遷移が1秒かけてなめらかになります。

また、データポイント数が少ないと飛び飛びに見えることがあります。中間のデータポイントを補間（interpolation）することも検討してください。

Q2: range_x/range_yを固定しないとどうなりますか？

軸の範囲が毎フレーム変わって非常に見づらくなります。

特に棒グラフでは、値が変わるたびにスケールが変わり、「実際にはあまり変化していないのに大きく変化したように見える」といった誤解を招きます。

必ず、全データを含む範囲を事前に確認し、range_x/range_yで固定しましょう。

Q3: アニメーションをGIFや動画で保存できますか？

Plotly単体では直接GIF/動画化はできません。以下の方法があります：

HTMLで共有（推奨）：最も簡単でインタラクティブ
画面録画：OBS、QuickTime、Windows Game Barなどで録画
各フレームをPNG保存→外部ツールでGIF化：ImageMagick、FFmpegなど

Q4: アニメーションの再生速度を最初から変えることはできますか？

はい、できます。以下のコードで設定できます：

fig.layout.updatemenus[0].buttons[0].args[1][‘frame’][‘duration’] = 1000
fig.layout.updatemenus[0].buttons[0].args[1][‘transition’][‘duration’] = 500

duration=1000で1秒、transition=500で0.5秒の遷移になります。

Q5: 大量のデータでアニメーションを作ると遅くなります。対処法はありますか？

以下の方法でパフォーマンスを改善できます：

データをサンプリング：df.sample(1000)などで件数を減らす
マーカーサイズを小さく：size_maxを下げる
フレーム数を減らす：毎年ではなく5年ごとなど
透明度を下げる：marker=dict(opacity=0.5)で軽量化

📝

学習メモ

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

📋 過去のメモ一覧 ▼