こんにちは。今朝は台風が通過する予報だったのでドキドキして起床しましたが、予想外にも快晴でした。

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

 

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

さて、今日は前回の記事「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）

 

 

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

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

 

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

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

 

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