D3.js-地理

地理空間座標は、天気や人口のデータによく使用されます。 D3.jsは、地理データ用の3つのツールを提供します-

パス-最終ピクセルを生成します。
投影-球座標をデカルト座標に変換し、
ストリーム-彼らは物事をスピードアップします。

D3.jsの地理が何であるかを学ぶ前に、次の2つの用語を理解する必要があります-

D3 Geo Pathおよび
プロジェクション

これら2つの用語について詳しく説明します。

D3 Geo Path

それは地理的経路ジェネレーターです。 GeoJSONはSVGパスデータ文字列を生成するか、Canvasへのパスをレンダリングします。パフォーマンスを向上させるために、動的またはインタラクティブな投影にはCanvasをお勧めします。 D3 Geo Path Data Generatorを生成するには、次の関数を呼び出すことができます。

d3.geo.path()

ここで、* d3.geo.path（）*パスジェネレーター関数を使用すると、Geo CoordinatesからCartesian Coordinatesへの変換に使用するマップ投影を選択できます。

たとえば、インドの地図の詳細を表示する場合、以下に示すようにパスを定義できます。

var path = d3.geo.path()
svg.append("path")
   .attr("d", path(states))

プロジェクション

投影は、球面ポリゴンジオメトリを平面ポリゴンジオメトリに変換します。 D3は、次の投影実装を提供します。

方位角-方位角投影は、球を平面に直接投影します。
コンポジット-コンポジットは、単一のディスプレイに構成される複数の投影で構成されます。
Conic -球体を円錐に投影し、円錐を平面に展開します。
Cylindrical -円柱投影は、球体を含む円柱に投影し、円柱を平面に展開します。

新しい投影を作成するには、次の関数を使用できます。

d3.geoProjection(project)

指定された生の投影プロジェクトから新しい投影を作成します。プロジェクト関数は、指定されたポイントの経度と緯度をラジアンで取得します。コードに次の投影法を適用できます。

var width = 400
var height = 400
var projection = d3.geo.orthographic()
var projections = d3.geo.equirectangular()
var project = d3.geo.gnomonic()
var p = d3.geo.mercator()
var pro = d3.geo.transverseMercator()
   .scale(100)
   .rotate([100,0,0])
   .translate([width/2, height/2])
   .clipAngle(45);

ここでは、上記の投影法のいずれかを適用できます。これらの各予測について簡単に説明しましょう。

* d3.geo.orthographic（）*-正投影は、単一の半球を表示するのに適した方位投影です。視点は無限遠です。
* d3.geo.gnomonic（）*-ノモニック投影法は、大円を直線として投影する方位角投影法です。
* d3.geo.equirectangular（）*-正距円筒法は、可能な限り単純な地理的投影法です。アイデンティティ関数。等面積でも共形でもありませんが、ラスタデータに使用される場合があります。
* d3.geo.mercator（）*-球状メルカトル図法は、タイルマッピングライブラリで一般的に使用されます。
* d3.geo.transverseMercator（）*-横メルカトル図法。

実施例

この例では、インドの地図を作成しましょう。これを行うには、次の手順に従う必要があります。

ステップ1 *-*スタイルを適用-以下のコードを使用して、マップにスタイルを追加しましょう。

<style>
   path {
      stroke: white;
      stroke-width: 0.5px;
      fill: grey;
   }

   .stateTN { fill: red; }
   .stateAP { fill: blue; }
   .stateMP{ fill: green; }
</style>

ここでは、状態TN、AP、およびMPに特定の色を適用しました。

ステップ2 *- topojsonスクリプトを含める*-TopoJSONは、以下で定義するトポロジをエンコードするGeoJSONの拡張です。

<script src = "http://d3js.org/topojson.v0.min.js"></script>

このスクリプトをコーディングに含めることができます。

ステップ3 *-*変数の定義-以下のコードを使用して、スクリプトに変数を追加します。

var width = 600;
var height = 400;
var projection = d3.geo.mercator()
   .center([78, 22])
   .scale(680)
   .translate([width/2, height/2]);

ここでは、SVGの幅は600、高さは400です。画面は2次元の空間であり、3次元のオブジェクトを表示しようとしています。したがって、* d3.geo.mercator（）*関数を使用して、土地のサイズ/形状をひどく歪めることができます。

中心は[78、22]で指定されます。これにより、経度と緯度の2要素配列（度単位）として指定された位置に投影の中心が設定され、投影が返されます。

ここでは、地図は西78度と北22度を中心にしています。

スケールは680として指定されます。これにより、投影のスケール係数が指定された値に設定されます。スケールが指定されていない場合、現在のスケール係数が返されます。デフォルトは150です。スケール係数は予測全体で一貫していないことに注意することが重要です。

ステップ4 *- SVGの追加*-次に、SVG属性を追加します。

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

ステップ5 *-*パスの作成-コードの次の部分は、新しい地理的パスジェネレーターを作成します。

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

ここでは、パスジェネレーター（d3.geo.path（））を使用して投影変数タイプ（.projection）を指定します。これは、以前に可変投影法を使用したメルカトル図法として定義されていました。

ステップ6 *-*データの生成-indiatopo.json –このファイルには非常に多くのレコードが含まれており、次の添付ファイルから簡単にダウンロードできます。

indiatopo.jsonファイルをダウンロード*

ファイルをダウンロードしたら、D3の場所を追加できます。サンプル形式を以下に示します。

{"type":"Topology","transform":{"scale":[0.002923182318231823,0.0027427542754275428],
"translate":[68.1862,8.0765]},"objects":
{"states":{"type":"GeometryCollection",
"geometries":[{"type":"MultiPolygon","id":"AP","arcs":
[[properties":{"name":"Andhra Pradesh"}},{"type":"MultiPolygon",
"id":"AR","arcs":[[properties":{"name":"Arunachal Pradesh"}},{"type":"MultiPolygon",
"id":"AS","arcs":[[Step 7 *−* Draw map *− Now, read the data from the* indiatopo.json *file and draw the map.

[source,prettyprint,notranslate]

d3.json（ "indiatopo.json"、function（error、topology）{g.selectAll（ "path"）.data（topojson.object（topology、topology.objects.states）.geometries）.enter（）.append（ "path"）.attr（ "class"、function（d）{return "state" + d.id;}）.attr（ "d"、path）}）;

Here, we will load the TopoJSON file with the coordinates for the India map (indiatopo.json). Then we declare that we are going to act on all the path elements in the graphic. It is defined as, g.selectAll(“path”). We will then pull the data that defines the countries from the TopoJSON file.

[source,prettyprint,notranslate]

geometries）.

Finally, we will add it to the data that we are going to display using the* .enter() *method and then we append that data as path elements using the* .append(“path”)* method.

D3js-geographies

D3.js-地理

D3 Geo Path

プロジェクション

実施例

目次