LATEST ENTRIES
CATEGORIES
ARCHIVES
SPONSORED LINK
MOBILE
qrcode
LINKS
PROFILE
OTHERS

08
--
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
--
>>
<<
--

Agata's Blog

MATLABやPythonとともにD3.jsを使ってデータ解析とデータビジュアライゼーションに挑戦する某エンジニアのBlog
<< D3を使ってデータの可視化をするうえでの小ワザ | main |
D3.js v4 で世界地図を描く方法
0

    D3で「つまづきの石」になりがちなのが、地図の描画とフォースレイアウトです。そこで今回は、そんなD3の難関のひとつである地図を作成してみます。

     

    大まかな手順は以下の通りです。

     

    Step.1  GeoJSON 又は TopoJSON 形式の地図データを準備する

    Step.2  d3.json メソッドで、準備したJSONデータを読み込む

    Step.3  d3.geoPath メソッドで、SVGのPath要素として地図を描画する

     

    いろいろな本やサイトを見ていると、インターネットで公開されている地図データを GeoJSON/TopoJSON に変換する方法が紹介されていたりします。でも今回は、まずはD3で地図を作成する基本的な手順を知ってもらうために、既に GeoJSON ファイルが準備できているものとして、Step.2 から進めます。

     

    下記のサンプルコードは、公開されている GeoJSON ファイルをインターネット上から読み込んで、メルカトール図法の世界地図を作成するものです。JavaScriptソースコードの23行名以降が Step.2に、また13~17行目と25行目が Step.3 に、それぞれ対応しています。

     

    ちなみに D3 v3からv4へのバージョンアップに伴い、関連するメソッドが以下のように変化しているので、これまでv3を使っていたかたは注意が必要です。

     

    • d3.geo.path() ⇒ d3.geoPath()
    • d3.geo.mercator() ⇒ d3.geoMercator()

     

     

    過去の関連記事

    D3 v4 を使って地震データの一覧表を作成する

    D3 v4で「レ・ミゼラブル」の人物関係を可視化

    過去30日間に世界で発生した地震を可視化する その2

    過去30日間に世界で発生した地震を可視化する その1

     

    JUGEMテーマ:JavaScript

    このエントリーをはてなブックマークに追加
    | D3.js | 19:51 | comments(0) | - | - |
    スポンサーリンク