インタラクティブ可視化 ── ホバー・クリック・ズームできる可視化
PDF・論文では静的可視化が標準ですが、 Webサイト、 業務ダッシュボード、 探索的データ分析ではインタラクティブが圧倒的。 1つのグラフで複数視点を提供できます。
典型的なインタラクション機能:
インタラクティブ可視化の構成要素:
SSDSE で「都道府県別 高齢化率 vs 死亡率」をPlotlyで:
同じ情報量を静的matplotlibで作るには複数図に分ける必要があります。
最小限のスニペットで動作確認できる例。 公的データ(SSDSE 等)を想定しています。
data/raw/SSDSE-B-2026.csv。 列 A1101(人口)、 A4101(食料費)、 都道府県。1 2 3 4 5 6 7 8 9 10 11 | import plotly.express as px import pandas as pd df = pd.read_csv('data/raw/SSDSE-B-2026.csv', encoding='utf-8', skiprows=1) fig = px.scatter(df, x='高齢化率', y='死亡率', hover_name='都道府県', size='人口', color='地域', title='都道府県の高齢化率 vs 死亡率') fig.show() # ブラウザでインタラクティブに表示 # HTMLとして保存:fig.write_html('output.html') |
| ライブラリ | 言語 | 強み | 弱み |
|---|---|---|---|
| Plotly | Python/R/JS | 豊富な図種、 簡単 | ファイルが大きめ |
| Bokeh | Python | 大量点、 連動 | 学習曲線 |
| Altair | Python | 宣言的、 美しい | 大量データ弱い |
| D3.js | JS | 自由度最高 | 低レベル |
| Tableau | GUI | 非エンジニア向け | 有償 |
| Streamlit | Python | 即席Webアプリ | カスタマイズ限界 |
| ライブラリ | 言語 | 強み | 弱み |
|---|---|---|---|
| Plotly | Python/R/JS | 豊富な図種、 簡単 | ファイルが大きめ |
| Bokeh | Python | 大量点、 連動 | 学習曲線 |
| Altair | Python | 宣言的、 美しい | 大量データ弱い |
| D3.js | JS | 自由度最高 | 低レベル |
| Tableau | GUI | 非エンジニア向け | 有償 |
| Streamlit | Python | 即席Webアプリ | カスタマイズ限界 |
インタラクティブ可視化 は、 ホバー・ズーム・フィルタ等のユーザ操作を通じてデータ探索を深める手法。 静的グラフでは見えないパターンを引き出し、 「見せる」から「探させる」可視化へと役割が拡張されます。
| ライブラリ | 主言語 | 出力 | 学習コスト |
|---|---|---|---|
| Plotly | Python/JS | HTML | 低 |
| Bokeh | Python | HTML | 中 |
| Altair | Python | Vega-Lite | 中 |
| Streamlit | Python | Web app | 低 |
| D3.js | JS | SVG | 高 |
data/raw/SSDSE-B-2026.csv。 列 A1101(人口)、 A4101(食料費)、 都道府県。1 2 3 4 5 6 7 8 | # Plotly Express による散布図
import pandas as pd
df = pd.read_csv('data/raw/SSDSE-B-2026.csv', encoding='utf-8', skiprows=1)
df['高齢化率'] = df['A1301'] / df['A1101'] * 100
import plotly.express as px
fig = px.scatter(df, x='A1101', y='高齢化率', hover_name='Prefecture',
log_x=True, size_max=15)
fig.write_html('interactive_scatter.html') |
data/raw/SSDSE-B-2026.csv。 列 A1101(人口)、 A4101(食料費)、 都道府県。1 2 3 4 5 6 7 8 9 10 | # Altair : ブラシ選択でクロスフィルタ
import altair as alt
alt.data_transformers.disable_max_rows()
brush = alt.selection_interval()
chart = (alt.Chart(df).mark_circle(size=80)
.encode(x='A1101', y='高齢化率',
color=alt.condition(brush, alt.value('orange'), alt.value('gray')),
tooltip=['Prefecture','A1101','高齢化率'])
.add_params(brush))
chart.save('cross_filter.html') |
data/raw/SSDSE-B-2026.csv。 列 A1101(人口)、 A4101(食料費)、 都道府県。1 2 3 4 5 6 7 8 | # Streamlit ミニアプリ
# streamlit run app.py で起動
import streamlit as st
st.title('都道府県 高齢化率ダッシュボード')
pref = st.selectbox('都道府県', df['Prefecture'].tolist())
row = df[df['Prefecture']==pref].iloc[0]
st.metric('高齢化率', f"{row['高齢化率']:.1f} %")
st.bar_chart(df.set_index('Prefecture')['高齢化率']) |
| 用途 | ライブラリ | レンダラ | インタラクション |
|---|---|---|---|
| 探索 | Plotly Express | WebGL | ホバー/ズーム |
| ダッシュボード | Streamlit | Python→HTML | slider/select |
| 論文用 | matplotlib | PNG/PDF | なし |
| 地図 | folium | Leaflet | パン/ズーム |
| グラフ | Cytoscape.js | Canvas | ノード移動 |
data/raw/SSDSE-B-2026.csv。 列 A1101(人口)、 A4101(食料費)、 都道府県。1 2 3 4 5 6 | import pandas as pd, plotly.express as px
df = pd.read_csv('data/raw/SSDSE-B-2026.csv', encoding='utf-8', skiprows=1)
df['高齢化率'] = df['A1301']/df['A1101']*100
df_long = df[['Prefecture','高齢化率']].assign(year=2026)
fig = px.bar(df_long, x='Prefecture', y='高齢化率', animation_frame='year')
fig.write_html('anim.html') |
data/raw/SSDSE-B-2026.csv。 列 A1101(人口)、 A4101(食料費)、 都道府県。1 2 3 4 5 6 7 8 | from bokeh.plotting import figure, output_file, save
from bokeh.models import HoverTool
import pandas as pd
df = pd.read_csv('data/raw/SSDSE-B-2026.csv', encoding='utf-8', skiprows=1)
p = figure(width=700, height=400)
p.circle(df['A1101'], df['A1301'], size=10)
p.add_tools(HoverTool(tooltips=[('Pref','@x'),('Old','@y')]))
output_file('bokeh.html'); save(p) |
data/raw/SSDSE-B-2026.csv。 列 A1101(人口)、 A4101(食料費)、 都道府県。1 2 3 4 5 6 | import altair as alt, pandas as pd
alt.data_transformers.disable_max_rows()
df = pd.read_csv('data/raw/SSDSE-B-2026.csv', encoding='utf-8', skiprows=1)
df['Region'] = df['Prefecture'].str[:1]
chart = alt.Chart(df).mark_bar().encode(x='Prefecture', y='A1101').facet(row='Region')
chart.save('facet.html') |
D3.js は Mike Bostock により 2011 年公開。 Web 可視化の標準を確立しました。
Plotly は 2012 年創業。 Python・R・JS で同じ API を提供する Plotly Express(2019)が爆発的に普及。
Streamlit(2019)と Gradio(2021)は ML 研究者の発表ツールとして標準化しつつあります。
この インタラクティブ可視化 ページで出てくる主要キーワードを一覧します。チップをクリックすると該当箇所へジャンプできます。
あなたは、可視化 の入口で「インタラクティブ可視化(Interactive Visualization)」という用語に出会ったところです。 この用語は マウスホバー・ズーム・フィルタなど、利用者の操作で表示が変わる可視化。Plotly、Bokeh、Altair などで実装。
本ページでは、まず数式や形式的定義よりも、実データ(SSDSE-B-2026, 47 都道府県)で具体的な値を見ます。 そのあと、数式 → 計算 → Python 実装 → 落とし穴 → 関連用語、という順で「使える知識」に組み立てていきます。
インタラクティブ可視化 の本質は、ひとことで言うと「マウスホバー・ズーム・フィルタなど、利用者の操作で表示が変わる可視化。Plotly、Bokeh、Altair などで実装。」です。 数式に踏み込む前に、まずイメージで掴みましょう。
ヒント:直感が掴めたら、次の「数式または定義」セクションで形式化を確認してください。 形式化と直感がつながれば、インタラクティブ可視化 はもう武器です。
インタラクティブ可視化 を一般化して書くと、観測ペア $(x_1, y_1), \dots, (x_n, y_n)$(ここでは $n = 47$ 都道府県)に対して、次の関係を仮定します。
$$ \boxed{\quad y = f(x_1, x_2, \dots, x_p; \theta) + \varepsilon \quad} $$ここで $\theta$ は推定したいパラメータ、$\varepsilon$ はモデルでは説明しきれない誤差項。 インタラクティブ可視化 の流派ごとに、$f$ の形(線形・ロジスティック・木)、$\varepsilon$ の分布(正規・二項・ポアソン)が変わります。
| 記号 | 意味 | SSDSE-B での例 |
|---|---|---|
| $x$ | 説明変数 | A1101(人口 × 出生率(47 都道府県、ホバー対応)) |
| $y$ | 目的変数 | 死亡率・出生率など |
| $n$ | 標本数 | 47(都道府県数) |
| $\theta$ | パラメータ | 傾き・切片など |
| $\varepsilon$ | 誤差項 | モデルで説明しきれない残り |
上の式 $y = f(x; \theta) + \varepsilon$ を「数学者の声」ではなく、「現場の声」で読み直してみます。
合言葉:「定義は短い、解釈は長い」。インタラクティブ可視化 はたった 1 行の式ですが、それを 47 都道府県データに当てると、5 種類のチェックリスト(線形性・独立性・等分散・正規性・外れ値)が芋づる式に出てきます。
数式が読めたら、すぐに 実データ(SSDSE-B-2026, 47 都道府県, 2023 年度)で計算しましょう。 抽象を 47 行の表に落とすと、急に理解できることがあります。
# インタラクティブ可視化 の代表値を SSDSE-B-2026 で確認
col = 'A1101'
s = df2023[col].astype(float)
print('n :', len(s)) # 47
print('mean :', round(s.mean(), 2))
print('median :', round(s.median(), 2))
print('std :', round(s.std(), 2))
print('min / max :', s.min(), '/', s.max())
print('Top 3 prefs :')
print(df2023.nlargest(3, col)[['Prefecture', col]])
結果を見ると、47 都道府県のうち上位 3 県が突出しているか、なだらかに分布しているか、すぐ分かります。 この「分布の形」が見えると、インタラクティブ可視化 を語る土台ができたことになります。
Python の実装は「読む → 集計 → 描く → 報告」を一直線に書きます。長いコードよりも、各ステップが分離していることが大事です。
import pandas as pd
import numpy as np
import matplotlib.pyplot as plt
# SSDSE-B-2026 を読み込み(人口 × 出生率(47 都道府県、ホバー対応))
df = pd.read_csv('data/raw/SSDSE-B-2026.csv', encoding='cp932', skiprows=[1])
# 2023 年度(最新)だけ抽出
df2023 = df[df['SSDSE-B-2026'] == 2023].copy()
print(df2023.shape) # (47, ...)
print(df2023[['Prefecture', 'A1101']].head())
# インタラクティブ可視化 を 47 都道府県でビジュアル化
fig, ax = plt.subplots(figsize=(9, 6))
df2023.sort_values(col, ascending=False).plot.bar(
x='Prefecture', y=col, ax=ax, color='#00897B', legend=False)
ax.set_title('人口 × 出生率(47 都道府県、ホバー対応)(SSDSE-B-2026, 2023)')
ax.set_ylabel(col)
ax.set_xlabel('都道府県')
plt.xticks(rotation=90)
plt.tight_layout()
plt.savefig('figures/interactive-viz.html_r18_bar.png', dpi=120)
plt.show()
レポート文例:「SSDSE-B-2026(2023 年度, n=47)に基づいて インタラクティブ可視化 を確認したところ、平均は X、標準偏差は Y、上位 3 県は東京・神奈川・大阪であった。 SSDSE-B-2026 の都道府県別人口・面積・出生率を Plotly の scatter にすると、ホバーで都道府県名が浮かび、47 点を瞬時に同定できます。」
合言葉:レポート提出前に「ゼロ起点で 1 枚描き直す」「外れ値を 1 県外して再計算」「逆方向の因果を 1 行で否定する」を必ずやる。
本ページに登場した Python コードはすべて以下のテンプレートで読み解けます:
覚え方:「Read → Roll up → Render → Read it back」。 最後の「Read it back」は、出力された数字や図を口に出して 1 度言うこと。 これで インタラクティブ可視化 の現場運用は十分に回ります。
使います。前処理(特徴量 → 入力ベクトル)、評価(指標の可視化)、解釈(係数の可視化)など、機械学習のあらゆる工程で インタラクティブ可視化 は登場します。
記述統計や 1 変量・2 変量の可視化には十分。ただし複数の説明変数を同時に検討するときは、自由度が枯れます。bootstrap や情報量規準(AIC/BIC)で補強しましょう。
独立行政法人統計センター(NSTAC)「SSDSE」サイトから無料でダウンロードできます。本ページの実装はすべて data/raw/SSDSE-B-2026.csv を前提にしています。
SSDSE は教育目的での利用が許諾されています(出典明示、改変記録)。論文公開時は出典欄に「総務省統計局, SSDSE-B-2026」を必ず書きましょう。
① ヒストグラム 1 枚を描く → ② 平均・中央値・標準偏差を読み上げる → ③ 上位 3 県・下位 3 県を暗記する → ④ 2 変量の相関を 1 つ確認する → ⑤ レポート 1 行にまとめる。これを 47 都道府県データで 3 回回せば、用語の地形が掴めます。
本リポジトリの 論文一覧 から「可視化」カテゴリの論文を見ると、インタラクティブ可視化 を実際に使った再現コードが付いています。
「目的 → データ → インタラクティブ可視化 の選択理由 → 結果(図 + 数値)→ 解釈 → 限界(n=47, 単年)→ 次の一手」の順が王道です。
用語は単独では覚えづらいので、前提・並列・発展の 3 方向で 16 件並べます。
勧め方:1 日 1 リンク。クリックして読んだら、インタラクティブ可視化 のページに戻り、「インタラクティブ可視化 とこの用語はどう違う?」を 1 行書く。
合言葉:5 STEP のうちどれか 1 段でも飛ばすと、結論が「数字だけ」になり、読者の腑に落ちなくなります。 インタラクティブ可視化 は「数字 + 物語」のセットで完成です。
np.random.seed で作って「再現実験しました」と書く(教育用途では SSDSE-B-2026 を使うのが必須)iloc[:, 5] のように位置で参照し、SSDSE のバージョン違いで壊れるコードを書くx1, x2, x3 のように匿名化し、読者が意味を追えないコードにするインタラクティブ可視化 は、19 世紀末〜 20 世紀初頭の統計学黎明期から発達してきました。可視化 の中核として、Galton、Pearson、Fisher、Yule などが基礎を築き、現代では SSDSE のような公的データを使った教育素材で広く扱われています。
インタラクティブ可視化 は、観測ペア $(x_i, y_i)_{i=1}^{n}$ から条件付き期待値 $E[y \mid x]$ または分布 $P(y \mid x)$ を推定する道具です。 線形・非線形・パラメトリック・ノンパラメトリックという 4 つの軸の中で、インタラクティブ可視化 は「可視化」という棚に並んでいます。
df.dropna() の前に必ず欠損率を df.isna().mean() で測る。インタラクティブ可視化 は 記述統計・データサイエンス・機械学習 の交差点に位置します。 どの分野から入っても、いずれは インタラクティブ可視化 を通ります。
同じテーマで使い回せる narration を 5 つ並べておきます。コピペして「コード解説」欄に貼ってください。
インタラクティブ可視化 を学ぶときに使う SSDSE-B-2026 は、47 都道府県 × 約 110 列 × 複数年度のパネルデータです。 本ページでは「2023 年度の 47 行」を主に使います。 以下に、よく登場する代表的なカラムを示します。
| SSDSE コード | 日本語名 | 単位 | インタラクティブ可視化 での主な使い方 |
|---|---|---|---|
| Code | 地域コード | — | JOIN キー |
| Prefecture | 都道府県名 | — | カテゴリ軸・ラベル |
| A1101 | 総人口 | 人 | 説明変数(規模) |
| A1303 | 65 歳以上人口 | 人 | 高齢化率の分子 |
| A4101 | 出生数 | 人 | 人口動態の説明変数 |
| A4200 | 死亡率 | ‰ | 目的変数の代表 |
| B4101 | 年平均気温 | ℃ | 気候系の説明変数 |
| L3221 | 消費支出 | 円 | 家計の目的変数 |
使い方のコツ:列名はすべて A1101 のような英数記号です。SSDSE のコードブックで日本語ラベルを確認しながら使ってください。
本ページの例では A1101, A4101(人口 × 出生率(47 都道府県、ホバー対応))を中心に使っています。
解説は最小限。コードは 10 行以内。これで インタラクティブ可視化 の最短ルートが手に入ります。
import pandas as pddf = pd.read_csv('data/raw/SSDSE-B-2026.csv', encoding='cp932', skiprows=[1])df = df[df['SSDSE-B-2026'] == 2023]col = 'A1101'print(df[['Prefecture', col]].sort_values(col, ascending=False).head())import matplotlib.pyplot as pltdf.plot.hist(y=col, bins=20)plt.title('人口 × 出生率(47 都道府県、ホバー対応)(SSDSE-B-2026, 2023)')plt.savefig('figures/interactive-viz.html_r18_hist.png', dpi=120)plt.show()注意:10 行で動かせる、というだけで、これがゴールではありません。 インタラクティブ可視化 の本当の難しさは「描いた図をどう解釈するか」「報告にどう落とすか」にあります。
インタラクティブ可視化 の結果を、ゼミ・卒論・社内会議で報告するときの定型文を 3 つ用意しました。 最初は丸ごとコピー、慣れたら差し替えて使ってください。
「本研究では、SSDSE-B-2026(n=47, 2023 年度)を用いて インタラクティブ可視化 を確認した。 主たる説明変数は A1101, A4101(人口 × 出生率(47 都道府県、ホバー対応))であり、47 都道府県を対象とした分布の確認、相関の評価、インタラクティブ可視化 を用いた分析を実施した。 分析の結果、上位 3 県・下位 3 県の特徴と、SSDSE-B-2026 の都道府県別人口・面積・出生率を Plotly の scatter にすると、ホバーで都道府県名が浮かび、47 点を瞬時に同定できます。」
「人口 × 出生率(47 都道府県、ホバー対応) を 47 都道府県で比較したところ、東京・神奈川・大阪など大都市圏が突出していることが分かった。 インタラクティブ可視化 を用いた分析から、地域差は単に人口規模の違いだけでは説明できず、複数要因の組み合わせで生じていると示唆された。 今後の打ち手は、上位県のベストプラクティスを参考にしつつ、下位県への支援策を検討することである。」
「皆さん、インタラクティブ可視化 はひとことで言うと『マウスホバー・ズーム・フィルタなど、利用者の操作で表示が変わる可視化。Plotly、Bokeh、Altair などで実装。』です。 今回は SSDSE-B-2026(総務省統計局, 47 都道府県, 2023 年度)を使って、実際の数字でこの考え方を確かめました。 皆さん自身でも、別の指標(人口、出生率、家計支出など)に置き換えて同じ手順を試してみてください。」
同じ用語でも、見る立場によって意味が変わります。3 つの視点を切り替えて、用語の輪郭を立体的に掴みましょう。
統計学者にとって インタラクティブ可視化 は「データから母集団を推定する道具」です。 確率モデル・尤度・不偏性・効率性・一致性などの数学的性質に注目し、漸近理論で性能保証を行います。 47 都道府県データは「小標本(n=47)」と分類され、bootstrap や情報量規準による補強が必要になります。
データサイエンティストにとって インタラクティブ可視化 は「ビジネス課題を数字で答えるパイプラインの 1 部品」です。 モデルの理論的性質より、運用性・解釈性・更新コストを重視します。 SSDSE のような公的データを用いるときは「データの出典・更新頻度・ライセンス」を最優先で確認します。
教育の現場では インタラクティブ可視化 は「初学者が躓きやすいポイント」を含む単元です。 抽象的な数式よりも、具体的な 47 都道府県データで手を動かし、図を描き、結果を口頭で説明できるようになることが目標になります。 本ページの並び(直感 → 数式 → 計算 → Python → 落とし穴)は、まさにこの教育的アプローチに沿っています。
視点切り替えの効果:1 つの用語を 3 通りに眺めると、自分が今どの立場で議論しているか自覚できます。 論文を読むときは ①、現場で使うときは ②、人に教えるときは ③ ── と意識的に切り替えてください。
インタラクティブ可視化 と似た用語を、使い分けの観点から並べます。違いを言語化できれば、迷いが減ります。
| 用語 | 目的 | 入力 | 出力 | 強み | 弱み |
|---|---|---|---|---|---|
| インタラクティブ可視化 | マウスホバー・ズーム・フィルタなど、利用者の操作で表示が変わる可視化。Plotly、Bokeh、Altair などで実装。 | 47 都道府県 × 約 110 変数 | 図 + 表 + 200 字レポート | 直感的、再現容易 | 小標本(n=47)の制約 |
| 相関係数 | 2 変量の同調を 1 数で要約 | x, y の 47 ペア | r ∈ [−1, +1] | シンプル | 非線形は捉えられない |
| 線形回帰 | 条件付き期待値の線形近似 | 説明変数群 | 回帰係数・予測値 | 解釈容易 | 非線形には弱い |
| ロジスティック回帰 | 2 値分類 | 説明変数群 | 確率 + 係数 | 分類問題の標準 | 線形決定境界 |
| ランダムフォレスト | 非線形分類・回帰 | 大量変数 | 予測 + 重要度 | 非線形対応 | 解釈やや難 |
インタラクティブ可視化 は 可視化 の中で「マウスホバー・ズーム・フィルタなど、利用者の操作で表示が変わる可視化。Plotly、Bokeh、Altair などで実装。」を担う基本道具です。可視化 の他のトピックは、この基本の応用または並列の道具にあたります。
使えます。SSDSE-A(市区町村)、SSDSE-C(年次推移)、SSDSE-D・E(個票)など、インタラクティブ可視化 の手順はそのまま適用できます。粒度(県・市・個人)に応じて n が変わるので、結果の信頼性も変わります。
SSDSE は年に 1 度更新されます。インタラクティブ可視化 のコード自体は変更不要ですが、結果(数値・図)は最新年度のものに置き換えてレポートしましょう。出典欄に「SSDSE-B-2027(仮)」と書き換えるのを忘れずに。
できます。ピボット → グラフ → 関数 で代表値や相関は出ます。ただし、再現性・履歴管理・自動化の面で Python に劣ります。学習用には Python を強く勧めます。
進めます。インタラクティブ可視化 は機械学習の「特徴量設計」と「結果解釈」の両端で必須です。AI と聞くと深層学習を連想しがちですが、SSDSE のような表形式データでは線形モデル + インタラクティブ可視化 の組み合わせで十分実用になります。
3 つ確認します:①ファイルパス(data/raw/SSDSE-B-2026.csv)が合っているか、②エンコーディングが cp932 か、③ヘッダ 2 行目の日本語ラベルを skiprows で飛ばしたか。これで 9 割解決します。
figures/ ディレクトリが存在しない可能性があります。import os; os.makedirs('figures', exist_ok=True) を先頭に追加してください。
本ページの 12 セクションを順に読み進めるのが最短です。特に「直感 → 数式 → 計算 → Python」の 4 段が腑に落ちれば、用語の 80 % は理解できたとみなせます。
このカードを印刷し、SSDSE-B-2026 で 1 回手を動かせば、用語の「使える形」が定着します。 インタラクティブ可視化 はあくまで「マウスホバー・ズーム・フィルタなど、利用者の操作で表示が変わる可視化。Plotly、Bokeh、Altair などで実装。」というシンプルな考え方の道具ですので、迷ったらこの 1 行に戻ってください。