前回、HTMLに表示する日本の地図データを含む
TopoJSONファイルが出来上がりました。

今日はこれを実際にd3.jsを使ってブラウザ表示させてみます。
今回も先人たちに習いましょう。

step-1のhtmlファイルはTopoJSONを読み込むだけの確認なので、すっとばします。
step-2のhtmlファイルを参考にして、
ちょろっと修正させてもらいましょう。

   d3.json("jpn.json", function(error, jpn) {
      svg.append("path")
            .datum(topojson.object(jpn, jpn.objects.subunits_jpn))
            .attr("d", path);
   });  

１行目は前回に作成したjpn.jsonを指定します。
functionの第２引数もjpnにしました。
３行目のdatumの第２引数は前回ポリゴンデータのGeoJSONを作る際、
subunits_jpnという名前にしていたので、
忘れずに subunits→subunits_jpnに 変更しておきます。

さぁ、htmlファイルをブラウザで表示してみましょう。

あ。ちゃんと、apacheなり、IISなり、
WEBサイトとしてローカルに配置して参照しましょう。

ローカルファイルとしてブラウザ表示すると、
クロスドメインアクセス制限により、正しく表示できません。
＃macのsafariだとローカルファイルとしても表示できましたが。。

さて、前置きが長くなりましたが、表示するとこんな感じです↓


step-2.html


確かにシミですね。。。


次回はもう少し整形してみましょう。