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

こんにちは。くまこです。 最近d3.jsの勉強を始めました。 まだまだ何もわからない・・・( ;∀;)状態ですが、 練習に2軸の棒グラフを作ってみました。 完成系はこちら。 会社の総人数のグラフ（データはもちろんダミー）を作ってみました。 左側の軸が社員の総人数、右側が各月の入退社人数です。 グラフ部分にマウスオンすると詳細を表示します。 ソースは続きへ。 今回はd3.jsのv4を使ってみました。 d3.jsのバージョンにv3、v4、v5とあり、 v3→v4で大きな変更が入ったらしい。 ネットで情報を探して試してみてもうまくいかない！というときは d3.jsのバージョン違いを疑ってみてもいいかもしれない。 小学生ぶり位にグラフを書いたので（大げさ） ちょっと復習。 ・棒グラフ：量の大小を比較する。 ・折れ線グラフ：量が増えているか減っているか、変化の方向をみる。 ・円グラフ：全体の中での構成比をみる。 ・帯グラフ：構成比を比較する。 期間の経過に対する量の変化を見るなら折れ線、 同じ期間での量の大小をみるなら棒グラフを使う。 円グラフと帯グラフはデータの構成を見せるものだけど、 円グラフは見づらいから最近はあまり使わない（らしい） それにしても、d3.jsがなかなか難しい・・・。 グラフを書くためのライブラリではなくて、 ビジュアライゼーションを簡単にできるライブラリ、なので 自由度は高いのですが、その分こっちで色々指定してあげないといけなくて そこがすこしめんどくさい^^; d3.jsが発想次第でなんでもできるんだなぁって いうのがよくわかる見本はこちら。 d3.js Gallery 何でもできそう！ グラフを描画したいだけならc3.jsのほうが学習コストが低くていいかも。 大体のことはサンプル見ながらなんとかなる。 C3.js Sample ただ、c3.jsはネットにあまり情報が上がっていないので わからないことを調べる時が大変かも・・・。