(注)参照しているビデオは、矢印キーで前のページに移動した後に、再び矢印キーで指定しているページに戻ってこないと、うまく再生機能が起動しないようです。面倒ですが、済みません。

Mark DiMarcoのJSConf 2014での講演です。アルゴリズムがどのように適用されているかを、数式でなく、映像で説明してくれているのが、とてもわかりやすいです。

Amazonのプルダウンメニューの工夫の話は聞いたことがありましたが、元をたどればAppleが発明したものだけどOS Xに移行するときに使われなくなった（コピーし忘れた？）テクニックなのですね。知りませんでした。

1) 画面でマウスを自由に動かした際に、どのコンテンツが反応すべきかを事前に計算しておくアルゴリズム

このテクニックは、Voronoi Diagram（概念図）として知られている。

実用例: あらゆるデータビジュアライゼーションに応用できる。
- 大統領選において、各地の選挙結果の積み重ねで当落予想をだす系統図の細部詳細をマウスの動きに合わせて表示する。（ビデオ）
- 野球のプレイヤー別の、出場試合数と打率の相関分散図におけいて、マウスの動きにあわせて、表示する詳細データを決める。（参考図）
- このような細かい雇用統計のグラフでも、Voronoi Diagramを適用できる。

Voronoi Diagramを作成するアルゴリズム: それぞれの地点から等距離になるポイントを割り出し、エリアを分割する。
- 概念図
- ３地点にアルゴリズムを適用した映像
- 20地点にアルゴリズムを適用した映像
- 大量の地点にアルゴリズムを適用した映像

このアルゴリズムは、d3やpaper.jsで実装されている。（コード例）

Voronoi理論が命名される60年前、1854年に、John Snowが、ロンドンにおけるコレラの伝染が井戸を経由しているという仮説を検証するために使われた。コレラで死亡した人々の家の位置データから、共通して利用されたと推測された井戸を割り出した。（検証図）

2) プルダウンメニューから更にサブメニューにマウスを移行する際に、マウスを正確に平行移動しないとサブメニューを選択できない問題を解決するアルゴリズム（うまくいかない事例の映像）

setTimeoutを設定すると解決するが、プルダウンをマウスが移動する際に、反応に遅延が起きる。

Amazonがマウスの自由な動きを許容して、この問題を解決している。（参考映像）

マウスが移動する傾きの変化を計算する手法で、Ben Kamensが、jQueryプラグインを提供してくれている。

Appleが1980年代に発明し、Mac OSに採用されたが、OS Xに移行した際に何故か忘れられてしまったテクニック。