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