03」)で数値軸と項目軸のついた縦棒グラフをつくりました。グラフにするデータを差し替えて手直ししたうえで、アニメーションも加えてみましょう。今回は先にでき上がりのサンプル001をお見せします。棒グラフのデータを差し替えるまずは、TSV(タブ区切り)ファイルを、つぎのデータで差し替えましょう。Mathematics』による統計です(Googleスプレッドシート)[*1]。03」で書いたコード002は、読み込んだTSVのデータにもとづいて、グラフの棒の長さと幅だけでなく、数値や項目の軸も差し替えるようにしました。これだけで新しいグラフができてしまうのです(図001)。アーサー・コナン・ドイル『踊る人形』でシャーロック・ホームズは、この事実から暗号文の「E」をただちに見抜きました。数値軸の書式を変える数値軸の書式を変えましょう。データの値からは、パーセンテージの方が適しているからです(図002)。axis.ticks()メソッドで、軸のメモリ間隔と単位が定められます。第1引数は、軸をメモリでいくつに分けるかです。大まかな数値でかまいません(値を少し増減しても調整されて、メモリは変わらなかったりします)。第2引数には'%'を渡します。項目数が多いので、左右マージンは値を少し減らしました。グラフの棒をアニメーションで伸ばすselection.transition()メソッドを使うと、CSSのtransitionプロパティと同じようなやり方でアニメーションが加えられます。transition.attr()に変化させる属性と値をそれぞれ与えます。これで、ページを読み込んだとき、グラフの棒が伸びながら表れます。アニメーションの動きは期待と大きく異なるでしょう(図003)。getY(d);});});図003■グラフの棒が上端から項目軸に向かって伸びる画面の垂直軸は下が正の方向です。したがって、グラフの棒は上端を決めて、下に向けて長さが定められています。Matrix』の有名な映像のような、下に向かうさみだれのアニメーションになってしまったのです。下端から上に向けて長方形は描けませんでした。したらよいかといいますと、垂直座標(y属性)を、つぎのように項目軸の位置から、棒の伸びに合わせて上端に動かしてゆくのです。transition.ease()メソッドで、アニメーションの動きに変化を与えました。引数のイージング関数d3.easeElasticOut()で、アニメーションの終わりがバネのように弾みます。getY(d);});});これで、前掲サンプル1の伸びる動きで表れる棒グラフができ上がりました。スクリプトは以下のコード001にまとめたとおりです。つぎのCSSを加えて、棒にポインタが重なったときの色を変えました。スクリプトの無駄を1箇所修正。