これはData Visualization Advent Calendar 2014の20日目の投稿です。
dataをplotするにあたって大変便利なd3.jsですが、時系列などによる"変化"も表現できるように便利な関数がいくつか備わっています。
基本的にはtransitionやtweenメソッドで遷移させるのですが、その際の動きを指定するeaseメソッドをちょっとこだわって使うだけで魅力的な表現になります。
自身も先日、雨に関するつぶやきを表示する作品を発表したのですが、その中でも簡単に使用しています。(http://world-rainy-clock.herokuapp.com/)
基本
svg.select("circle").transition()
.duration(10)
.ease("linear")
.attr("cy", 10)
transitionに続いて、遷移にかける時間、動き、遷移後の状態などを指定していきます。
easeが動きの指定です。
easeの動きの指定は基本の以下に加えて、末尾に-in、-out,-in-out,-out-inつけるパターン(linear-inのようなもの)があります。
- linear
- quad
- cubic
- sin
- exp
- circle
- elastic
- back
- bounce
それぞれがどのような動きなのかは以下が参考になります。
http://bl.ocks.org/hunzy/9929724
引数がとれるもの
先に紹介した動きの種類の中には引数をとって微調整できるものがあります。
例えばelasticです。
.ease("elastic", 1, 0.8)
elasticは遷移終わりにびよよ～んって感じで伸び縮みするのですが、1が振れ幅、0.8が弾力のような感じだと思います。このへんは調整しながらいい具合のを指定しました。
他にはどの動きに引数が指定できるかどうかは公式ドキュメンの以下をみてみてください。
https://github.com/mbostock/d3/wiki/Transitions#easing
(ちなみに上記の値は先に紹介した作品 内の地球の回転で使用しているものです。)
発展
そして更にこだわりたい場合、easeには独自の関数もわたせます。
以下が参考になりますが、きっとbuild-inの動きでいいやとなる場合が多いのではないでしょうか..
最後に
せっかくd3.jsには色々なeasingが備わっているので、何も考えずlinearを指定するのではなく、皆さんのdataをより魅力的に見せる動きを指定してみてはどうでしょうか。
ではでは！