HTML D3.js Globe

2020-07-132020
53.1% (194.6/366)
July
40.7% (12.6/31)
Week 29
8.9% (0.6/7)
Day 13 Mon
62.4% (14.9/24)

訪問者

total: 6368
today: 3
yesterday: 2
now: 10

↑

更新

MenuBar

データの準備
正距円筒図法で世界地図を描く
擬似的な地球儀を作る
projection を切り替える
衛星軌道から見下ろしたようなアニメーションを作る

データの準備 †

地球儀を作る
例によって Natural Earth ( http://www.naturalearthdata.com/downloads/ ) よりデータを取得する

さすがに 1:10m の地球儀だと、うちのオンボロ MacBook? だとグリグリ動かないので、1:110m の地図を使う

$ ogr2ogr -f GeoJSON land.json 110m_cultural/ne_110m_admin_0_countries.shp
$ ogr2ogr -f GeoJSON river.json 110m_physical/ne_110m_rivers_lake_centerlines.shp
$ ogr2ogr -f GeoJSON lake.json 110m_physical/ne_110m_lakes.shp
$ topojson -o world.json land.json river.json lake.json
quantization: bounds -180 -85.60903777459767 180 83.64512999999998 (spherical)
quantization: maximum error 2.181km (0.0196°)
prune: retained 689 / 689 arcs (100%)

↑

正距円筒図法で世界地図を描く †

https://github.com/kagyuu/D3JSExam/blob/master/D3JS-map3.html

<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="utf-8">

    <title>D3 JP Map</title>
    <style type="text/css">
        .land {
            fill : lime;
            stroke : none;
        }
        .land-boundary {
            fill: none;
            stroke: white;
            stroke-dasharray: 2,2;
            stroke-linejoin: round;
        }
        .land-sea-boundary {
            fill: none;
            stroke: gray;
            stroke-width : 0.3;
        }
        .river {
            fill: none;
            stroke: blue;
            stroke-width : 0.3;
        }
        .lake {
            fill: blue;
            stroke: none;
        }
        .graticule {
            fill: none;
            stroke: #777;
            stroke-width: .5px;
            stroke-opacity: .5;
        }
    </style>
    <script type="text/javascript" src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
    <script type="text/javascript" src="https://d3js.org/topojson.v1.min.js" charset="utf-8"></script>
</head>

<body>
    <div id="unitName" class="hidden"></div><script type="text/javascript">
        var width = 640;
        var height = 320;

        var svg = d3.select("body").append("svg")
                .attr("width", width)
                .attr("height", height);

        svg.append("rect").attr({x:0, y:0, width:width, height:height, stroke:"black", fill:"lavender"});
        var projection = d3.geo.equirectangular()
                .scale(110)
                .center([0, 0])
                .translate([width / 2, height / 2]);

        var path = d3.geo.path()
                .projection(projection);
                
        var graticule = d3.geo.graticule();

        //var url = "index.php?plugin=attach&pcmd=open&file=world.json&refer=HTML%20D3.js%20Globe";
        var url = "world.json";

        d3.json(url, function(error, data){

            var land = topojson.feature(data, data.objects.land);
            var river = topojson.feature(data, data.objects.river);
            var lake = topojson.feature(data, data.objects.lake);

            // 経線、緯線
            svg.append("path")
                .datum(graticule)
                .attr("class", "graticule")
                .attr("d", path);

            // 国
            svg.selectAll(".lands")
                .data(land.features)
                .enter()
                .append("path")
                .attr("class", "land")
                .attr("d", path);

            // 国境 (他のポリゴンと共有)
            svg.append("path")
                .datum(topojson.mesh(data, data.objects.land, function(a, b) { return a !== b; }))
                .attr("d", path)
                .attr("class", "land-boundary");

            // 海岸 (他のポリゴンと共有しない)
            svg.append("path")
                .datum(topojson.mesh(data, data.objects.land, function(a, b) { return a === b; }))
                .attr("d", path)
                .attr("class", "land-sea-boundary");


            // 河川
            svg.selectAll(".river")
                .data(river.features)
                .enter()
                .append("path")
                .attr("class", "river")
                .attr("d", path);


            // 湖沼
            svg.selectAll(".lake")
                .data(lake.features)
                .enter()
                .append("path")
                .attr("class", "lake")
                .attr("d", path);

        }); // end of d3.json
    </script>
</body>
</html>

これは、HTML D3.js Geo でやったのと同じ

↑

擬似的な地球儀を作る †

https://github.com/kagyuu/D3JSExam/blob/master/D3JS-map4.html

基本的に、平面の地図と同じ。projection に、d3.geo.orthograpihc() を使うだけ

背景をグラデーションにすると立体っぽく見える

背景は javascript ではなく直接 tag で書いても良かった

<svg>
  <defs>
    <linearGradient id="g1" x1="0" y1="0" x2="1" y2="1">
      <stop offset="0.0" stop-color="blue"/>
      <stop offset="1.0" stop-color="darkblue"/>
    </linearGradiane>
  </defs>
</svg>

球の形状は　{type: "Sphere"} を path に食わせると作られる
```
svg.append("path").datum({type: "Sphere"}).attr("d",path)
```

回転
1. projection に、回転を定義して、投影+回転が行われるようにする
```
projection.rotate([λ, Φ, γ]);
```
  - λ : 経線方向の回転、Φ 緯度線方向の回転、γ ひねり方向の回転
  - http://bl.ocks.org/mbostock/4282586
2. すると、path = d3.geo.path().projection(rotate) の振る舞いが変わる
3. すべてのノードに対して振る舞いの変わった path を再適用する
```
svg.selectAll("path").attr("d", path);
```
  - ここで、d 要素 (SVG の PATH) がないという警告がブラウザのコンソールに出るが、無視する。たまたま現在の視点から形のない <path> になっているだけで、次の回転で形ができるかもしれない。
  - svg.selectAll("path[d]") とかやると、視点から見て地球の裏側にって戻ってくると形が崩れる
地図上に図形を書く
- 地図情報と同様に GeoJSON 形式で、曲線やポリゴンを定義すればいい
```
{
  "type" : "Feature".
  "geometry" : {
    "type" : "LineString",
    "coordinates" : [[lon,lat],[lon,lat],[lon,lat],...]
 }
}
```
- http://www.geojson.org/
- ここに登場している d3.geo.graticule (経線・緯線) は、GeoJSON を作る function
- d3.geo.circle() を使えば、地図上で円になる GeoJSON をつくることができる
- d3.geo.centroid(area) は、地図上のポリゴンの重心点を求めることができる。国名を領域の真ん中らへんに書きたいときなどに使う

↑

projection を切り替える †

回転の応用。球に地図を投影する path() と平面に投影する path2() を交互に SVG の全 <path> に適用しているだけ
1990 年代の CG みたいで懐かしい

https://github.com/kagyuu/D3JSExam/blob/master/D3JS-map5.html

↑

衛星軌道から見下ろしたようなアニメーションを作る †