タグ

SVGに関するknokのブックマーク (1)

  • D3.jsで日本地図を作成しデータを反映するサンプル(コロプレス地図) | Tips Note by TAM

    前回の記事「D3.jsの使い方とグラフを作成するサンプル」に引き続き、今回もD3.jsを使用します。 今回はD3.jsを使用してブラウザ上に日地図を作成し、 CSVファイルに記載された果物の都道府県別出荷量のデータを反映してみます。 ⇒サンプルデモ(平成25年産 主要果樹都道府県別出荷量) まずは必要なデータを準備します。 [準備1] 地図データの取得(日地図の座標データ / JSONファイル) 日地図は座標データを元にSVGの要素を使用してパスを作成します。 ひとつひとつ座標データを設定するのは大変なので、フリーの地理データを使用します。 フリーの地理データは下記のサイトで取得できます。 ●Natural Earth このサイトで取得できるデータはShape形式なので、 これをブラウザ上で使用するために、Shape形式→GeoJSON→TopoJSONの順番で変換します。 GeoJ

    D3.jsで日本地図を作成しデータを反映するサンプル(コロプレス地図) | Tips Note by TAM
  • 1