地図情報をD3で使えるJSON形式に

地図情報をJSON形式にしてD3.js等で表示させるために、以下のページが参考になる。
http://ja.d3js.node.ws/blocks/mike/map/

そして、国土数値情報というサイトにデータがある。
http://nlftp.mlit.go.jp/ksj/
利用規約をよく読み、ダウンロード。

以下のページに非常に親切な解説があった。
http://blog.hitsuji.me/make-shape-file/
親切で感謝です。
こちらも参考になりました。
http://kshigeru.blogspot.jp/2013/03/d3-geojson-polygon.html

そして、以下のページは日本語にも訳されており、基本を網羅してくださっているページなので、とても大事。
http://ja.d3js.node.ws/blocks/mike/map/
勉強になります。（筆者はD3の開発者さんですね。）


で、国土地理院から.shpデータを落とし、
それを親切なサイトさんで紹介してあってインストールしたQGISにてgeoJSON形式に変換し、
terminalにてtopoJSONに変換して、表示。

が、中心座標をその県の中心座標にしないと表示が真っ白で「あれれ？」となりました。
中心座標を緯度経度で決め、表示スケールを決めてみると、無事表示されました。

よかった！

参考：QGIS入門

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

補足1：topojson -p N03_004 -o hokkaido_topo.json hokkaido.geojson
　といった形で、propertyをN03_004で市区町村データを保持してやり、-oでアウトプット。
　東京の場合は「区」のデータが抜けるので、N03_003も加えてある必要あり。
　topojson -p N03_004 -p N03_003 -o tokyo_topo.json tokyo.geojson

　複数県に渡る場合は、N03_001の県情報も加えてやる必要があるかもしれず、その場合はN03_001を加え、「d.properties.N03_001」などでアクセスすると吉。

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

補足2：geoJSONを生成する際に、「OGR error:Failed to create GeoJSON datasource:」というようなエラーが出て悩みました。
単純に、「Save as」のところで「Browse」をクリックして、保存先フォルダを選ぶ必要があっただけでした。。。こちらのページが参考になりました。感謝。

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

追記1：topoJSONに変換しても、頂点データ数が多すぎて表示が重いので、減らす方法を探すと、便利なサイトがありました！！
感激しました。。。
大感謝です。
http://www.mapshaper.org/

ここにgeoJSONやtopoJSONをアップするだけ。
そして、頂点数を減らしていくと、1.1MBだったファイルが65kBなどに。。。
すごいっす。
（私のsafariでは変換後のデータをDLできず、chromeではOKでした。）

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

追記2：command lineでtopoJSONに変換する際、ファイルサイズが大きいとrun out of memoryとなる。そこで解決策をググると、
https://github.com/mbostock/topojson/issues/71
こんなページがありました。
試してみます。。。

SVG習得開始

SVGを習得しようと思い立ちました。
ブラウザで画像を生成できる便利な代物。
昔は十分ブラウザが対応していませんでしたが、
いつのまにか、普通に使える代物になっていました。

さて、がんばります。

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

またD3.jsというライブラリも使い始めました。
かつてはRaphaelを使っていましたが、d3が熱い感じで、ちょっと試行中。

いずれにしてもSVGの理解が重要だということで。

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

フリーの日本地図データ

無料で、商用利用も可能な日本地図の白地図データがあったのでリンクメモです。

http://www.freemap.jp/japan/ja_kouiki_japan_big_scale_3.html

illustratorで各都道府県をオブジェクト化し、svg形式にして使えば、
Raphaelでいけそう。


http://www.freemap.jp/about_use_map.html
に商用利用も、使用許諾が必要ない旨も書いてあります。

素晴らしい。。

（無料版は、各都道府県の境目処理が簡易的なので、その作業は必要そうですね。。それにしてもありがたい。）

SVGの解説サイト（英語）メモ。

SVGに関する分かりやすい解説（英語）があったので、メモ。

http://www.svgbasics.com/index.html

IE9でやっとIEもまともなSVG対応をしていくようなので、
これからがSVGの本番でしょうか。。

SVGの書き方（描き方）を勉強してみた。

SVGでのラインの書き方が、W3Cのサイトに載っていた。
面白い。

http://www.w3.org/TR/SVG/paths.html#PathData

基本的に大文字と小文字は、絶対位置と相対位置の違いの様子。

Mで始点に移動。
Zが終点。

Lが線を引く。（あるパスのソースを見ていて、小文字の「l」が「|（パイプ）」に見えており、「パイプって何を意味する記号だろう。。。」と悩んでいた。。小文字のエルだった。。。）

Hがhorizontal lineすなわち水平線（横線）。
Vが垂直線。vertical line

Cがちょっとややこしいが、ベジェ曲線。Mで始点を指定し、Cでコントロールポイント（イラレでおなじみ）の位置を指定、その次のx,y座標でもう一つのコントロールポイントを指定。そして最後のx,y座標で終点を指定。その四点で、曲線が描ける。
面白い。

Sはちょっと難しくて、まだよく分かりません。どうも、先のCの二つのコントロールポイントの位置関係を反映するようで、新しくコントロールポイントを一つ指定し、終点を指定してやれば、二つ目のコントロールポイントは、先にCで指定した二つのコントロールポイントの位置関係を反映してくれる様子。（くどい書き方ですね。。）

Qは、quadradでコントロールポイント一つと、始点終点で良い様子。こっちの方が分かりやすそう。
Tは、コントロールポイントが、やはり中間地点を軸に反転したものとして反映され、終点を書けばOKという、ショートハンド（省略）記述の様子。

なるほど。

解説PDFもあった。
http://tutorial.jp/graph/svg/svgman.pdf

■以下、Raphaelで地図のSVGスケールを変えるために、本家フォーラムの関連ディスカッションURIをメモ。
http://groups.google.com/group/raphaeljs/browse_thread/thread/e1a3889a37dfeac3/e42fb35ad07fe528?lnk=gst&q=map#e42fb35ad07fe528

以下は、マップ上のオブジェクトをダブルクリックして、ajaxで他のファイルを読み込み表示させるためのメモ。
http://groups.google.com/group/raphaeljs/browse_thread/thread/8406d083c5dcab65/171a2adf124e4e05?lnk=gst&q=map#171a2adf124e4e05