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

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

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

やっていることはカンタン。テキストラベルの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指定する色を返してくれます。

色塗り完成です♪

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

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

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

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

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

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

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

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

横浜市地図に日本語区名を表示する

さて、今日でようやく横浜市地図に区名ラベルを表示できます。以前書いた記事「横浜市地図の各区に１つだけラベル表示する」で紹介したコードを、前回の記事「2つのJSONファイルを読み込む」のコードでModifyしました。

横浜市地図の完成です♪

下のような地図が出来上がりました。画像をクリックすると、地図ページに飛びます。

コードは次の通りです。

index.html

変更点は２カ所だけです。

属性データの構造を、”id”+団体コードをキーとするHashに変換する

JSONファイルから読み込んだデータ配列は、そのままだと使いづらいので、団体コードをキーとするHashテーブル（attr => attrHash）に組み直します。

ラベルを区名に変更する

区名を貼るコードについて、d.properties.nameの箇所を、attrHash[d.properties.name].nameに書き換えます。

やっと普通の横浜市地図が描けました（笑）。

次は、横浜市の人口データの表示に進もうと思います。

それではまた♥︎

D3.jsのJSON読み込みは非同期処理

D3.jsでJSONファイルを読み込むには、

d3.js(filename)

という関数が用意されており、とても簡単に利用することができます。

しかし、２つのファイルを読み込むときは若干面倒です。２ファイル読み込みがそれぞれ独立している処理なので、両方のファイルが読み込まれるのを待ってから、main処理を開始しなければなりません。

制御用フラグを使う

２ファイル両方の読み込みが終わるのを待つ必要があります。そのため、制御用に各ファイルの読み込み完了フラグを用意しておき、ファイル読み込み完了した後でフラグを立てるようにします。そして、両方のフラグが立った時に初めてmain()を呼び出します。

こんな感じです。

index.html (scriptの一部)

main関数内でbreakしてみました。

ちょっと見づらいですが、attrとtopoの両方の変数がちゃんと見えるのを確認しました♥︎

今日はここまで。

次回は属性情報（区名）を使って、地図上のラベルをコードから名前に変えます！

それでは〜

区名の代わりに行政団体コードをラベル表示する

前々回の記事「地図に区名を表示する」で利用したindex.htmlをそのまま流用して、地図表示してみます。（読み込むTopoJSONファイルを、区名=>コードに置換したものに変えるだけです）

TopoJSONファイルの区名を”id”+団体コードに書き換えたので、地図上のラベルもコードに置き換わりました。

各区１つだけラベルを表示する

このままだと、前々回の記事と同様に同じ番号が重複表示されているので、修正します。

index.html

まず区毎にラベリングしたいので、”id”+団体コードの文字列をclass属性に追加しました(L80,86-88)。そして冒頭のスタイル指定でラベルを一旦全て非表示にしておきます(L.25)。

地図描画処理に続いてラベル追加処理を終えた後（この時点では全てのラベルはdisplay:noneのまま）、for文で各団体コードについて１つのラベルのみdisplay:blockに書き換える処理を入れました(L.100-102)。

重複してラベル表示されていた箇所が消えました♥︎

でも、このままだとラベル名が団体コードってイマイチですよね。次は、これらの団体コードを再度区名に置き換えたいと思います。それではまた！

とりあえず、ラベルを貼るソースコードを追加してみます。L78-92が追記箇所です。

index.html

前回の記事でTopoJSONを作成するときに、区名をnameプロパティに設定して書き出していました。

topojson -p name=N03_004 -p name -o yokohama_topo.json yokohama.geojson

元のGeoJSONファイルのN03_004フィールドには区名が入っていたのでした。

Safariでプロパティを確認してみます。

確かに、データ要素を覗いてみると、d.properties.nameに”青葉区”と入っています。これをラベルとして素直に出力したのが今回のコードです。実行結果は次の通り。（下の画像をクリックすると、地図ページに飛びます）

出来た・・・と思ったら、区名が重複して出力されてしまいました。島など境界線が分かれている箇所は、データ上それぞれ別要素になっているので、余計なラベルまで貼られてしまいました。

次回は、この問題を解決しようと思います。

ではではまたね

TopoJSONファイルに変換する

GeoJSONファイルをTopoJSONファイルに変換します。GeoJSONとTopoJSONの違いは何？という方は、前回ご紹介したサイト

＊D3.jsとTopoJSONで地図を作る　http://ja.d3js.node.ws/blocks/mike/map/

の”データの変換”の章に簡単に書いてあります。

さて、ターミナルを開きます。

topojson -p name=N03_004 -p name -o yokohama_topo.json yokohama.geojson

ここでは、”yokohama.geojson” というGeoJSONファイルを、”yokohama_topo.json”というTopoJSONファイルに変換しつつ、N03_004というフィールドをnameという名前に変更・付与しています。QGISで開くと分かりますが、N03_004フィールドに区名が入っているので、それをTopoJSONファイルに属性値として出力します。

TopoJSONファイルを読み込み、横浜市地図を表示する

いよいよ地図を表示します。下の画像をクリックすると、地図のページに飛びます。

ソースコードはこんな感じです。

index.html

JSONファイルを読み込む関数d3.jsonは非同期処理になります。読み込み完了したら第2引数のfunction(error,json) {…} が呼び出される仕組みなので、そのCallback関数の中にjsonファイルを使った処理、すなわち地図を描く処理を書いています。

d3.geo.mercator().center([139.59,35.45])… center()で、地図中心を経度と緯度で指定しています。経度と緯度はGoogle Mapで調べてから調整しました。

今回は、地図を表示することろまで！

それではまた〜

ちょっと前のことですが、D3.jsという素晴らしいライブラリがあるのを知りました。

http://d3js.org

カッコいいですよね〜^-^

このD3.jsを使って何か作ってみたいと思い、突然ですが横浜市Mapを描いてみました。（画像をクリックすると、地図のページに飛びます）

ただ単に書くのもツマラナイので、横浜市区の人口と、保育園の定員数で色分けしてみました。

データソースについて

地図データ

国土交通省の数値情報DLサービスから頂きました。
http://nlftp.mlit.go.jp/ksj/

人口データ

横浜市人口は、横浜市の統計ポータルサイトから頂きました。
http://www.city.yokohama.lg.jp/ex/stat/

H26.1.1時点のデータです

保育園定員数

横浜市といえば、待機児童ゼロで有名ですよね。という訳で、保育園の定員数をもってこようと思ったのですが、思いの他苦労しました。情報源は横浜市青少年局ページです。
http://www.city.yokohama.lg.jp/kodomo/unei/

保育園定員数はH26.2.1時点のもので、公立＆認可保育園の入所人数と入所可能人数を加算した値です。結構手動で触った所があるのでデータの正確性は保証しかねます。あしからず・・・

保育園は5歳までありますが、1歳毎の人口データが4歳までしかなかったので、4歳までの定員を計算しました。4-5歳の定員がまとめられている施設は、4,5歳の人数を均等割しました。

ちなみに、人口は１月１日、保育園は年度扱いなので、そういう意味での整合性まではとれていません。

地図の描き方については、後ほどアップしていきます♪

ではでは