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

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

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

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

色塗り完成です♪

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

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

さて、今日でようやく横浜市地図に区名ラベルを表示できます。以前書いた記事「横浜市地図の各区に１つだけラベル表示する」で紹介したコードを、前回の記事「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)。

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

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

前回の振り返り：区名ラベルが重複表示される！

前回記事の地図の続きです。

前回描いた地図の問題点は、複数の区名が表示されてしまうことでした。小さい島などにも全て区名が表示されると見づらいですよね。

class属性を利用して表示/非表示をコントロールする

重複ラベル表示を避ける方法は色々なやり方があるかと思いますが、ここでは

• 区名を英数字のcity-codeに置き換える
• 各label要素のclass名にcity-codeを指定する
• class名を使い、各classにつき１つのlabel要素のみ表示する

という方法で行うことにします。class名に指定するには日本語だとHTMLの仕様上NGなので、各区に対応した英数字のcodeを割り振って活用します。

区名をcity-codeに置き換える

TopoJSONファイルの区名を、英数字からなるcodeに置換します。割り振るcodeは連番でもよいのですが、意味がある数字を探してきました。

総務省
全国地方公共団体コード http://www.soumu.go.jp/denshijiti/code.html

この団体コードに”id”というprefixを付けてcity-codeを作成しました。

replace_words.csv

置換programの都合上、エンコードはUTF-8です。

※補足
本当は置換ミスを防ぐために、被置換Wordが長い順に並べ替えた方がいいです。実際、私は南区・港南区の置換を一度ミスりました（＾＾；

次に置換プログラムを実行します。

replace_text.py (2.7x系)

前々回作成したTopoJSONファイルについて、区名=>コードに置換します。

長くなったので、今回はここで一旦切ります。

次回は、置換後のTopoJSONファイルを使って重複ラベル表示の問題を解決したいと思います。

それでは、また〜☆

とりあえず、ラベルを貼るソースコードを追加してみます。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で調べてから調整しました。

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

それではまた〜