D3.js - Geografien
Geodatenkoordinaten werden häufig für Wetter- oder Bevölkerungsdaten verwendet. D3.js bietet uns drei Tools für geografische Daten -
Paths - Sie erzeugen die endgültigen Pixel.
Projections - Sie wandeln Kugelkoordinaten in kartesische Koordinaten um und
Streams - Sie beschleunigen die Dinge.
Bevor wir lernen, was Geografien in D3.js sind, sollten wir die folgenden zwei Begriffe verstehen:
- D3 Geo Path und
- Projections
Lassen Sie uns diese beiden Begriffe im Detail diskutieren.
D3 Geopfad
Es ist ein geografischer Pfadgenerator. GeoJSON generiert eine SVG-Pfaddatenzeichenfolge oder rendert den Pfad zu einem Canvas. Für dynamische oder interaktive Projektionen wird ein Canvas empfohlen, um die Leistung zu verbessern. Um einen D3-Geopfaddatengenerator zu generieren, können Sie die folgende Funktion aufrufen.
d3.geo.path()Hier das d3.geo.path() Mit der Pfadgeneratorfunktion können wir auswählen, welche Kartenprojektion für die Übersetzung von Geokoordinaten in kartesische Koordinaten verwendet werden soll.
Wenn wir beispielsweise die Kartendetails von Indien anzeigen möchten, können wir einen Pfad wie unten gezeigt definieren.
var path = d3.geo.path()
svg.append("path")
.attr("d", path(states))Projektionen
Projektionen transformieren sphärische polygonale Geometrie in planare polygonale Geometrie. D3 bietet die folgenden Projektionsimplementierungen.
Azimuthal - Azimutale Projektionen projizieren die Kugel direkt auf eine Ebene.
Composite - Composite besteht aus mehreren Projektionen, die zu einer einzigen Anzeige zusammengesetzt sind.
Conic - Projiziert die Kugel auf einen Kegel und rollt den Kegel dann auf die Ebene.
Cylindrical - Zylinderförmige Vorsprünge projizieren die Kugel auf einen umschließenden Zylinder und rollen den Zylinder dann auf die Ebene ab.
Um eine neue Projektion zu erstellen, können Sie die folgende Funktion verwenden.
d3.geoProjection(project)Aus dem angegebenen Rohprojektionsprojekt wird eine neue Projektion erstellt. Die Projektfunktion nimmt den Längen- und Breitengrad eines bestimmten Punktes im Bogenmaß an. Sie können die folgende Projektion in Ihrem Code anwenden.
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);Hier können wir eine der oben genannten Projektionen anwenden. Lassen Sie uns jede dieser Projektionen kurz diskutieren.
d3.geo.orthographic()- Die orthografische Projektion ist eine azimutale Projektion, die zur Darstellung einer einzelnen Hemisphäre geeignet ist. Der Perspektivpunkt ist unendlich.
d3.geo.gnomonic() - Die gnomonische Projektion ist eine azimutale Projektion, die große Kreise als gerade Linien projiziert.
d3.geo.equirectangular()- Das Rechteck ist die einfachste geografische Projektion. Die Identitätsfunktion. Es ist weder flächengleich noch konform, wird jedoch manchmal für Rasterdaten verwendet.
d3.geo.mercator() - Die Spherical Mercator-Projektion wird häufig von gekachelten Mapping-Bibliotheken verwendet.
d3.geo.transverseMercator() - Die Transverse Mercator-Projektion.
Arbeitsbeispiel
Lassen Sie uns in diesem Beispiel die Karte von Indien erstellen. Dazu sollten wir die folgenden Schritte einhalten.
Step 1 - - Apply styles - Fügen Sie der Karte Stile hinzu, indem Sie den folgenden Code verwenden.
<style>
path {
stroke: white;
stroke-width: 0.5px;
fill: grey;
}
.stateTN { fill: red; }
.stateAP { fill: blue; }
.stateMP{ fill: green; }
</style>Hier haben wir bestimmte Farben für den Zustand TN, AP und MP angewendet.
Step 2 - - Include topojson script - TopoJSON ist eine Erweiterung von GeoJSON, die die unten definierte Topologie codiert.
<script src = "http://d3js.org/topojson.v0.min.js"></script>Wir können dieses Skript in unsere Codierung aufnehmen.
Step 3 - - Define variables - Fügen Sie Ihrem Skript Variablen hinzu, indem Sie den folgenden Code verwenden.
var width = 600;
var height = 400;
var projection = d3.geo.mercator()
.center([78, 22])
.scale(680)
.translate([width / 2, height / 2]);Hier beträgt die SVG-Breite 600 und die Höhe 400. Der Bildschirm ist ein zweidimensionaler Raum, und wir versuchen, ein dreidimensionales Objekt darzustellen. So können wir die Landgröße / -form mit dem stark verzerrend3.geo.mercator() Funktion.
Das Zentrum wird angegeben [78, 22]. Dadurch wird das Zentrum der Projektion als Zwei-Elemente-Array aus Längen- und Breitengrad in Grad auf den angegebenen Ort gesetzt und die Projektion zurückgegeben.
Hier wurde die Karte auf 78 Grad West und 22 Grad Nord zentriert.
Die Skalierung wird als 680 angegeben. Dadurch wird der Skalierungsfaktor der Projektion auf den angegebenen Wert festgelegt. Wenn die Skalierung nicht angegeben wird, wird der aktuelle Skalierungsfaktor zurückgegeben, der standardmäßig 150 ist. Es ist wichtig zu beachten, dass die Skalierungsfaktoren nicht über die Projektionen hinweg konsistent sind.
Step 4 - - Append SVG - Fügen Sie nun die SVG-Attribute hinzu.
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height);Step 5 - - Create path - Der folgende Teil des Codes erstellt einen neuen geografischen Pfadgenerator.
var path = d3.geo.path()
.projection(projection);Hier wird der Pfadgenerator (d3.geo.path ()) verwendet, um einen Projektionstyp (.projection) anzugeben, der zuvor als Mercator-Projektion unter Verwendung der variablen Projektion definiert wurde.
Step 6 - - Generate data - indiatopo.json - Diese Datei enthält so viele Datensätze, die wir einfach aus dem folgenden Anhang herunterladen können.
Herunterladen indiatopo.json file
Nachdem die Datei heruntergeladen wurde, können wir sie unserem D3-Speicherort hinzufügen. Das Beispielformat ist unten dargestellt.
{"type":"Topology","transform":{"scale":[0.002923182318231823,0.0027427542754275428],
"translate":[68.1862,8.0765]},"objects":
{"states":{"type":"GeometryCollection",
"geometries":[{"type":"MultiPolygon","id":"AP","arcs":
[[[0,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,27,28,29,30,31,32,33,34]],[[35,36,37,38,39,40,41]],[[42]],
[[43,44,45]],[[46]],[[47]],[[48]],[[49]],[[50]],[[51]],[[52,53]],
[[54]],[[55]],[[56]],[[57,58]],[[59]],[[60]],[[61,62,63]],[[64]],
[[65]],[[66]],[[67]],[[68]],[[69]],[[-41,70]],
[[71]],[[72]],[[73]],[[74]],[[75]]],
"properties":{"name":"Andhra Pradesh"}},{"type":"MultiPolygon",
"id":"AR","arcs":[[[76,77,78,79,80,81,82]]],
"properties":{"name":"Arunachal Pradesh"}},{"type":"MultiPolygon",
"id":"AS","arcs":[[[83,84,85,86,87,88,89,90,
91,92,93,94,95,96,97,98,99,100,101,102,103]],
[[104,105,106,107]],[[108,109]]], ......
........................................Step 7 - - Draw map - Lesen Sie nun die Daten aus dem indiatopo.json Datei und zeichnen Sie die Karte.
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)
});Hier laden wir die TopoJSON-Datei mit den Koordinaten für die Indienkarte (indiatopo.json). Dann erklären wir, dass wir auf alle Pfadelemente in der Grafik einwirken werden. Es ist definiert als g.selectAll ("Pfad"). Wir werden dann die Daten, die die Länder definieren, aus der TopoJSON-Datei ziehen.
.data(topojson.object(topology, topology.objects.states)
.geometries)Schließlich werden wir es zu den Daten hinzufügen, die wir mit dem anzeigen möchten .enter() Methode und dann hängen wir diese Daten als Pfadelemente mit der .append(“path”) Methode.