PythonとJavaScriptではじめるデータビジュアライゼーション

387

17.7　躍動感を与える遷移

})

.attr('cx', xScale.rangeBand()/2) #

❸

.attr('r', xScale.rangeBand()/2);

winners.attr('cy', function(d, i) {

return yScale(i); #

❹

});

winners.exit().remove(); #

❺

❶ この

data

呼び出しはまずその年の受賞（

values

配列）を年グループにバインディングし、丸印にキーと

して受賞者の名前を設定する。

❷ 共有の

categoryFill

メソッド（

nbviz_core.js

で定義）を使い、受賞分野によって丸印に色を付ける。

❸ 丸印の半径の半分だけ

x

位置を調整し、グループの

y

軸に丸印の中心を配置する。

❹ 序数

yScale

を使い、受賞の配列インデックスによって丸印を垂直方向に配置する。

❺ 新しいデータセットのデータにバインディングされていない（受賞名がキーの）丸印を削除する。

例

17-6

のコードから受賞時系列グラフが作成できます。必要に応じて丸印を作成し、配列イン

デックスで指定されたように既存の丸印と一緒に正しい位置に配置します（図

17-5

を参照）。■

ユーザドリブンでのデータ変更に対応する、十分実用性のある時系列グラフを作成しましたが、

遷移は少し唐突でいまひとつです

†

。次に、

D3

の威力を示す素晴らしい例を紹介しましょう。コー

ドを

2

行追加するだけで、時系列グラフの状態が更新されたときに非常に高い視覚効果が得られ ...