対象: 学部3年次・機械学習初学者（ニューラルネットワーク初学者）
形式: 単一HTMLファイル（ブラウザのみで動作、インストール不要）
minibatch_sgd_viz.html をブラウザで開くだけで動作します。
| パネル | 内容 |
|---|---|
| ① データ空間 | 全30点のデータ（青=クラスタA・赤=クラスタB）と今回のミニバッチ（黄）を表示 |
| ② ミニバッチの損失面と勾配方向 | 現在のミニバッチだけを使った損失のヒートマップと、θ が次に動く方向（緑矢印） |
| ③ 軌跡比較 | 全データを使うGD（青線）とミニバッチSGD（橙破線）の動きを全体損失面上に重ねて表示 |
色の意味（ヒートマップ）
青（低損失）→ 緑 → 黄 → 赤（高損失）
赤い山がクラスタA・B間の「バリア（損失の峰）」で、θ の局所最適への閉じ込めを表します。
| 操作 | 説明 |
|---|---|
| 1ステップ進む | 1回の更新を手動で実行。②③が更新され、下部にそのステップの解説が表示される |
| ▶ 自動再生 | 最大1000ステップまで自動で実行（約80秒）。途中で一時停止可 |
| ↺ リセット | θ を出発点に戻す（データは変わらない。③のヒートマップも変化しない） |
| バッチサイズ スライダー | 1〜30点。30にすると全データGDと同じ振る舞いになる |
| 学習率 η スライダー | 0.01〜0.30。大きいほど1ステップの移動量が大きい |
1. ミニバッチSGDの局所最適脱出
θ はクラスタB（局所最適）の付近からスタートします。
2. バッチサイズと脱出しやすさの関係
バッチサイズを変えてリセット・再実行を繰り返してみましょう。
| バッチサイズ | 勾配のばらつき | 脱出しやすさ（目安） |
|---|---|---|
| 1〜2 | 大きい | 高い（〜80%以上） |
| 4〜6 | 中程度 | 中程度（〜60〜70%） |
| 30（全データ） | ほぼゼロ | ほとんど脱出しない |
3. ②のヒートマップの変化
1ステップごとに次のミニバッチに切り替わり、②の損失面が変化します。
A点が多いバッチ → A側の谷が深くなり、θ が引き寄せられます。
B点が多いバッチ → B側に引き戻されます。
この「ランダムな引力の切り替わり」の蓄積が、バリア突破のきっかけとなります。
ミニバッチ勾配は全体勾配の不偏推定量ですが、ばらつき（分散）を持ちます。
\[\text{Var}[\hat{g}_\text{batch}] \propto \frac{1}{\text{バッチサイズ}}\]バッチが小さいほど1ステップごとの揺らぎが大きく、損失の「山」を確率的に乗り越えやすくなります。全データGDはこの揺らぎがゼロに近いため、バリアに阻まれた状態から動けません。
なお、この可視化では2次元のパラメータ空間 $\theta = (\theta_1, \theta_2)$ を用いていますが、実際のニューラルネットワークでは数百万次元のパラメータ空間で同様の現象が起きています。
sgd/
└── minibatch_sgd_viz.html # 本体（単一ファイル）
└── README.md # このファイル