Agata's Blog

D3で「つまづきの石」になりがちなのが、地図の描画とフォースレイアウトです。そこで今回は、そんなD3の難関のひとつである地図を作成してみます。 大まかな手順は以下の通りです。 Step.1 GeoJSON 又は TopoJSON 形式の地図データを準備する Step.2 d3.json メソッドで、準備したJSONデータを読み込む Step.3 d3.geoPath メソッドで、SVGのPath要素として地図を描画する いろいろな本やサイトを見ていると、インターネットで公開されている地図データを GeoJSON/TopoJSON に変換する方法が紹介されていたりします。でも今回は、まずはD3で地図を作成する基本的な手順を知ってもらうために、既に GeoJSON ファイルが準備できているものとして、Step.2 から進めます。 下記のサンプルコードは、公開されている GeoJSON フ