棒グラフに縦軸を追加する

今日は前回の記事「D3.jsで横浜市の人口棒グラフを表示する」で描いた棒グラフについて、縦軸を追加することにします。

スケール追加はカンタン

d3.scale()関数を使えばスケールを簡単に作れるみたいです。実装してみた結果が下のグラフです（画像をクリックすると、グラフのページに飛びます♪）。

ソースはこちら。軸を描くコードはたった３行です。

index.html

これで縦軸のスケールが描けました。

ざっくりですが、グラフの値と元の表の値が合ってることが確認できました♥︎

次はこの人口データを、以前描いた横浜市地図上で表現することを考えてみようと思います。

それではまた♪

これがいわゆる台風一過でしょうか。とっても良いお天気です♥︎

人口を棒グラフで可視化する

さて、今日は前回の記事「Perlで横浜市の区別年齢別人口データを自動入手する」でWebから入手した横浜市の人口データを棒グラフにしてみたいと思います。

D3.jsで棒グラフを描画してみる

早速グラフを描いてみました。

D3.jsのチュートリアルなどをみると、divを使う方法とsvgを使う方法がありますが、このグラフはsvgを使って描いています。画像をクリックすると、グラフページに飛びます♪

コードは次の通りです。

index.html

L56は、読み込んだJSONファイルの0番目の要素に横浜市全体の人口データが入っており、グラフから削除するためにカットしています。

stat.splice(0,1);

L59から棒グラフを描画、

L72から区名を描画する処理を記述しています。

L82でラベルを-90度回転させる処理は、回転基準アンカーを文字の位置にしたいので、transrate()rotate()で指定しております。（x,yで文字の位置を指定する書き方だと、回転基準が原点0,0になってしまう=>stackoverflow）

棒グラフが描けました♥︎

データを自動収集するスクリプトと連動させれば、人口グラフを自動更新するサイトが作れそうですね。

でも・・・このままだと縦軸に単位が入っていないので値が不明です（^^;

次回は、縦方向の目盛りを追加していきます。

それでは、よい一日をお過ごしください！