data-visualization

データビジュアライゼーションのアニメーション

ディズニーのアニメーション12原則を、チャート、グラフ、ダッシュボード、情報表示に適用します。

クイックリファレンス

原則	データビジュアライゼーションでの実装
スクワッシュ＆ストレッチ	バーのオーバーシュート、弾むような静止
予備動作	データ読み込み前の短い間
演出	順次表示、フォーカスの階層
ストレート・アヘッド／ポーズ・トゥ・ポーズ	ストリーミングデータとスナップショットデータ
フォロースルー／オーバーラップ	要素の段階的な出現
スローイン／スローアウト	値の滑らかな補間
弧	円グラフのスイープ、フロー図
二次動作	データポイントに追従するラベル
タイミング	表示 300～500ms、更新 200～300ms
誇張	重要な変化を強調
立体感のある描画	一貫したスケール、明確な関係性
アピール	心地よい表示、プロフェッショナルな仕上がり

原則の適用

スクワッシュ＆ストレッチ：バーは目標の高さを超えてから落ち着かせられます。円グラフのスライスはホバー時に少し広がります。バブルは衝突時に縮みます。合計値は正確に保ちましょう。アニメーションは遷移のためのものです。

予備動作：データが表示される前に短い読み込み状態を設けます。拡大の前に少し縮小します。カウンターは高速で数え始める前に一瞬停止します。これにより、ユーザーは情報が表示されることを予測できます。

演出：重要なデータから順に、意味のある順序で表示します。アクティブなデータ系列を強調します。注目している間は、関係のない要素を薄く表示します。動きを使ってデータのストーリーを導きます。

ストレート・アヘッドとポーズ・トゥ・ポーズ：リアルタイムのストリーミングデータは連続的にアニメーションさせます（ストレート・アヘッド）。ダッシュボードのスナップショットは状態間を遷移させます（ポーズ・トゥ・ポーズ）。データの性質に合った手法を選びましょう。

フォロースルーとオーバーラップ：データポイントは時間差をつけて表示します。ラベルはデータ要素の後に落ち着かせます。データの前にグリッド線を表示します。凡例は少し遅れてアニメーションさせます。

スローイン／スローアウト：値の変化を滑らかにイージングし、唐突なジャンプを避けます。d3.easeCubicInOut または同等のものを使用します。カウンターのアニメーションは加速してから減速します。プログレスバーは完了に向けてイージングします。

弧：円グラフは12時の位置から時計回りにスイープします。サンキーダイアグラムのフローは曲線に沿って表示します。ネットワークグラフには力学ベースの弧を使用します。放射状チャートは中心から広げます。

二次動作：ツールチップはデータポイントの動きに追従します。バーが伸びるにつれて値ラベルをカウントアップします。軸の目盛りはスケールの変化に応じて動きます。影でデータの奥行きを示します。

タイミング：初回表示：300～500msで段階的に表示します。データ更新：200～300ms。ホバー状態：100～150ms。フィルターの遷移：400～600ms。ゆっくりしたタイミングは理解を助けます。

誇張：重要な変化には注意を引く演出を加え、外れ値をパルスや発光で示します。しきい値を超えたら強調します。異常値はより劇的にアニメーションさせます。データそのものを誇張してはいけません。

立体感のある描画：アニメーション中も一貫したスケールを維持します。遷移によってデータの関係性が歪まないようにします。軸の位置合わせを保ちます。動作中も視覚的な階層を明確に保ちます。

アピール：データの表示は心地よく感じられるようにします。プロフェッショナルで意図のある動きは信頼につながります。無意味なアニメーションは避け、すべての動きが理解を助けるようにします。

コードパターン

D3.js

// Staggered bar entry with easing
bars.transition()
    .duration(500)
    .delay((d, i) => i * 50)
    .ease(d3.easeCubicOut)
    .attr("height", d => yScale(d.value))
    .attr("y", d => height - yScale(d.value));

// Smooth data updates
bars.transition()
    .duration(300)
    .ease(d3.easeCubicInOut)
    .attr("height", d => yScale(d.value));

Chart.js

// Animation configuration
options: {
    animation: {
        duration: 500,
        easing: 'easeOutQuart',
        delay: (context) => context.dataIndex * 50
    }
}

データ種別ごとのタイミング

ビジュアライゼーション	表示	更新	ホバー
棒グラフ	400msで段階的に表示	300ms	100ms
折れ線グラフ	600msで描画	400ms	150ms
円グラフ	500msでスイープ	300ms	100ms
散布図	300msで段階的に表示	200ms	100ms
ダッシュボード	500～800msで連鎖的に表示	300ms	150ms

アクセシビリティに関する注意

常に prefers-reduced-motion を尊重してください。データビジュアライゼーションのアニメーションは理解を助けるものであり、妨げるものであってはいけません。動きを無効にしているユーザー向けに、即時表示の代替手段を用意してください。