完璧への地図：D3.jsを使用して美しいWebマップを作成する
公開: 2022-03-11データドリブンドキュメント（D3.js）は、「データに基づいてドキュメントを操作するためのJavaScriptライブラリ」です。 もっと簡単に言えば、D3.jsはデータ視覚化ライブラリです。 これは、データの静的な表示と、インタラクティブでアニメーション化されたデータの視覚化との間のギャップを埋めるというアイデアで、MikeBostockによって開発されました。
D3は、多くの用途を持つ強力なライブラリです。 このチュートリアルでは、D3の特に魅力的なアプリケーションの1つであるマップ作成について説明します。 有用で有益なWebマップを作成するという一般的な課題を経験し、それぞれの場合において、D3.jsが有能なJavaScript開発者に、マップの見た目と雰囲気を美しくするために必要なすべてのものを提供する方法を示します。
D3.jsは何に使用されますか？
D3.jsは、任意のデータをドキュメントオブジェクトモデル（DOM）にバインドし、JavaScript、CSS、HTML、およびSVGを使用して、そのデータによって駆動されるドキュメントに変換を適用できます。 結果は、単純なHTML出力、またはアニメーション、トランジション、インタラクションなどの動的な動作を備えたインタラクティブなSVGチャートになります。 すべてのデータ変換とレンダリングは、クライアント側のブラウザで行われます。
最も単純な場合、D3.jsを使用してDOMを操作できます。 これは、D3.jsを使用して、「HelloWorld」テキストを含む空のドキュメント本文に段落要素を追加する簡単な例です。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>D3 Hello World</title> <script src="http://d3js.org/d3.v3.min.js"></script> </head> <body> <script type="text/javascript"> d3.select("body").append("p").text("Hello World"); </script> </body> </html>ただし、D3.jsの強みは、データの視覚化機能にあります。 たとえば、チャートの作成に使用できます。 アニメーションチャートの作成に使用できます。 接続されたさまざまなチャートを統合およびアニメーション化するためにも使用できます。
Webマップと地理データの視覚化のためのD3
ただし、D3.jsは、DOMの操作だけでなく、グラフの描画にも使用できます。 D3.jsは、地理情報の処理に関して非常に強力です。 地理データの操作と表示は非常に難しい場合がありますが、D3.jsを使用して地図を作成するのは非常に簡単です。
これは、JSON互換のデータ形式で保存されたデータに基づいて世界地図を描画するD3.jsの例です。 使用する地図のサイズと地理的投影を定義し（詳細は後で説明します）、SVG要素を定義し、それをDOMに追加し、JSONを使用して地図データを読み込む必要があります。 マップのスタイル設定はCSSを介して行われます。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>D3 World Map</title> <style> path { stroke: white; stroke-width: 0.5px; fill: black; } </style> <script src="http://d3js.org/d3.v3.min.js"></script> <script src="http://d3js.org/topojson.v0.min.js"></script> </head> <body> <script type="text/javascript"> var width = 900; var height = 600; var projection = d3.geo.mercator(); var svg = d3.select("body").append("svg") .attr("width", width) .attr("height", height); var path = d3.geo.path() .projection(projection); var g = svg.append("g"); d3.json("world-110m2.json", function(error, topology) { g.selectAll("path") .data(topojson.object(topology, topology.objects.countries) .geometries) .enter() .append("path") .attr("d", path) }); </script> </body> </html>D3の地理データ
このD3.jsチュートリアルでは、マップの作成はJSON形式でフォーマットされたデータ（特にGeoJSONおよびTopoJSON仕様）で最適に機能することに注意してください。
GeoJSONは、「さまざまな地理データ構造をエンコードするためのフォーマット」です。 これは、名前/値ペアのフィーチャコレクションにグループ化された離散ジオメトリオブジェクトを表すように設計されています。
TopoJSONはGeoJSONの拡張であり、ジオメトリが「アークと呼ばれる共有線分からステッチされる」トポロジをエンコードできます。 TopoJSONは、空間情報だけでなく、地理的特徴間の関係情報を格納することにより、冗長性を排除します。 その結果、ジオメトリははるかにコンパクトになり、ジオメトリが機能を共有する場所で組み合わされます。 これにより、GeoJSONの同等のファイルよりも80％小さい一般的なTopoJSONファイルが作成されます。
したがって、たとえば、複数の国が国境を接している地図の場合、国境の共有部分は、国境の両側にある国ごとに1つずつ、2回GeoJSONに保存されます。 TopoJSONでは1行になります。
マップライブラリ：GoogleマップとLeaflet.js
現在、最も人気のあるマッピングライブラリはGoogleマップとリーフレットです。 これらは、Web上で「滑りやすい地図」をすばやく簡単に取得できるように設計されています。 「スリッピーマップ」とは、マップの周囲をズームおよびパンできる、JavaScriptを利用した最新のWebマップを指す用語です。
リーフレットは、Googleマップの優れた代替手段です。 これは、シンプルさ、パフォーマンス、使いやすさを念頭に置いて、モバイルフレンドリーなインタラクティブマップを作成するように設計されたオープンソースのJavaScriptライブラリです。 リーフレットは、インターネットで利用できるラスターベースのマップの豊富な選択肢を活用する場合に最適であり、タイルマップとそのプレゼンテーション機能を簡単に操作できます。
リーフレットは、D3.jsのデータ操作機能と組み合わせたり、ベクターベースのグラフィックスにD3.jsを利用したりすると、大成功を収めることができます。 それらを組み合わせると、両方のライブラリで最高のものが得られます。
Googleマップはオープンソースではないため、GoogleマップをD3.jsと組み合わせるのはより困難です。 GoogleマップとD3を一緒に使用することは可能ですが、これは主に、Googleマップの背景マップ上にD3.jsでデータをオーバーレイすることに限定されています。 ハッキングなしでは、より深い統合は実際には不可能です。
投影法-球形メルカトル図法を超えて
3次元の球体地球の地図を2次元の表面に投影する方法の問題は、古くて複雑な問題です。 マップに最適な投影法を選択することは、すべてのWebマップに対して行う重要な決定です。
上記の単純な世界地図D3.jsチュートリアルでは、 d3.geo.mercator()を呼び出して球形メルカトル図法座標系を使用しました。 この投影法は、Webメルカトル図法としても知られています。 この投影法は、Googleマップを導入したときにGoogleによって普及しました。 その後、他のWebサービス、つまりOpenStreetMap、Bing Maps、Here Maps、MapQuestもこの投影法を採用しました。 これにより、球形メルカトル図法はオンラインの滑りやすい地図で非常に人気のある投影法になりました。
すべてのマッピングライブラリは、すぐに使用できる球形メルカトル図法をサポートしています。 他の投影法を使用する場合は、たとえば、ある座標系から別の座標系への変換を実行できるProj4jsライブラリを使用する必要があります。 Leafletの場合、Proj4Leafletプラグインがあります。 グーグルマップの場合、まあ、何もありません。
D3.jsは、多くの異なる地理的投影のサポートが組み込まれた、まったく新しいレベルの地図作成投影をもたらします。 D3.jsは、地理的投影を完全な幾何学的変換としてモデル化します。つまり、直線が曲線に投影されると、D3.jsは構成可能な適応リサンプリングを適用して、線を細分化し、投影アーティファクトを排除します。 Extended Geographic Projections D3プラグインは、サポートされる投影法の数を40以上にしますd3.geo.projectionとd3.geo.projectionMutatorを使用して、まったく新しいカスタム投影法を作成することも可能です。
ラスターマップ
前述のように、D3.jsの主な長所の1つは、ベクターデータの操作にあります。 ラスターデータを使用するには、D3.jsとLeafletを組み合わせるオプションがあります。 ただし、d3.geo.tileを使用してD3.jsだけですべてを実行し、滑りやすいマップを作成するオプションもあります。 D3.jsだけでも、人々はラスターマップで驚くべきことをしています。
その場でのベクトル操作
従来の地図作成における最大の課題の1つは、マップの一般化です。 できるだけ詳細なジオメトリが必要ですが、そのデータは表示されたマップの縮尺に適合させる必要があります。 データ解像度が高すぎると、ダウンロード時間が長くなり、レンダリングが遅くなります。解像度が低すぎると、詳細とトポロジの関係が損なわれます。 ベクターデータを使用した滑りやすい地図は、地図の一般化で大きな問題にぶつかる可能性があります。
1つのオプションは、事前にマップの一般化を行うことです。異なる解像度で異なるデータセットを作成してから、現在選択されているスケールに適切なデータセットを表示します。 しかし、これはデータセットを増やし、データの保守を複雑にし、エラーが発生しやすくなります。 ただし、ほとんどのマッピングライブラリはこのオプションに制限されています。
より良い解決策は、マップの一般化をその場で行うことです。 そして、強力なデータ操作機能を備えたD3.jsが再び登場します。 D3.jsを使用すると、ブラウザで行を簡略化できます。
私がもっと欲しい！
D3.jsは習得が容易ではなく、学習曲線が急です。 JavaScriptオブジェクト、jQueryチェーン構文、SVGとCSS、そしてもちろんD3のAPIなど、多くのテクノロジーに精通している必要があります。 その上、最終的に素晴らしいグラフィックを作成するには、少しのデザインスキルが必要です。 幸いなことに、D3.jsには大きなコミュニティがあり、人々が掘り下げるためのリソースがたくさんあります。 D3を学ぶための素晴らしい出発点は、これらのチュートリアルです。
例を調べて学習するのが好きな場合は、MikeBostockが彼のWebページで600を超えるD3.jsの例を共有しています。 すべてのD3.jsの例には、バージョン管理用のgitリポジトリがあり、フォーク可能、クローン可能、コメント可能です。
CartoDBを使用している場合は、CartoDBがD3マップを簡単に作成できると聞いて喜ぶでしょう。
そして最後に少しおまけとして、D3ができる素晴らしいことを披露する私のお気に入りの例の1つを次に示します。
- 地球、D3.jsで作成された全世界のグローバルアニメーション3D風マップ。 Earthは、国立環境予測センター、NOAA / National Weather Serviceのスーパーコンピューターによって作成され、JSONに変換された天気予報に基づいて、世界の気象条件を視覚化したものです。 風速測定値の高さなどの表示データをカスタマイズしたり、オーバーレイデータを変更したり、地球の投影を変更したりすることもできます。