d3.jsで2軸のグラフを描く

HP作成など

こんにちは。くまこです。


最近d3.jsの勉強を始めました。
まだまだ何もわからない・・・( ;∀;)状態ですが、
練習に2軸の棒グラフを作ってみました。


完成系はこちら。

会社の総人数のグラフ(データはもちろんダミー)を作ってみました。
左側の軸が社員の総人数、右側が各月の入退社人数です。
グラフ部分にマウスオンすると詳細を表示します。


ソースは以下。

今回はd3.jsのv4を使ってみました。
d3.jsのバージョンにv3、v4、v5とあり、
v3→v4で大きな変更が入ったらしい。
ネットで情報を探して試してみてもうまくいかない!というときは
d3.jsのバージョン違いを疑ってみてもいいかもしれない。


小学生ぶり位にグラフを書いたので(大げさ)
ちょっと復習。
・棒グラフ:量の大小を比較する。
・折れ線グラフ:量が増えているか減っているか、変化の方向をみる。
・円グラフ:全体の中での構成比をみる。
・帯グラフ:構成比を比較する。


期間の経過に対する量の変化を見るなら折れ線、
同じ期間での量の大小をみるなら棒グラフを使う。


円グラフと帯グラフはデータの構成を見せるものだけど、
円グラフは見づらいから最近はあまり使わない(らしい)


それにしても、d3.jsがなかなか難しい・・・。
グラフを書くためのライブラリではなくて、
ビジュアライゼーションを簡単にできるライブラリ、なので
自由度は高いのですが、その分こっちで色々指定してあげないといけなくて
そこがすこしめんどくさい^^;


d3.jsが発想次第でなんでもできるんだなぁって
いうのがよくわかる見本はこちら。


何でもできそう!


グラフを描画したいだけならc3.jsのほうが学習コストが低くていいかも。

ただ、凝ったことをやりたいときにc3.jsではできなかったりするので
その時は結局d3を使うことになる…。



目に見える形で表示させる処理は、表示できただけでテンション上がるし、
完成系に近づいていくのも目に見えてわかるので
やってて楽しいです(*’ω’*)

コメント

タイトルとURLをコピーしました