🖼 視覚的理解 (3 図)
インタラクティブ可視化の挙動を SSDSE-B-2026 由来の汎用図で示す。 図は静的画像だが、 実際の Web 環境ではホバー・クリック・ズーム・フィルタ操作が可能なグラフへ拡張される。 図の構造そのものは静的版と共通であり、 インタラクション層が上に重なる点が違い。
「interactive viz」は統計データ分析の文脈で扱う重要概念のひとつ。 本ページでは「interactive viz」を取り巻く中核キーワードを以下にチップで一覧化する。 各キーワードは関連する概念・手法・道具立てを含み、 文献検索や学習計画の起点になる。
これらのキーワードは「interactive viz の理解 → 適用 → 検証」のプロセスを構成する。 各章で詳しく解説する。
🍰 まずはやさしく
動かせるグラフのことです。
データを詳しく調べるために使います。
スマホの地図を拡大する感覚に似ています。
この機能でできることを学びます。
インタラクティブ可視化 ── ホバー・クリック・ズームできる可視化
🍰 まずはやさしく
Webサイトなどでよく使われる手法です。
一つの図で色々な視点を見るために使います。
部活の成績を年度別に切り替えて見るようなものです。
この手法がなぜ重要なのかを解説します。
PDF・論文では静的可視化が標準ですが、 Webサイト、 業務ダッシュボード、 探索的データ分析ではインタラクティブが圧倒的。 1つのグラフで複数視点を提供できます。
本ページでは「interactive viz」を扱う。 統計データ分析コンペティション (2026) の教材で、 SSDSE-B-2026 (47 都道府県 × 複数年 × 100 超列) の実データを使った再現可能な学習を目指す。
「interactive viz」は統計・データサイエンスの体系における重要概念のひとつ。 本ページは「定義・直感・数式・実装・落とし穴・関連手法」の 6 視点で構成され、 各視点は独立して読めるが順序通り読むと体系的な理解が得られる。
🍰 まずはやさしく
データと対話するような道具です。
直感的に正解を見つけるために使います。
買い物サイトで条件を絞り込む感覚です。
使い方の流れを順番に説明します。
典型的なインタラクション機能：
interactive viz を直感的に理解するには、 「具体的な日常の場面に当てはめる」のが効果的。 抽象的な定義から入るより、 「これは何の役に立つのか」「どんな場面で使うか」「他の手段とどう違うのか」の 3 点を先に押さえることで、 数式や手続きの理解が定着しやすい。
本ページでは interactive viz を「データから意思決定までの一連のプロセス」に位置付け、 (1) 入力、 (2) 処理、 (3) 出力、 (4) 解釈 の 4 段階で順に解説する。 この枠組みで他の手法と比較すれば、 interactive viz の独自性と共通性が見えてくる。
具体例として、 SSDSE-B-2026 のデータを使い、 interactive viz を実際に動かすイメージを次節以降で示す。 数式 → 値代入 → 手計算 → Python 実装 の流れで、 抽象と具体を行き来しながら理解を深める。
🍰 まずはやさしく
データの仕組みを形にしたものです。
正しく図を作るルールを決めるために使います。
スマホアプリの画面構成のような仕組みです。
図ができるまでの計算式を学びます。
インタラクティブ可視化の構成要素：
interactive viz の定義や代表的な数式を以下に示す。 数式の各記号の意味は次節で言葉に翻訳する。
interactive viz は文脈に応じて複数の定式化があるが、 教育目的では最も基本的な形を抑えることが重要。 具体的な値での計算例は後続セクションを参照。
$$\text{interactive viz}: f(\mathbf{X}, \boldsymbol{\theta}) \to y$$
記号の対応はこうです。 $y = f(x_1, \dots, x_p; \theta) + \varepsilon$ の $x_1, \dots, x_p$ が読者がウィジェットで動かせるツマミ、 $\theta$ が作り手が固定したパラメータ、 $\varepsilon$ が誤差（ノイズ）です。 インタラクティブ可視化の設計とは、 どの変数を $x$（動かせる）にし、 どれを $\theta$（固定）にするかの選択そのものです。 ツマミを増やすほど探索空間 $p$ 次元が広がり、 読者は迷います——「有効性 = 応答性 × 操作性 × 情報密度 ÷ 認知負荷」の式で認知負荷が分母にあるのはこのためです。 本ページの各ウィジェットが 1〜2 個のツマミに絞っているのは、 $p$ を小さく保つ設計判断です。
SSDSE-B-2026（2023年）で「都道府県別 総人口 vs 高齢化率」をPlotlyで：
同じ情報量を静的matplotlibで作るには複数図に分ける必要があります。
interactive viz を SSDSE-B-2026 の実データで具体的に計算する手順を示す。 数式 → 値代入 → 手計算 → Python 実装 の流れで、 結果が一致することを確認する。
使用データ: SSDSE-B-2026 の 47 都道府県 × 主要列。 まず 5-10 都道府県の小さな部分集合で手計算し、 全件は Python で実行する。
インタラクティブな可視化には解くべき数式が無いので、 ブラウザに送るデータ量を実データで見積もる。 落とし穴の「読み込み遅延」が具体的に何 KB の話なのかを数字で押さえる。
| Step | 操作 | 実際の値 |
|---|---|---|
| 1 | 元データの大きさを数える | SSDSE-B-2026 は 564 行 × 112 列 = 63,168 セル |
| 2 | 1 セルあたりの送信量を見積もる | JSON で "列名":値, の形なら約 24 バイト |
| 3 | 全部渡した場合 | 63,168 × 24 = 1,516,032 バイト ≒ 1,480.5 KB |
| 4 | 年度を 2023 に絞る | 47 × 112 = 5,264 セル → 約 123.4 KB（12 分の 1） |
| 5 | 使う列を 5 つに絞る | 47 × 5 = 235 セル → 約 5.5 KB（さらに 22 分の 1） |
📥 入力：data/raw/SSDSE-B-2026.csv。 このコードでやること：Step 1〜5 の見積もりを Python で再現する。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | import pandas as pd d = pd.read_csv('data/raw/SSDSE-B-2026.csv', encoding='cp932', header=1) d = d[d['地域コード'].astype(str).str.match(r'^R\d{5}$', na=False)] rows_all = len(d) # 47 県 × 12 年度 cols = d.shape[1] one_year = (pd.to_numeric(d['年度'], errors='coerce') == 2023).sum() # 1 セルを JSON で送るときのおおよそのバイト数（"列名":値, の形） bytes_per_cell = 24 for label, rows, ncol in [ ('全期間 × 全列をそのまま渡す', rows_all, cols), ('2023 年度だけに絞る', one_year, cols), ('2023 年度 × 5 列に絞る', one_year, 5), ]: cells = rows * ncol kb = cells * bytes_per_cell / 1024 print(f'{label:26s} {rows:4d} 行 x {ncol:3d} 列 = {cells:6d} セル -> 約 {kb:8.1f} KB') |
📤 実行すると次の出力が得られる：
💬 「全部渡す」と 1.4 MB、 「必要な年度と列だけ」なら 5.5 KB で、 270 倍の差になる。 図に映るのは 47 本の棒だけなのに、 送っている量がここまで違う。 前処理で絞るだけで初期表示は体感できるほど速くなる。
最小限のスニペットで動作確認できる例。 公的データ（SSDSE 等）を想定しています。
data/raw/SSDSE-B-2026.csv（cp932・skiprows=[1]・2023年）。 列 A1101（総人口）、 A1303（65歳以上人口）、 A4101（出生数）、 Prefecture（都道府県名）。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='cp932', skiprows=[1]) d23 = df[df['SSDSE-B-2026'] == 2023].reset_index(drop=True) d23['高齢化率'] = d23['A1303'] / d23['A1101'] * 100 # 65歳以上人口/総人口 fig = px.scatter(d23, x='A1101', y='高齢化率', hover_name='Prefecture', size='A1101', title='総人口 vs 高齢化率（SSDSE-B-2026, 2023）') fig.show() # fig.write_html('output.html') で保存も可 |
この用語の全体像を学ぶには、 横断的な教材で文脈を掴むのが効率的です。
interactive viz を学ぶ際に併読すると理解が深まる関連グループ教材を以下にまとめる。
これらを順に参照することで、 interactive viz を中核とした分析の体系的理解が得られる。
| ライブラリ | 言語 | 強み | 弱み |
|---|---|---|---|
| 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（cp932・skiprows=[1]・2023年）。 列 A1101（総人口）、 A1303（65歳以上人口）、 A4101（出生数）、 Prefecture（都道府県名）。1 2 3 4 5 6 7 8 | # Plotly Express による散布図（SSDSE-B-2026, 2023年）
import pandas as pd, plotly.express as px
df = pd.read_csv('data/raw/SSDSE-B-2026.csv', encoding='cp932', skiprows=[1])
d23 = df[df['SSDSE-B-2026']==2023].reset_index(drop=True)
d23['高齢化率'] = d23['A1303'] / d23['A1101'] * 100 # 65歳以上/総人口
fig = px.scatter(d23, x='A1101', y='高齢化率', hover_name='Prefecture',
log_x=True, size_max=15)
fig.write_html('interactive_scatter.html') |
data/raw/SSDSE-B-2026.csv（cp932・skiprows=[1]・2023年）。 列 A1101（総人口）、 A1303（65歳以上人口）、 A4101（出生数）、 Prefecture（都道府県名）。1 2 3 4 5 6 7 8 9 10 11 | # Altair : ブラシ選択でクロスフィルタ # d23 は 1 つ上の Plotly の例で作った 2023 年度のデータ（高齢化率の列を持つ） import altair as alt alt.data_transformers.disable_max_rows() brush = alt.selection_interval() chart = (alt.Chart(d23).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（cp932・skiprows=[1]・2023年）。 列 A1101（総人口）、 A1303（65歳以上人口）、 A4101（出生数）、 Prefecture（都道府県名）。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（cp932・skiprows=[1]・2023年）。 列 A1101（総人口）、 A1303（65歳以上人口）、 A4101（出生数）、 Prefecture（都道府県名）。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='cp932', skiprows=[1])
df['高齢化率'] = df['A1303']/df['A1101']*100 # 全年次を利用
fig = px.bar(df.sort_values('SSDSE-B-2026'), x='Prefecture', y='高齢化率',
animation_frame='SSDSE-B-2026') # 年列でコマ送り
fig.write_html('anim.html') |
data/raw/SSDSE-B-2026.csv（cp932・skiprows=[1]・2023年）。 列 A1101（総人口）、 A1303（65歳以上人口）、 A4101（出生数）、 Prefecture（都道府県名）。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='cp932', skiprows=[1])
d23 = df[df['SSDSE-B-2026']==2023].reset_index(drop=True)
p = figure(width=700, height=400); p.circle(d23['A1101'], d23['A1303'], size=10)
p.add_tools(HoverTool(tooltips=[('総人口','@x'),('65歳以上','@y')]))
output_file('bokeh.html'); save(p) |
data/raw/SSDSE-B-2026.csv（cp932・skiprows=[1]・2023年）。 列 A1101（総人口）、 A1303（65歳以上人口）、 A4101（出生数）、 Prefecture（都道府県名）。1 2 3 4 5 6 | import altair as alt, pandas as pd
df = pd.read_csv('data/raw/SSDSE-B-2026.csv', encoding='cp932', skiprows=[1])
d23 = df[df['SSDSE-B-2026']==2023].reset_index(drop=True)
d23['Region'] = d23['Prefecture'].str[:1] # 県名頭文字で簡易グループ化
chart = alt.Chart(d23).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 研究者の発表ツールとして標準化しつつあります。
インタラクティブ可視化の挙動を SSDSE-B-2026 由来の汎用図で示す。 図は静的画像だが、 実際の Web 環境ではホバー・クリック・ズーム・フィルタ操作が可能なグラフへ拡張される。 図の構造そのものは静的版と共通であり、 インタラクション層が上に重なる点が違い。
静的可視化は印刷可能・PDF 適格・解像度独立だが探索性に欠ける。 インタラクティブ可視化はホバー・クリック・ズーム・フィルタなどで探索可能、 Web 専用、 印刷では失われる。 用途として、 報告書・論文には静的、 ダッシュボード・教育コンテンツにはインタラクティブが向く。 メッセージが固定か、 ユーザーが探索するかで使い分ける。
Python: Plotly, Bokeh, Altair, Streamlit, Dash, Gradio。 JavaScript: D3.js, Chart.js, Highcharts, ECharts, Observable Plot, Vega-Lite。 R: Shiny, plotly (R 版), htmlwidgets, leaflet。 BI: Tableau, Power BI, Looker Studio, Qlik Sense, Metabase, Superset。 用途と利用者層に応じて選ぶ。
(1) 選択 (selection) - 対象を選ぶ、 (2) 探索 (exploration) - 他のデータを見る、 (3) 再配置 (reconfigure) - 配置を変える、 (4) 符号化変更 (re-encode) - 色や形を変える、 (5) 抽象/具体 (abstract/elaborate) - 概要・詳細の切替。 (6) フィルタ、 (7) 接続 (connect) を加える分類もある。
課題: スクリーンリーダー非対応、 キーボード操作なし、 色覚多様性無視、 動きが多すぎる、 学習コスト高、 印刷困難。 対策: ARIA 属性付与、 alt 説明文・data table の併設、 ColorBrewer など安全な配色、 動きの抑制オプション、 静的フォールバック、 PDF/SVG エクスポート、 説明テキスト同梱。
47 都道府県データを Plotly で地理マップ + 棒グラフのリンクビュー化。 都道府県を選択すると関連変数 (総人口 A1101・出生数 A4101・65歳以上人口 A1303・高齢化率) のサブグラフが更新される。 教育場面で「データを触る」体験を作る上で有効。 Streamlit で配信すれば、 教員はコード共有なしで URL のみで生徒に配布できる。
1960 年代の SAGE システム、 1973 Bell Labs の Becker らの S-PLUS インタラクティブグラフ、 1990 年代の Visage、 2000 年代の Trellis、 D3.js (2011)、 Plotly (2012)、 Bokeh (2013)、 Altair (2017) で爆発的に普及した。 Web ブラウザの普及と JavaScript 性能向上が前提条件で、 HTML5 Canvas や SVG、 WebGL の登場が決定打となった。 元来は研究室の実験ツールだったものが Web 公開と相性のよさにより、 報道・教育・ダッシュボードに浸透した。
静的は「メッセージが固定で伝えたい場合」、 インタラクティブは「ユーザーが探索する場合」に向く。 報告書・論文・印刷物は静的、 ダッシュボード・教育コンテンツ・記者解説はインタラクティブが向く。 同じデータでも、 説明したい主張がある場合は静的、 ユーザーが自分で疑問を持つ場合はインタラクティブと判断する。 両方を共存させる例も多い (印刷版に QR コードで Web 版へ誘導など)。
「Overview first, zoom and filter, then details on demand」 はインタラクティブ可視化設計の指針。 SSDSE で都道府県全体俯瞰 → 注目県を選択 → 詳細データ表示、 のパターンが典型。 1996 年 Ben Shneiderman の論文に由来し、 現代のダッシュボード設計の基盤となっている。 一気に詳細を見せず、 段階的にフォーカスする UI 設計を推奨する。
Python・R・JavaScript で共通 API を持ち、 学習コストが低い。 Plotly Express (px) は短いコードで多くのグラフを生成。 大規模データには WebGL モードがあり 100 万点まで滑らかに描画可能。 出力は HTML 単体ファイルで配布も容易。 商用利用はライセンス確認が必要で、 Dash と組み合わせるとダッシュボード化できる。
Python ファーストの設計で、 サーバ連動 (Bokeh Server) でリアルタイムデータ更新が可能。 大規模データ向けの DataShader と組み合わせて 10 億点クラスも扱える。 学習曲線はやや急だが、 業務ダッシュボードでの採用例が多い。 Tornado ベースの非同期処理を内蔵する。
Vega-Lite を Python から扱う宣言的可視化ライブラリ。 「データ + 符号化 + マーク」を分離した API は、 grammar of graphics 系の思想を継承する。 コードが短く、 教育に向く。 JSON 仕様 (Vega-Lite spec) で Web へ移植可能。 大規模データには `alt.data_transformers.disable_max_rows()` などの工夫が要る。
「Data-Driven Documents」 を冠する低レベルライブラリ。 SVG/HTML/Canvas のいずれにも自由にデータをバインドでき、 表現の自由度は最高水準。 一方で学習コストは高く、 制作期間も長い。 NYT・WaPo・Reuters などジャーナリスト系で大量採用。 v7 以降は ESM モジュール化が進む。
ドラッグ&ドロップで多次元 BI を構築できる商用ツール。 Salesforce 傘下。 業務 BI 市場のリーダーで、 大企業の標準ツール。 学習リソース豊富、 Tableau Public で無料公開も可能。 SSDSE のような公開データを用いて、 学生が自分のダッシュボードをポートフォリオ化する例も増えている。
Microsoft 製の BI ツールで、 Office 365 / Azure 連携が強力。 DAX 言語で集計を記述する。 Excel ユーザーの移行先として人気。 オンプレ用に Power BI Report Server もあり、 公共機関での採用例が多い。 Power BI Desktop は無料、 配信は有料プランで。
ECharts は Baidu (Apache 寄贈) 製、 中国系企業で広く採用。 大量のチャートタイプを持つ。 Highcharts はノルウェー製商用、 商用利用にライセンス必須だが UI 完成度が高く、 メディア・金融で人気。 両者とも純 JavaScript で、 React・Vue ラッパも豊富。
軽量で学習コスト低い JS ライブラリ。 Canvas ベースで動作。 教育用・小規模ダッシュボードで人気。 折線・棒・円・レーダーなど基本グラフは網羅。 凝った可視化には機能不足だが、 5 分で実装できる手軽さが強み。
D3.js 作者 Mike Bostock が立ち上げた Web 可視化ノートブック。 セル間が reactive に連動するパラダイム。 Observable Plot は Vega-Lite 的な高水準 API。 GitHub Pages にも埋め込み可能で、 教育コンテンツとの相性がよい。
R で書ける Web アプリケーションフレームワーク。 統計家がコードのみで Web 配信できる。 大学講義・医療研究のダッシュボードで広く使われる。 学生が R で集計したものを Shiny で公開する流れは、 SSDSE 教材でも有効。
Python の関数を上から順に実行するだけで Web UI ができる革新的フレームワーク。 ML 研究者の発表ツールとして標準化。 公式の Streamlit Cloud で無料配信可能。 SSDSE-B-2026 を読み込ませて自治体比較ダッシュボードを 30 行で作れる。
Plotly 製の Python 製ダッシュボードフレームワーク。 Flask ベースで本格的な業務 BI 構築に向く。 callbacks の概念で、 入力変更時の自動更新を記述する。 React ベースの UI を裏で生成。 業務システム連携が前提のため学習コストはやや高い。
HuggingFace 製。 ML モデルを数行で Web 公開できる。 学生が自作 ML モデルのデモを公開するのに便利。 Streamlit より UI 簡易、 ML 入出力に特化。 SSDSE-B-2026 で回帰モデルを訓練したものを Gradio で公開する例が増えている。
Jupyter Notebook 内でインタラクティブ UI を作る。 Slider・Dropdown・Button などを Python 関数とバインド。 教育用ノートブックでパラメータ可変の実験を共有するのに便利。 nbviewer/Colab では動作しない (Voila 等が必要)。
SVG はベクター・DOM ベースで、 数千要素まで適。 Canvas はラスター・高速で、 数万要素まで適。 WebGL は GPU 並列で、 数百万要素まで可。 D3 は SVG 中心、 Plotly は SVG/WebGL 切替可、 deck.gl は WebGL 専用。 用途とデータ量で選ぶ。
DOM 操作・SVG 描画・イベント処理・ES Module・WebAssembly・Web Worker など。 D3.js は DOM + SVG、 Plotly は React + WebGL、 ECharts は Canvas 中心。 これらの基礎を知ると、 ライブラリ選択や性能調整がしやすくなる。
画面幅に応じて配置を変える。 CSS Flexbox/Grid・メディアクエリで実現。 多くのライブラリはコンテナ幅に追従するが、 軸ラベルが重なる問題が起きやすい。 chart.resize() などのコールバックを window.resize に登録する設計が標準。
タッチ操作・ピンチズーム・スワイプの考慮が必要。 ホバーが効かないため、 タップで詳細表示する設計に切替える。 画面が狭いため、 小ベゼル端末では凡例・軸ラベルの省略が必要。 mobile-first の設計を心掛ける。
マウスオーバーで詳細情報をポップアップ表示。 SSDSE 散布図で都道府県名を出す典型例。 ツールチップが画面外にはみ出さない配置調整、 アクセシビリティ対応 (aria-describedby)、 タッチ端末ではタップ代替が必要。
点や棒をクリックして詳細画面 (drill-down) を開く。 別ページ遷移か、 モーダル表示か、 隣接パネル更新かで UX が変わる。 同期 (シングルクリック)・非同期 (ダブルクリック) の意味づけも統一する必要がある。
範囲選択・ノードの移動・スライダー操作などに使う。 D3 では d3.drag() で実装。 マウスとタッチを共通化するために Pointer Events API を使うとよい。
スクロールホイール・ピンチでスケール変更、 ドラッグで移動。 地図系で必須。 D3.js zoom behavior は scale + translate を管理する。 ズーム時にラベルや軸を更新する処理が UI を磨く要点。
散布図上で矩形範囲を選択し、 該当データを抽出する操作。 selection と filter を組み合わせる代表例。 多変量解析・異常検出で有効。 Crossfilter ライブラリと組み合わせると、 リンク先のチャートも自動更新できる。
複数のチャートが連動する設計。 散布図で選択 → ヒストグラム・地図も連動更新。 SSDSE で「人口を選択 → 関連県を地図ハイライト」 などの強力な探索 UI が作れる。 Tableau, Power BI が標準実装、 Plotly Dash + Bokeh は自力実装。
サーバから定期的にデータを取得して更新。 株価・センサー・SNS で必須。 WebSocket / Server-Sent Events / polling を使う。 Bokeh Server, Plotly Dash, Streamlit が対応。 過剰更新は CPU 消費を招くため、 差分更新が重要。
過去データを破棄しながら直近 N 件を表示する設計。 移動窓と組み合わせる。 IoT・監視・トレード系で頻出。 Kafka・MQTT などとの連携、 バックプレッシャー対応も検討事項。
時系列データ表示で時間経過を視覚化。 Gapminder のバブルチャートが古典例。 Plotly animation_frame、 D3 transitions で実装。 過剰な動きは認知負荷を増やすため、 オン/オフ切替を提供すべき。
スクロールに応じてグラフが変化していく構成。 NYT などのジャーナリズムで多用。 段階的に視点を変えて読者を誘導する。 Scrollama・Mapbox-GL などのライブラリが助力。
スクロール連動のストーリーテリング技法。 Pudding, NYT が代表例。 視点 (viewport) との交差判定 (IntersectionObserver API) で発火。 教育コンテンツでも、 統計概念をスクロールで導入する作例が増えている。
KPI ・トレンド・詳細表の階層構造を持つ。 1 画面に詰め込みすぎないことが鉄則。 Stephen Few の Information Dashboard Design 本が古典。 SSDSE で都道府県比較ダッシュボードを設計する場合、 「全国 → 地方 → 県」の階層を意識する。
最重要指標を大きく表示し、 前年比・目標比を併記する。 sparkline で小さくトレンドを示す手法も。 単独で意味不明にならないよう、 必ず文脈情報 (期間・対象) を併記する。
drill-down は階層を掘り下げる操作 (年 → 月 → 日)、 drill-through は別画面・別データソースへ遷移する操作。 Power BI・Tableau で区別がある。 SSDSE では「全国指標 → 地方 → 県別」のドリルダウンが代表。
あるチャートでの選択が、 他チャートのフィルタとして波及する。 Crossfilter.js が定番。 多次元データを探索する際に強力。 Power BI ・Tableau は標準機能、 D3 系は自力実装。
3 次元超を 2 次元に投影する技法 (parallel coordinates, scatter plot matrix, radar chart など)。 t-SNE/UMAP/PCA の埋め込みを可視化する例も多い。 SSDSE のように 100+ 変数を持つデータには parallel coordinates が向く。
各変数を縦軸として並べ、 各データ点を折線で表現する。 多次元データの相関や外れ値が見える。 軸の順序で見え方が大きく変わるため、 順序の自動最適化が研究テーマ。 D3, Plotly でサポート。
同じ形式の小グラフを並べて、 カテゴリ間比較する手法。 Tufte が推奨。 SSDSE で 47 都道府県の時系列推移を並列表示するのが典型。 ggplot2 facet_wrap、 Plotly facet_col・facet_row、 Vega-Lite repeat で実装。
2 次元のセル色で値を表現。 相関行列・カレンダー表示・地図のマス目分布などに使う。 色覚多様性に配慮した colormap (viridis, cividis) が推奨。 セル数が多いと数値表示は割愛し、 ホバーで詳細表示が定番。
地理境界に値で色塗り。 SSDSE 都道府県人口を Plotly の choropleth で描く例が典型。 区分は等間隔・等度数・Jenks 自然分類などを選ぶ。 人口に応じてカートグラム化する方法も有効。
地理面積を値に応じて変形する地図。 人口比例・GDP 比例の cartogram は人口集中の理解を助ける。 Worldmapper.org が古典。 D3.js plus topojson で実装可能。
three.js, deck.gl, Plotly 3D など。 立体感はあるが、 視点依存で読み取りが困難になりやすい。 教育用には 2D の方が誤読が少なく、 3D は地形・分子・建築など 3 次元が本質的な対象に限定すべき。
A-Frame・Unity・Unreal を使った没入型可視化。 多変量データの探索や教育シミュレーションで研究例あり。 ハードウェアコスト・酔いやすさが課題で、 業務適用は限定的。
aria-label, aria-describedby, role 属性で意味付け。 SVG では <title> 子要素・<desc> 子要素を活用。 グラフの構造を text として伝える努力が必要。 W3C の WAI-ARIA Authoring Practices が指針。
Tab で各要素にフォーカス、 Enter/Space で選択、 矢印キーで移動。 マウス前提の UI はアクセシビリティ違反になりがち。 Highcharts は WAI-ARIA 対応・キーボードナビゲーションが標準装備で参考になる。
NVDA, JAWS, VoiceOver でグラフ情報が読み上げられる必要。 グラフを data table に変換する aria-describedby での補完が常套。 「グラフの代替テキスト」 という概念で、 まとめ文章を併記するのが推奨。
P 型・D 型 (合計約 8% の男性) に配慮。 viridis, cividis, ColorBrewer が安全。 赤緑信号色は避け、 黄青系を主体に。 模様 (pattern) や形状の併用でさらに堅牢にできる。 ColorOracle, Coblis で確認可能。
JS が無効・印刷時には静的画像を表示する設計。 <noscript> タグ、 print CSS、 PNG/SVG エクスポート機能などで対応。 公的機関のレポートでは特に重要。
@media print の CSS で、 インタラクティブ要素を非表示にし、 印刷用の静的画像を表示する。 軸ラベル・凡例も白黒で読めるよう調整。 印刷の質感を意識した設計が求められる。
10 万点以上では Canvas/WebGL に切替、 不要な再描画を抑制、 アグリゲーションで点数を減らす、 throttle/debounce でイベント発火を抑制。 React 系は memoization が必須。
100 万点超は DataShader (Bokeh) や deck.gl のように GPU で aggregation してから描画。 ヒートマップ化・サンプリング・Level of Detail (LoD) も有効。 SSDSE は数千行で問題にならないが、 行動ログ系ではほぼ必須。
GPU 並列で大量の点・ラインを描画。 Plotly scattergl, deck.gl, regl など。 SVG の数千倍のパフォーマンスが出るが、 ベクター出力 (印刷用 PDF/SVG) ができない欠点がある。
JavaScript で多次元データを高速フィルタするライブラリ。 dc.js と組み合わせて、 ブラウザ側で OLAP 風の分析 UI を作れる。 Square (現 Block) 製。 Bitmap index 風の仕組みで、 数十万行をミリ秒応答できる。
描画前に集計してデータ量を減らす。 sum/avg/count/percentile など。 Spark, DuckDB, Pandas で前処理して JSON 化するか、 ブラウザ側で arquero, danfo.js を使う。
HTTP cache・Service Worker・IndexedDB でデータをローカルに保持。 再訪問時の描画を高速化。 SSDSE のような更新頻度の低い公開データは、 強くキャッシュして問題ない。
SVG → PDF 変換は jsPDF, html2pdf などで実装。 Plotly は kaleido パッケージで Python から PDF 出力可能。 印刷品質を維持するためには SVG ベース描画が必要。
D3 の SVG 要素をシリアライズして download 属性付き a タグでダウンロード。 Plotly は to_image('svg') で出力。 Illustrator で再編集する用途に重要。 ジャーナリスト・デザイナーが好む。
数値フォーマット (1,234.56 vs 1.234,56)、 日付フォーマット (YYYY-MM-DD vs DD/MM/YYYY)、 通貨記号、 言語切替、 RTL (右から左) 対応など。 d3-format, Intl API で対応。 SSDSE の日本語ラベルは英語版も同梱する設計が望ましい。
UI 文字列の翻訳。 グラフラベル・ツールチップ・凡例。 i18next, react-intl が定番。 多言語ダッシュボードでは、 字幅の違いでレイアウト崩れに注意。
import plotly.express as px; df = pd.read_csv('data/raw/SSDSE-B-2026.csv', encoding='cp932', skiprows=[1]); d23 = df[df['SSDSE-B-2026']==2023]; fig = px.scatter(d23, x='A1101', y='A4101', hover_data=['Prefecture'], log_x=True, log_y=True); fig.write_html('out.html') でホバー表示付き散布図が生成される。 30 行ほどで配信ダッシュボードが完成する。
import streamlit as st; df = pd.read_csv('data/raw/SSDSE-B-2026.csv', encoding='cp932', skiprows=[1]); pref = st.selectbox('都道府県', df['Prefecture']); st.write(df[df['Prefecture']==pref]) で 5 行のダッシュボードが完成。 streamlit run で起動、 Streamlit Cloud で配信。
Plotly Dash は callback デコレータで Input → Output の更新ロジックを書く。 Layout (HTML 要素) → Callback (関数) の 2 階建てで構成され、 業務用ダッシュボードに向く。 認証・キャッシュ・スケーリングも企業要件を満たす。
SSDSE で訓練した回帰モデルを gr.Interface(fn=predict, inputs=['number', 'number'], outputs='number').launch() で公開できる。 HuggingFace Spaces で永続配信、 学生がポートフォリオに使う例が多い。
「操作するから理解する」 という能動的学習を引き出す。 概念実装と体験のループが強い学習になる。 数式変動の体感、 パラメータ探索、 自分のデータ持参など、 静的教材では不可能な学びが生まれる。
情報 I のデータの活用、 情報 II のデータサイエンスで、 Streamlit や Plotly を使った可視化体験を扱う指導例が増えている。 SSDSE データを使えば授業のデータ準備が不要。
統計分布・検定・回帰のパラメータをスライダーで変化させる Shiny アプリは古典。 t 分布の自由度を変えると形状がどう変わるかを体感できる教材は、 静的教材では再現不可能な威力を持つ。
「動かしたいから動かす」 のはアンチパターン。 読者の認知資源を奪い、 主旨を見失わせる。 アニメーションは「時間経過の表現」 など意味があるときに限定。 prefers-reduced-motion CSS でユーザー設定を尊重する。
虹色 (rainbow / jet) は順序の知覚を歪ませる悪手。 viridis, cividis を使う。 順序がないデータには categorical palette (Set2, Tableau10)、 順序があるデータには sequential、 中央が意味を持つデータには diverging palette。
初回表示が 5 秒超になるとユーザーが離脱する。 データ分割ロード、 軽量フォーマット (parquet, msgpack)、 CDN 配信、 lazy load などで初回描画を最適化する。
教育コンテンツの 6 割超がモバイル閲覧。 ホバー前提・横スクロール前提の設計は、 モバイルで使い物にならない。 mobile-first を徹底し、 タッチ操作・縦持ち UI を主軸に据える。
何をすればどうなるか、 ユーザーが推測できない UI は失敗する。 アフォーダンス (操作可能であることを示す視覚記号)、 ホバー強調、 ツールバー、 操作説明テキストで補完する。
1 枚に 10 変数以上を詰め込むと、 認知過負荷で何も読めなくなる。 多変量を扱う場合は small multiples、 段階的詳細表示 (drill-down) などで分解する。
公的機関は法的にアクセシビリティ対応が必須 (障害者差別解消法、 米 ADA、 欧 EAA)。 教育コンテンツも将来的に必須化が進む見込み。 設計段階から組み込むことが、 後付け改修より圧倒的に安い。
JS ライブラリは年単位で API が変わる。 D3 v3 → v7 の破壊的変更などが代表例。 依存パッケージのバージョン固定、 CI でのスナップショットテスト、 staging 環境での検証が必要。
ノーコード可視化ツールも近年充実。 RAWGraphs (オープンソース)、 Flourish (商用、 SchibstedAG) で多種の凝った可視化を生成できる。 デザイナー・ジャーナリストが活用。 学生のポスター制作にも便利。
NYT Graphics, Reuters Graphics, FT Visual&Data Journalism は世界最高水準。 D3.js + svelte + observable plot を主軸にしている。 統計教育がデータジャーナリズムの裾野を支える。
国勢調査・PMO・e-Stat・OECD など、 政府データの可視化サイトが充実してきている。 SSDSE はこれらを統合した教育用データセット。 公開データ可視化は市民データリテラシーの向上に直結する。
(1) モバイル UI 動作、 (2) アクセシビリティ (aria), (3) 色覚多様性配色、 (4) 印刷時静的版、 (5) 大規模データ時の性能、 (6) エラー処理 (データ欠損時), (7) ローディング表示、 (8) ローカライゼーション、 (9) PDF/SVG エクスポート、 (10) キャッシュ設計 — の 10 項目を確認すると本番品質となる。
「データに触れる体験」を作ることがインタラクティブ可視化の本質。 静的可視化と排他ではなく、 文脈に応じて使い分ける。 教育・ジャーナリズム・業務 BI・科学探索の各場面で道具立てが異なる。 SSDSE のような公開教育データを足場に、 学生自身がインタラクティブ可視化を作れる時代に入っている。 操作してわかる、 触ってわかる、 そういう学びを設計に組み込むことが、 これからのデータサイエンス教育の中核となる。
Vega-Lite は Wilkinson の Grammar of Graphics を JSON 化した宣言的仕様。 data, mark, encoding の 3 要素を JSON で記述すれば SVG が生成される。 ggplot2 と思想が近く、 学習効率が高い。 GitHub の Observable, Kibana, Apache Superset の裏で動いている。 SSDSE のような公開データに対し、 数行の JSON で凝った可視化が作れる。
Leland Wilkinson が 1999 年に提唱した可視化文法。 「データを座標系に符号化する規則」 を整理した枠組み。 ggplot2 (Hadley Wickham, 2005)、 Vega-Lite、 Altair、 D3.js Observable Plot に直接の影響。 静的・インタラクティブを問わず、 可視化設計の理論的基盤として、 現代の標準語彙となっている。
Observable, Streamlit, React, Vue, Svelte などはデータ変更を自動で UI に反映する reactive な設計。 状態管理を簡潔にし、 インタラクティブ可視化との相性が抜群。 RxJS, MobX, Recoil, Zustand など状態管理ライブラリも充実。 教育用途では Streamlit の「上から下に再実行」 モデルが直感的。
React, Vue, Svelte などのコンポーネント指向は、 グラフ・凡例・コントロールを再利用可能な部品として組み立てる。 Storybook で各コンポーネントを単体テスト・カタログ化する文化が成熟。 ダッシュボード規模が拡大するほど効果が大きい。
フィルタ条件・選択状態・ズーム状態などを集中管理することで、 リンクビューや URL 復元が容易になる。 Redux, Pinia, Zustand などのライブラリ、 あるいは URL パラメータでの保存が常套。 共有可能なリンクを生成できることが探索可視化の必須要件。
フィルタ条件を URL のクエリ文字列に書き込むことで、 「この設定で見たいので URL を渡す」 が可能になる。 教育コンテンツ・ジャーナリズム・業務報告で重要。 history.replaceState で URL を書き換える設計、 あるいは hash fragment による状態保存が定番。
業務ダッシュボードは認証必須。 OAuth, SAML, OIDC, JWT などを用いる。 Tableau Server, Power BI Service は SSO 統合済。 Streamlit Cloud, Dash Enterprise も認証機能を提供。 教育用途では IP 制限・Basic 認証で十分なことも多い。
静的サイト (GitHub Pages, Netlify, Vercel)、 サーバ (Streamlit Cloud, HuggingFace Spaces)、 コンテナ (Docker, Kubernetes)、 サーバレス (Lambda, Cloud Run) など。 SSDSE 教材は静的が多くて済むが、 計算が必要なら Streamlit Cloud が手軽。
GitHub Actions, GitLab CI, CircleCI でテスト → ビルド → デプロイを自動化。 dashboard を更新するたびに自動で配信される設計が一般的。 データ更新も cron で起動し、 PR を自動生成する例も増えている。
D3.js は ISC、 Plotly は MIT、 Highcharts は商用、 Tableau は商用、 Streamlit は Apache 2.0、 Bokeh は BSD-3、 Altair は BSD-3。 業務利用ではライセンス遵守を必ず確認。 教育コンテンツは多くがオープン利用可能。
可視化前にデータをクレンジング・集計・統合する工程。 Pandas, Polars, DuckDB, dbt などが定番。 SSDSE のような整備済データでも、 結合・派生変数生成・欠損値処理は必要。 ETL の品質が可視化の信頼性を決める。
欠損・外れ値・型不整合・重複・タイムスタンプ整合性などを継続監視する。 Great Expectations, Soda Core, dbt tests などのツールが普及。 可視化前の品質保証が、 ダッシュボード信頼性の基盤。
データの所有者・利用権限・更新頻度・保持期間を明確化する仕組み。 ダッシュボードを公開する前に確認すべき。 GDPR・個人情報保護法への遵守も必須。 教育目的の SSDSE は公開データなので緩和されるが、 個人情報を含む場合は厳格に対応する。
k-匿名化・差分プライバシー・統合集計など、 個人特定リスクを下げる手法。 SSDSE は都道府県単位の集計で個人特定不可だが、 校区・町丁目レベルになると配慮が必要。 ダッシュボード設計時に必ず検討。
複数のチャートライブラリで描画速度を比較する。 数万点散布図、 数千点折線、 巨大ヒートマップなど、 用途別に評価。 Vega benchmark, plotly-benchmark などのプロジェクトが公開ベンチマークを提供。 適切な選定の根拠となる。
prefers-color-scheme CSS で OS 設定に追随。 グラフの背景・軸色・グリッド線も切替が必要。 Plotly は template='plotly_dark', Bokeh は theme=Theme(filename='dark.yaml') で対応。 細部までデザイン統一が求められる。
企業の Design System (Material, Fluent, Carbon, Lightning など) と統合することで、 ブランド一貫性を担保する。 色・フォント・余白の定数を共有する。 Storybook で部品カタログ化し、 デザイナーとエンジニアが共通言語を持つ。
Looker Studio, Power BI, Tableau, Flourish などのノーコード BI が普及。 一方で D3.js, Streamlit, Dash などのコード環境は表現力で勝る。 用途・スキル・組織体制に応じて選び分け。 「コード」 vs 「ノーコード」 ではなく、 ハイブリッドが現実解。
LLM (GPT, Claude, Gemini) に可視化コードを生成させる流れが定着。 ChatGPT Advanced Data Analysis, Vanna AI, LIDA などが代表例。 自然言語で「東京の人口を時系列で見せて」と頼むと Plotly コードが返ってくる。 教育・業務両面で可能性が広がっている。
WebGPU の普及で大規模可視化はさらに高速化。 自然言語インターフェース・音声操作・AR ガラス上の可視化など、 新しい UX が登場している。 教育では「データに触れる」 体験が低コスト化し、 統計教育の民主化が進む。 インタラクティブ可視化は、 データサイエンス教育の中核技術として、 さらに重要性を増していく。
2023 年に Chrome で安定化、 2024 年に Safari/Firefox 対応進行。 WebGL の後継として GPU compute をブラウザから直接呼べる。 大規模可視化が桁違いに高速化。 deck.gl, three.js も対応中。 数百万点クラスのインタラクティブ可視化が現実的になる。
C++・Rust・Go で書かれた可視化エンジンをブラウザで実行できる。 DuckDB-Wasm, Pyodide (Python ランタイム), Apache Arrow JS などで大規模データ処理がブラウザ完結。 サーバなしで重い分析が動く時代になっている。
Pyodide は CPython を WebAssembly に移植したもの。 numpy, pandas, matplotlib, scikit-learn が動く。 教育用の対話的可視化が、 サーバなしで配信できる。 Jupyterlite, PyScript の基盤技術として注目を集めている。
Anaconda が開発する Python をブラウザで書く HTML タグ拡張。 <py-script> タグ内に Python コードを書けば、 ブラウザで実行・グラフ表示できる。 教育コンテンツに Python の試行可能なセクションを組み込むのに便利。
Jupyter ノートブックをサーバなしでブラウザ実行。 静的ホスティング (GitHub Pages) で配信可能。 学習コンテンツに最適。 SSDSE 可視化チュートリアルを Jupyterlite で配信すると、 学生は環境構築不要で実行できる。
2024 年公開の reactive な Python ノートブック。 セル間の依存関係を解析し、 変更したセルとその依存セルを自動再実行。 Observable のような UX を Python で実現。 インタラクティブ可視化の新しい標準になる可能性。
RStudio (Posit) が開発する文芸的可視化フレームワーク。 R, Python, Julia, JavaScript を統合した執筆環境。 静的書籍・スライド・ブログ・ダッシュボード生成。 学術論文・教育教材で広く採用。 Quarto Dashboards は競合 BI と肩を並べる機能。
Streamlit は汎用ダッシュボード向け、 Gradio は ML モデル単発デモ向け。 Streamlit は st.cache_data で重い計算をキャッシュ、 Gradio は queue() で並列化。 学生のポートフォリオには Gradio + HuggingFace Spaces が手軽。 業務利用には Streamlit Cloud が向く。
px は高水準で、 1 行で美しいグラフが描ける。 go は低水準で、 細部の制御が効く。 教育用途・素早い分析には px、 業務用カスタマイズには go。 fig = px.scatter(...).update_traces(...) のように両者を組み合わせるのが現実解。
Vega は低水準で、 マーク・スケール・軸・信号 (signal) を細かく指定する。 Vega-Lite は高水準で、 典型グラフを短く書ける。 Vega-Lite は最終的に Vega にコンパイルされる。 D3 と Plotly の関係に似た構造。
D3 作者 Bostock らが 2021 公開。 Vega-Lite ほど抽象的でなく、 D3 ほど低水準でない中間水準。 mark + scale + transform の構成。 React と組み合わせやすい。 教育用ノートブックでの採用が増えている。
Uber 製の WebGL ベース地理可視化フレームワーク。 数百万点の地理分布、 ヒートマップ、 アーク (経路) などを高速描画。 Mapbox-GL・MapLibre と組み合わせて使う。 都市データ・交通データの可視化で標準。
Mapbox-GL は商用、 MapLibre は完全オープンソース fork。 ベクタータイル方式で滑らかな地図表示。 SSDSE 都道府県データを GeoJSON 化して、 choropleth, bubble, heatmap などをオーバーレイ可能。 教育用は MapLibre + OSM タイルが定石。
GeoJSON は地理データの JSON 標準。 TopoJSON は GeoJSON のトポロジー情報を圧縮した派生。 D3 で都道府県境界を描く際、 TopoJSON 形式で約 1/10 サイズになる。 国土数値情報の境界データを変換して使う流れが定番。
折線・面・ローソク足・ヒートマップカレンダー・horizon chart など。 ズームと crosshair が必須。 Plotly の rangeslider, Highcharts の navigator が便利。 SSDSE 経年データを時系列ダッシュボードで配信する例が増えている。
2008 Saito らが提案した時系列可視化。 縦軸を折り返して色帯で表現することで、 1/3 の高さに同情報を圧縮。 多系列同時表示に向く。 47 都道府県の人口時系列を 1 画面で比較できる。 d3-horizon-chart などで実装可能。
フロー (人・物・金) の流れを帯幅で表現。 Plotly, D3, ECharts でサポート。 SSDSE では「進学者数の県間移動」 などをサンキー化できる。 ノード数が多すぎると視認性が落ちるため、 上位 K のみ表示する工夫が要る。
円形に並んだノード間の関係を弧で結ぶ可視化。 D3 chord layout が代表。 移動・取引・参照関係の表現に向く。 国際貿易・社会ネットワークでよく使われる。 多すぎるノードは情報過多になるため要選別。
階層データを矩形面積で表現。 ファイルシステム・予算配分・市場シェアの可視化に向く。 D3 treemap, Plotly treemap, Squarified algorithm が代表。 SSDSE の業種別・地方別構成比を treemap で見せると直感的。
treemap の円形版。 中心から外側に階層が広がる。 Plotly, ECharts が標準サポート。 階層深い分類データに向く。 中心からクリックでズームイン (drill-down) する UX が定番。
ノードとエッジをバネモデルで配置する。 ソーシャルネットワーク・引用関係・概念マップで使う。 D3 force layout, Cytoscape.js, Sigma.js が代表。 大規模グラフは Webcola, NGraph で高速化。
Gephi (デスクトップ)、 Cytoscape (生物学)、 NetworkX (Python)、 igraph (R/Python) が定番。 中心性 (centrality)、 コミュニティ検出 (community)、 経路探索などの分析と組み合わせると深い洞察が得られる。
複数の密度曲線を縦に並べた可視化。 1979 Joy Division のアルバムジャケットが起源。 群間分布の比較に有効。 ggridges (R), plotly create_distplot (Python) で実装可能。
箱ひげ図 + 密度推定の組合せ。 分布の形状を箱ひげ図より豊かに表現。 Plotly, seaborn, ggplot2 でサポート。 多群比較・分布の歪み検出に向く。
violin + boxplot + stripplot の三層構成。 分布形状・代表値・生データを同時表示。 2019 Allen ら提案。 PtitPrince (Python), ggdist (R) で実装可能。 統計教育で「分布の見方」 を学ぶのに最適。
Stephen Few 提案。 ゲージチャートの代替で、 KPI 表示に向く。 実績・目標・パフォーマンス帯を横棒で表現。 円形ゲージより情報密度が高い。 多くの BI ツールでサポート。
Edward Tufte 提案。 文中・表中に挿入する小さな折線グラフ。 KPI ダッシュボード、 表との組合せで威力を発揮。 d3-sparkline, react-sparklines が代表ライブラリ。
3 変数 (x, y, size) を表現する散布図の拡張。 4 変数目を色、 5 変数目をホバーで追加可能。 Gapminder の Hans Rosling のプレゼンが有名。 時間軸アニメーションでさらに次元を増やせる。
六角形のビンで 2 次元密度を表現。 散布図の過密問題を解決する。 d3-hexbin, plotly density_heatmap (hexbin) で実装。 大量の点を持つデータで威力を発揮。
2 次元 KDE で密度等高線を描く。 散布図に重ねて密集領域を視覚化。 Plotly density_contour, seaborn kdeplot で実装可能。 統計教育で 2 変量正規分布の理解に有効。
地球儀の球面を平面に投影する方式。 Mercator, Equal-Earth, Robinson, Albers など。 用途に応じて選ぶ。 教育コンテンツでは equal-area 投影が、 面積の正確さで推奨。 D3 geo projections で多種サポート。
requestAnimationFrame でブラウザ描画タイミングと同期。 transition は CSS / D3 transition / Plotly animation_frame で実装。 60fps を維持するために、 1 フレーム 16ms 内に描画完了が目安。
Cole Knaflic「Storytelling with Data」、 Edward Tufte「The Visual Display of Quantitative Information」、 Alberto Cairo「The Truthful Art」 が古典。 データ可視化を物語として組み立てる設計指針。 教育コンテンツ作成にも応用可能。
data-ink ratio (データインク比) を最大化、 chartjunk を排除、 small multiples を活用、 sparkline を導入、 lie factor を測る。 静的・インタラクティブを問わず、 設計原理として基礎中の基礎。
1984 年論文「Graphical Perception」 で、 位置 > 長さ > 角度 > 面積 > 体積 > 色 の順で人間が正確に判読できると示した。 円グラフより棒グラフが推奨される根拠。 知覚優先順位を意識した符号化選択が、 良い可視化の基本。
Jacques Bertin が 1967 年に「グラフの視覚変数」 を体系化。 位置・サイズ・形状・色相・明度・テクスチャ・方向の 7 種。 これらを意識して符号化を組むのが、 可視化設計の基礎言語。
永田ゆかり、 藤俊久仁、 NTT データ数理システム など、 日本語の良書も多数。 「データビジュアライゼーションの教科書」 「ストーリーで学ぶ HTML&CSS &JavaScript」 など、 教材として参考になる書籍が充実してきている。
縦軸の切断・誤導的な色使い・データ選別による主張誘導は禁忌。 SDC (Society for Data Communication), IIBA などの倫理ガイドライン参照。 教育場面でも「誤解を招かない可視化」 を意識する。
経営陣のリテラシー・データの質・更新頻度・ガバナンスの整備度合いがダッシュボード成功を左右。 「凄いツールを入れる」 だけでは失敗する。 業務側との対話・継続改善が肝心。 教育現場でも同様の文化が育ちつつある。
SSDSE-B-2026 を用い、 ① 47 都道府県の総人口（A1101）散布図、 ② 出生数（A4101）との回帰、 ③ 高齢化率の choropleth、 ④ 年平均気温（B4101）の年次推移、 ⑤ 消費支出（L3221）の treemap、 を Streamlit でまとめる課題を学生に出すと、 1 学期で実用ダッシュボードが完成する。
Constructivism (Piaget), Constructionism (Papert), Experiential Learning (Kolb) など、 教育理論の系譜が「能動的学習」 の重要性を裏付けている。 操作可能な可視化は、 認知科学的にも記憶定着率が高いと示されている。
Freeman ら 2014 年 PNAS 論文で、 受動講義より能動学習で成績向上が明確に示された。 インタラクティブ可視化は能動学習の有力な道具。 講義中に操作課題を組み込むだけで、 学習効果が向上する。
GeoGebra, Desmos などのインタラクティブ数学ツールは、 関数・確率・統計の理解を劇的に変えた。 統計分布の自由度を slider で動かすと、 分布の形状変化が体感できる。 数式だけでは伝わらない感覚が育つ。
Shiny で「自由度を動かすと t 分布がこう変わる」 「α を動かすと棄却域がこう変わる」 などのアプリを作ると、 検定理論の理解が深まる。 大学統計学講義での標準教材化が進む。
R Shiny の Python 版として、 Streamlit でも同様の教材が作れる。 SSDSE データを読ませて、 都道府県を選択するとサブグラフ更新、 という対話的ダッシュボードを学生自身が組む課題が増えている。
2022 年から必修化された情報 I で、 データ可視化の単元が設けられた。 Excel・Tableau Public・Google Looker Studio・Streamlit など、 学校が選択できる。 SSDSE はこの単元の事実上の標準教材として広がりつつある。
数理・データサイエンス・AI 教育 (MDASH) のリテラシーレベル・応用基礎レベルで、 SSDSE と可視化を組み合わせた演習が広がっている。 文系・理系問わず、 全学共通科目として実施される事例が増加。
日経・産経・大学拡張講座などで、 「BI ツールでダッシュボードを作る」 講座が人気。 Tableau・Power BI の認定資格は転職市場で評価される。 インタラクティブ可視化スキルは、 業務効率化の即戦力。
「誰が、 何を知りたくて、 どう操作するか」 を起点に設計する。 技術駆動 (作りたいから作る) では失敗する。 ユーザーインタビュー、 ペーパープロトタイプ、 A/B テストなど、 UX デザインの常套を踏襲する。
最初の画面は最少情報、 操作で詳細を出す。 Shneiderman の Mantra (Overview, zoom, filter, details) に従う。 全情報を 1 画面に詰めると、 情報過多で何も伝わらない。
軸ラベル・凡例・単位を必ず明記。 ツールチップで詳細単位を補足。 「総人口 (人)」 「消費支出 (円)」 など、 単位の読み違えを防ぐ。 表示桁数・小数点も統一する。
凡例は右側か下側に配置し、 グラフ本体を圧迫しない。 系列が少ない場合はラベル直接配置 (label inline) で凡例不要にする方が読みやすい。 動的凡例 (hover で hide / unhide) も有効。
重要な系列は彩度高く、 背景データは灰色・低彩度で。 ホバー時に色を強調するインタラクションも効果的。 色の数は最大 7 程度に抑える (人間の同時記憶容量)。
フォント・サイズ・行間も可視化の重要要素。 軸ラベル 10-12pt, タイトル 14-18pt, 凡例 10pt が一般的。 日本語フォント (Noto Sans JP, Meiryo) と英数フォント (Inter, IBM Plex) の組合せが推奨。
グリッドラインは薄い灰色で。 主軸のみ表示し、 副軸グリッドは省く。 Tufte の data-ink ratio 原則に従い、 グラフから不要なインクを削ぎ落とす。
「クリックしたら何が起こるか」 を視覚的に示す。 hover で色変化、 cursor: pointer の CSS、 操作ヒントテキストなどで予測可能性を高める。
ユーザーがフィルタや選択を間違えたとき、 一発で初期状態に戻せる「Reset」 ボタンが必須。 zoom 履歴を保持する double-click reset の慣習も有効。
データ取得や描画に時間がかかる場合、 必ずローディング表示を出す。 spinner, progress bar, skeleton UI など。 何もないとユーザーは壊れたと判断して離脱する。
データ欠損・接続失敗・無効なフィルタ条件などに対し、 ユーザーへ分かりやすいメッセージを出す。 console.error だけでなく、 画面上に表示。 リトライ機能、 代替案の提示も有効。
Lighthouse, Web Vitals, Performance API で計測。 LCP (Largest Contentful Paint), FID (First Input Delay), CLS (Cumulative Layout Shift) を目標値以内に。 ダッシュボード品質指標として継続監視。
単体テスト (Jest, Pytest), 統合テスト (Cypress, Playwright), 視覚回帰テスト (Percy, Chromatic) を組合せる。 可視化は CSS や DOM の変化で見栄えが変わるため、 視覚回帰テストが効果的。
ダッシュボードのユーザーマニュアル、 データ辞書 (各指標の意味)、 更新履歴、 既知の制約などを必ず添える。 Notion, Confluence, GitHub Wiki, MkDocs で整備するのが定番。
Web Content Accessibility Guidelines 2.2 (2023) が現行。 レベル AA を公的機関は遵守義務。 民間も AAA を目指す動きが進む。 インタラクティブ可視化も適用範囲で、 包括的な遵守が求められる。
コントラスト比 4.5:1 以上、 テキスト等倍ズーム 200% 維持、 マウス操作の代替手段提供、 動きの停止オプション、 フォーカス可視化、 など。 axe DevTools, WAVE で自動チェックも可能。
障害者だけでなく、 高齢者・非母国語話者・低速接続環境・小画面端末まで含めて配慮する設計思想。 Microsoft の Inclusive Design Toolkit が指針。 多様性配慮が、 結果として全ユーザーの体験を高める。
日本語の教育コンテンツを英語化することで、 海外学生・留学生にも配信可能。 グラフラベル・ツールチップを多言語化し、 URL パラメータで切替する設計が定番。 SSDSE 教材も英語版の整備が進んでいる。
研究データ・コード・可視化をオープンに公開する流れ。 Zenodo, OSF, GitHub などのプラットフォームが基盤。 インタラクティブ可視化は再現性の鍵で、 静的グラフより透明性が高い。
Docker, conda env, renv, Quarto, Jupyter で計算環境を固定。 データバージョンを DVC, LakeFS で管理。 ダッシュボードも IaC (Terraform, Pulumi) で構築管理。 研究・教育の信頼性を担保する基礎。
The New York Times Graphics Department は世界最高水準。 D3.js + 独自フレームワークで、 COVID-19、 選挙、 気候変動などの可視化を量産。 Mike Bostock, Nadieh Bremer などスタープロフェッショナルが活躍。
Financial Times Visual&Data Journalism も世界トップクラス。 John Burn-Murdoch の COVID 可視化は一世を風靡。 d3, Observable Plot を中心にスピード重視の制作。
日本国内でも朝日新聞・東洋経済・毎日新聞・NHK などがデータジャーナリズム部隊を持つ。 SSDSE のような公開データに依拠したインタラクティブ可視化記事が増えている。
ParaView, VTK, VisIt (科学計算)、 GraphPad Prism, OriginLab (生物・化学)、 Mathematica, Maple (数学) など、 専門分野向けの可視化環境がある。 用途特化型は表現力で勝る場面が多い。
電子カルテダッシュボード、 病院運営 BI、 疫学可視化など。 厚労省 NDB オープンデータの可視化は SSDSE と類似の構造。 個人情報保護に厳格な要件があり、 統計集計済データを対象とする。
学習管理システム (LMS) のダッシュボード、 成績分布・学習履歴の可視化、 EdTech ツールの利用状況分析など。 Khan Academy, Duolingo, Coursera が学習者ダッシュボードを提供。
RESAS (地域経済分析システム)、 e-Stat ダッシュボード、 国土交通省国土数値情報、 首相官邸ダッシュボード。 SSDSE と並ぶ公共データ可視化の双璧。 市民データリテラシー向上に直結。
IoT ダッシュボード、 工場稼働モニタリング、 サプライチェーン可視化など。 Grafana, Kibana, Splunk が定番。 リアルタイム性とアラート機能が重視される。
トレーディングダッシュボード、 リスク管理、 ポートフォリオ可視化など。 Bloomberg Terminal, Refinitiv Eikon が業界標準。 ミリ秒応答が求められ、 高速描画ライブラリ (Highcharts, ECharts) が選ばれる。
配送ルート最適化、 倉庫管理、 在庫可視化。 Mapbox / deck.gl で地理可視化、 D3 でフロー可視化が定番。 リアルタイム位置情報との連携で、 ライブダッシュボード化が進む。
売上ダッシュボード、 顧客セグメント可視化、 在庫回転分析。 Tableau, Power BI, Looker Studio が主流。 RFM 分析、 コホート分析の可視化が定番。
分子可視化 (PyMOL, VMD)、 ゲノム可視化 (IGV, JBrowse)、 天文 (Aladin Lite, ESA Sky)、 気象 (Windy.com) など、 専門特化型可視化。 オープンサイエンスと連動して普及。
サーバ側で aggregation してから描画する設計が王道。 DuckDB-Wasm でブラウザ上の SQL 集計も可能になった。 Parquet, Arrow フォーマットでの効率的伝送、 Apache Arrow Flight, Apache Iceberg などのデータ基盤。
Kafka, Kinesis, MQTT で配信されるストリームを WebSocket でブラウザに転送。 Highcharts addPoint, Plotly extendTraces で差分追加。 過去データの保持上限・再接続戦略・バックプレッシャー対策が重要。
ML モデルの予測結果・特徴量重要度・SHAP 値などをインタラクティブ可視化に組み込む。 SHAP, LIME, ELI5 などの説明可能性ライブラリは、 Plotly や Bokeh と相性がよい。
Shapley Additive Explanations で各特徴量の予測寄与を表現。 force plot, summary plot, dependence plot などインタラクティブ可視化が標準装備。 ML モデル解釈の必須ツール。
H2O AutoML, AutoGluon, FLAML, PyCaret などの AutoML フレームワークは、 モデル比較・特徴量分析の可視化を内蔵。 学習過程・性能曲線・confusion matrix がダッシュボードで一覧できる。
時系列異常・分布異常・グラフ異常を視覚的に検出。 Anomaly Detection Toolkit (ADTK), PyOD, Isolation Forest の結果を Plotly で可視化する例が定番。
DAG (有向非巡回グラフ) で因果関係を表現。 DoWhy, EconML, CausalNex などのライブラリが DAG 可視化を提供。 SSDSE データで「教育水準 → 所得」 などの因果仮説を可視化できる。
PyMC, Stan, NumPyro の事後分布を ArviZ で可視化。 trace plot, posterior plot, pair plot などインタラクティブ要素を含む。 ベイズ統計教育の必須ツール。
Prophet, NeuralProphet, Darts, sktime などのライブラリは予測・信頼区間の可視化を内蔵。 SSDSE 時系列を予測して将来推計を見せる教材も作りやすい。
K-means, DBSCAN, HDBSCAN, UMAP, t-SNE などの結果を 2D/3D 散布図で表現。 hover でクラスタ ID、 クリックで詳細表示、 リンクビューで関連属性表示などインタラクティブ化が進む。
高次元データを 2D に圧縮して可視化。 t-SNE は局所構造、 UMAP は局所と大域の両方を保持。 perplexity, n_neighbors などのハイパーパラメータを slider で動かすと、 学生の理解が深まる。
biplot で主成分軸とローディングを同時表示。 寄与率を棒グラフ、 累積寄与率を折線で表現。 SSDSE 多変量データを PCA すると、 都道府県の構造化が見えてくる。
scipy.cluster.hierarchy で dendrogram を描画。 樹状図で階層構造を可視化。 SSDSE 都道府県を距離ベースでクラスタ化すると、 地理的・経済的な類似県のグループが見える。
マーケットバスケット分析の結果を network 可視化・heatmap 可視化で表現。 mlxtend, apyori などのライブラリ + Plotly で実装。 教育教材として商品関連性を可視化する例が定番。
wordcloud, topic model 可視化 (pyLDAvis), 感情分析の時系列可視化など。 自然言語処理の結果を直感的に表現。 教育では SNS データやニュースデータの分析教材で使用。
Grad-CAM, Saliency map, attention map で CNN の判断根拠を可視化。 model explainability の重要ツール。 教育では「AI がどこを見て判断したか」 を学生に体感させる。
学習過程の累積報酬曲線、 Q 値の heatmap、 ポリシーの行動分布など。 OpenAI Gym, Stable Baselines3 + matplotlib/plotly で標準的な可視化が可能。
TensorBoard, Weights&Biases, MLflow がデファクトスタンダード。 学習曲線・勾配・活性化・重み分布をリアルタイム可視化。 ML 開発の必須インフラ。
可視化は強力な説得ツールゆえに、 誤導・誇張・選別による偏向に注意。 「The Truthful Art」 (Alberto Cairo) の倫理的指針を守る。 教育場面でも「批判的に可視化を読む」 リテラシーを養うべき。
SSDSE-B-2026 は 47 都道府県のデータを扱う教育用データセット。 Plotly, Streamlit, Bokeh, Altair などの Python ライブラリと組み合わせれば、 学生が自分の手でインタラクティブダッシュボードを構築できる。 操作可能な可視化は、 認知科学的にも教育効果が高く、 統計教育・データサイエンス教育の中核として、 今後さらに重要性を増していく。 「触って分かる、 操作して学ぶ」 という学習体験を、 教育者は意識的に設計に組み込むべきである。
合成データで 1M 点を画面 500 ピクセルに表示する際の集約倍率を計算する。
| 項目 | 値 |
|---|---|
| 全点数 | 1,000,000 |
| 画面横ピクセル | 1,000 |
| 1 ピクセルあたり点 | 1,000 |
1 2 3 4 5 6 7 8 9 | total = 1_000_000 pixels = 1000 ratio = total / pixels print(f"集約倍率: {ratio}") zoom_levels = [1, 10, 100, 1000] for z in zoom_levels: shown = total / z ratio_z = shown / pixels print(f"ズーム {z}x: 表示 {int(shown):,}, 集約 {int(ratio_z)}") |
💬 手計算 (Step 2) と Python 出力が完全一致。
インタラクティブ可視化のライブラリ選択を、 データ規模と公開方式で 3 段階で判定する。
fig.write_html()、 ダッシュボード → Streamlit / Dash、 BI レポート → Tableau / PowerBI初心者は Plotly Express の px.scatter(d23, x='A1101', y='高齢化率', hover_data=['Prefecture']) から始めるのが推奨。 3 行で都道府県名がホバー表示される散布図ができる。
インタラクティブ可視化は、 データ分析パイプラインの「最終出力」段階で活躍する。 上流のデータ整形と下流の意思決定の橋渡し役。
静的グラフは紙印刷向き、 インタラクティブは Web 共有向き。 配布形態を最初に決めてからツールを選ぶのが効率的。
インタラクティブ可視化は「静的グラフ → 探索的可視化 → ダッシュボード」という流れの中核に位置する。 関連ツールと用途の関係を整理する。
中心の「interactive viz」から、 (1) 実装ライブラリ (Plotly / Bokeh)、 (2) Web 配布形態 (D3.js)、 (3) 上位応用 (ダッシュボード)、 (4) 商用 BI (Tableau / PowerBI)、 (5) 並列概念 (matplotlib による静的グラフ)、 (6) 上流の目的 (探索的データ解析: EDA) を放射状に配置している。 静的グラフは紙印刷向き、 インタラクティブは Web 配布・探索向き、 BI ツールは経営層向けレポートで使い分ける。 SSDSE-B-2026 のように 47 県 × 多変数のデータでは、 Plotly の散布図でホバーすると都道府県名がポップアップする実装が定番だ。
この インタラクティブ可視化 ページで出てくる主要キーワードを一覧します。チップをクリックすると該当箇所へジャンプできます。
あなたは、可視化 の入口で「インタラクティブ可視化（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$ | 目的変数 | 出生数(A4101)・消費支出(L3221)など |
| $n$ | 標本数 | 47（都道府県数） |
| $\theta$ | パラメータ | 傾き・切片など |
| $\varepsilon$ | 誤差項 | モデルで説明しきれない残り |
上の式 $y = f(x; \theta) + \varepsilon$ を「数学者の声」ではなく、「現場の声」で読み直してみます。
合言葉：「定義は短い、解釈は長い」。インタラクティブ可視化 はたった 1 行の式ですが、それを 47 都道府県データに当てると、5 種類のチェックリスト（線形性・独立性・等分散・正規性・外れ値）が芋づる式に出てきます。
数式が読めたら、すぐに 実データ（SSDSE-B-2026, 47 都道府県, 2023 年度）で計算しましょう。 抽象を 47 行の表に落とすと、急に理解できることがあります。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | import pandas as pd # df2023 はこのあとのブロックで作っているので、ここでも用意しておく df = pd.read_csv('data/raw/SSDSE-B-2026.csv', encoding='cp932', skiprows=[1]) df2023 = df[df['SSDSE-B-2026'] == 2023].reset_index(drop=True) # インタラクティブ可視化 の代表値を 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 の実装は「読む → 集計 → 描く → 報告」を一直線に書きます。長いコードよりも、各ステップが分離していることが大事です。
1 2 3 4 5 6 7 8 9 10 11 | 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 | 出生数 | 人 | 人口動態の説明変数 |
| 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 行に戻ってください。
ここまで「インタラクティブ可視化とは何か」を言葉で説明してきたが、 この概念だけは触らないと絶対に分からない。 下の散布図は SSDSE-B-2026（2023 年度、 47 都道府県）の実測値をこのページに直接埋め込んだもので、 外部ライブラリなしの素の JavaScript + Canvas で動く。 静的な図では不可能な 3 つの操作 ── (1) ホバー／タップで詳細表示、 (2) 軸変数の切替、 (3) ドラッグで範囲選択（ブラシ）→ 選択県のみ統計量を再計算 ── を実際に試してほしい。
data/raw/SSDSE-B-2026.csv（encoding='cp932', skiprows=[1]）から年度==2023 の 47 行を抽出。 使用列は A1101（総人口）・A1303（65歳以上人口）・A4101（出生数）・A4103（合計特殊出生率）。 高齢化率のみ A1303 ÷ A1101 × 100 として実測値から計算した派生変数。 値の捏造は一切ない。
操作方法：点にマウスを乗せる（スマホはタップ）と県名と実測値が出る。 図の上でドラッグ（スマホは指でなぞる）と矩形選択になり、 選択された県だけがオレンジ色になって下の統計量が再計算される。 選択後に「選択範囲へズーム」を押すとその領域だけを拡大表示する。
| 操作 | 対応する原理 | なぜ静的図では不可能か |
|---|---|---|
| ホバー／タップで県名・数値表示 | Details-on-demand（詳細は要求時に）。 Shneiderman の可視化マントラ「Overview first, zoom and filter, then details-on-demand」の第 3 段階。 | 静的図で 47 点全部にラベルを付けると文字が重なって読めない。 「必要なときだけ出す」ことで情報過多を回避する。 |
| ドラッグで範囲選択 → 統計量再計算 | Brushing & Linking（連動ハイライト）。 図上の選択が別の表示（ここでは統計量パネル）に連動する。 | 「この一角の県だけの平均・相関はいくつか」という問いは、 静的図では部分集合ごとに図を作り直すしかない。 |
| 選択範囲へズーム ↔ 全体表示 | Overview + Detail / Zoom & Filter。 全体像で構造を掴み、 密集部を拡大して個々を識別する。 | 総人口を軸にすると東京都が外れて他 46 県が左に密集する。 静的図では「全体版と拡大版の 2 枚」が必要になる。 |
| 軸変数の切替 | 動的な再マッピング。 「定義／数式」節の 3 層アーキテクチャのうちマッピング層（x, y への変数割当）だけを差し替え、 データ層は再利用する。 | 4 変数から 2 つ選ぶ組合せは 12 通り。 静的図なら 12 枚、 インタラクティブなら 1 枚で済む。 |
初期状態（X=高齢化率、 Y=合計特殊出生率）で沖縄県を探してみてほしい。 高齢化率が最も低く出生率が最も高い右上ならぬ左上の孤立点としてすぐ見つかる。 次に東京都（出生率 0.99 で全国唯一 1 を切る）を探す ── ホバーすれば一瞬だ。 これが「探索（exploration）」であり、 インタラクティブ可視化の主戦場。 一方、 発見した知見を報告書で「説明（explanation）」するときは、 沖縄と東京だけに注釈を付けた静的図のほうが伝わる。 探索はインタラクティブ、 説明は静的という使い分けが本質で、 ツール選択（Plotly か matplotlib か）はこの区別から自動的に決まる。
この単一ウィジェットを複数並べ、 1 つのブラシ選択が全チャートに波及するようにしたものがダッシュボード（Streamlit / Dash / Tableau で構築。 詳細は Tableau と BI ツール を参照）。 さらにデータ層を固定ファイルからストリームに替えるとリアルタイム可視化になる。 土台となる静的可視化の設計原則はデータ可視化、 図種としての基礎は散布図、 探索プロセス全体は探索的データ分析（EDA）で解説している。 本ウィジェットのように「実装は素の JavaScript でも原理は同じ」という点が重要で、 Plotly や D3.js はこの座標変換・イベント処理・再描画を抽象化してくれる道具にすぎない。
このページは既に探索と説明の使い分け・ブラシ選択バイアスを扱っている。 ここでは重複を避け、 初期ビュー（デフォルト表示）そのものが暗黙の編集判断になるという、 インタラクティブ可視化に固有の別角度を深掘りする。
インタラクティブ図は「読者が自由に操作できる」と語られがちだが、 実際に多くの読者が見るのは設計者が選んだ初期状態1枚だけだ。 どの軸をデフォルトにするか、 どの並び順を最初に見せるか、 ズームをどこに合わせておくか ── これらは「操作すれば変えられる」建前の裏で、 第一印象を決め打ちする編集された初期フレームとして働く。 静的図の構図選択と同じ責任が、 気づかれにくい形でデフォルトに宿る。
SSDSE-B-2026（pd.read_csv(encoding='cp932', skiprows=[1])、 2023年・47都道府県）で、 デフォルトの選び方が結論を左右する様子を実測値で確認する。
※ 上の数値はすべて SSDSE-B-2026・2023年の実測。 df[df['SSDSE-B-2026']==2023] で抽出し、 総人口 A1101・65歳以上人口 A1303 から算出。 合成データは使っていない。