地球を描画する【Bromley】 (SVG使用)

説明

D3.jsでBromleyで地球を描画するにはd3-geo-projectionプラグインと、地形のデータを扱うTopoJSONを処理するためのプラグインを利用します。なお、このサンプルではBromleyのサンプルページでの地形データを利用しています。
地形データを用意したら、scriptタグで必要なライブラリを読み込ませます。次にd3.geo.path()にprojection(d3.geo.bromley())メソッドを使って投影法を設定します。その際、scale()メソッドを使って表示サイズを調整します。
投影方法を設定したら、地球儀の枠などを表示するためのパスをappend()メソッドを使って追加します。地球儀のデータはd3.json()メソッドを使います。最初のパラメーターに地形データがあるパスを指定します。2番目のパラメーターにはデータが読み込まれた後に呼び出す関数を指定します。この関数にはエラー情報と読み込まれたデータが渡されます。読み込まれたデータをdatum()を使って設定した後にattr()メソッドを使ってパスデータとして設定します。
なお、地形データのサイズが多い場合、地形が表示されるまでに数秒かかることがあります。

サンプル [サンプルを実行する]　[サンプルをダウンロード]

HTMLソース

?
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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>D3.js サンプル</title>
<link rel="stylesheet" href="css/main.css">
<style>
svg {
border: 1px solid black;
}
.stroke {   /* 地球の外枠線 */
fill: none;
stroke: #f00;
stroke-width: 3px;
}
</style>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="http://d3js.org/d3.geo.projection.v0.min.js"></script>
<script src="http://d3js.org/topojson.v1.min.js"></script>
</head>
<body>
<h1>D3.jsサンプル</h1>
<div id="myEarth"></div>
<script src="js/sample.js"></script>
</body>
</html>

JavaScriptコード

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
var width = 700;    // SVG領域の横幅
var height = 300;   // SVG領域の縦幅
var path = d3.geo.path()
    .projection(d3.geo.bromley()    // 投影方法を指定
    .translate([width / 2, height /2])  // 表示位置を調整
    .scale(100)
);
// SVG領域のサイズを指定
var svg = d3.select("#myEarth").append("svg")
    .attr("width", width)   // 横幅を指定
    .attr("height", height);    // 縦幅を指定
svg.append("defs").append("path")   // 地球儀の外側の枠を描画
    .datum({type: "Sphere"})
    .attr("id", "sphere")
    .attr("d", path);
svg.append("use")
    .attr("class", "stroke")
    .attr("xlink:href", "#sphere")
// 地球のデータを読み込む
d3.json("data/world-50m.json", function(error, world) {
    svg.insert("path", ".graticule")
        .datum(topojson.feature(world, world.objects.land))
        .attr("d", path);   // 地形のデータを設定
    });