ポリゴンの中央にラベルを２行を貼付ける

区毎のポリゴンの中央にラベルが２行くるように位置を調整しつつ、ラベルを貼っていきます。

実際に描いた地図が次の通り（画像をクリックすると地図ページに飛びます）。

やっていることはカンタン。テキストラベルのtransform属性で指定する高さ方向の位置について、上の行は-0.5行、下の行は+0.5行だけシフトさせているだけです。行間は予め決めてあります（labelLineHight）。

ちなみに・・・
縦方向の座標は下向きが正なので、通常の感覚と逆方向になります。上方向への移動がマイナス，下がプラスですね。

ソースコードは次の通り。

index.html

動けばよし！という感じのコードになってしまいましたが、数値ラベルも合わせて貼れました♪

ただ、濃い緑の背景の箇所は黒いテキストラベルが見づらいですね。背景が濃い場合は文字色を白にすると良いのではないでしょうか。

という訳で、次はこの問題を解決すべく、ラベルの色制御をしてみようと思います。

地図を人口の大小に応じて色分けする

さて、前回の記事「JSONファイルをCSVファイルに変換する」で作成したJSONファイルを使って、横浜市地図を改めて描きます。行政区毎の人口数の大小に応じて、地図を色塗りします。

地図を描画する

早速完成した地図です♪画像をクリックしてくださいね^^

人口が多い区は濃く、少ない区は薄い色に指定してみました。

元のソースコードはこちら。

index.html

L.84-93で、区毎の人口数の最大値と最小値を計算しています。

冗長過ぎるコードなので、すっきり直したいですが。

L.116-で、各区領域にclass属性を指定しています。

続いてL.126-で色塗りしています。

D3.jsの機能を使って、色を人口に応じて求める関数を作成します

areaGrad = d3.scale.linear().domain([target_min, target_max]).range(["#bee59e", "#349946"]);

d3.scale.linear()は、リニアに補間した結果を返す関数を作成するもので、f = d3.scale.linear()domain([x1, x2]).range([y1, y2])とすると、f(x)は下図のように補間した値yを返してくれます。

さらに、range()には16進数RGB colorも指定できるという優れもので、range([薄い緑, 濃い緑])を指定しました。

domainには、先ほど求めた人口の最小値＆最大値を指定してありますので、

という感じで、L.131でfill指定する色を返してくれます。

色塗り完成です♪

次回は、人口の数値自体を地図に書き入れる処理を追加したいと思います。

さて、今日は以前書いた記事「Perlで横浜市の区別年齢別人口データを自動入手する」で入手したJSONファイルをCSVファイルに変換します。何故CSVにしたいかと言えば、その前に書いた記事「横浜市地図に区名を表示する」で紹介した横浜市地図に人口データを反映させるための情報に編集し直す必要があり、一旦CSVにした方が編集作業が便利そうだからです。

JSONファイルを読み込んで、CSVとして書き出す

横浜市の人口データが入っているJSONファイルを読み込み、２次元テーブルに変換して、CSVとしてファイル出力するスクリプトをPythonで書きました。汎用性のあるコードにしたかったのですが、結構手間取りそうだったので、今回扱うJSONファイルの構造に依存した処理になっています。

conv_json_to_csv.py

ここではCSVにするためにDictionary型のデータを２次元データに書き換えています。

L32の書き方は便利で、

[x[1] for x in row_list]

は、[(x0,y0),(x1,y1),(x2,y2),…]という形式のリストのうち、第二要素のみを取り出して

[y0,y1,y2,...]

と整理してくれます。=>stackoverflow

以上で、横浜市の0-5歳児の人口データが入ったCSVファイルが出来上がりました。

次は、以前の記事「区名と行政団体コードを書き並べたCSVからJSONファイルを作成する」で作成したCSVファイルと合わせてExcelで編集して次のようにまとめます。

これを、同じく「区名と行政団体コードを書き並べたCSVからJSONファイルを作成する」で書いたスクリプトを使って、JSONファイルに変換します。

これで、区名＆人口データが入ったJSONファイルが出来上がりました。

次回はこのファイルを使って、横浜市地図を塗り分けようと思います！

それでは♪