D3.js - Geografie
Współrzędne geoprzestrzenne są często używane do danych pogodowych lub danych dotyczących populacji. D3.js daje nam trzy narzędzia do danych geograficznych -
Paths - Produkują końcowe piksele.
Projections - Zamieniają współrzędne kuli na współrzędne kartezjańskie i
Streams - Przyspieszają.
Zanim dowiemy się, jakie są obszary geograficzne w D3.js, powinniśmy zrozumieć następujące dwa terminy -
- Ścieżka geograficzna D3 i
- Projections
Omówmy szczegółowo te dwa terminy.
Ścieżka geograficzna D3
Jest to generator ścieżek geograficznych. GeoJSON generuje ciąg danych ścieżki SVG lub renderuje ścieżkę do kanwy. Kanwa jest zalecana do dynamicznych lub interaktywnych projekcji, aby poprawić wydajność. Aby wygenerować generator danych ścieżki geograficznej D3, możesz wywołać następującą funkcję.
d3.geo.path()Tutaj d3.geo.path() Funkcja generatora ścieżek pozwala nam wybrać, której odwzorowania mapy chcemy użyć do tłumaczenia ze współrzędnych geograficznych na współrzędne kartezjańskie.
Na przykład, jeśli chcemy pokazać szczegóły mapy Indii, możemy zdefiniować ścieżkę, jak pokazano poniżej.
var path = d3.geo.path()
svg.append("path")
.attr("d", path(states))Projekcje
Rzutowania przekształcają sferyczną geometrię wielokątną w płaską geometrię wielokątną. D3 zapewnia następujące implementacje projekcji.
Azimuthal - Rzuty azymutalne rzutują kulę bezpośrednio na płaszczyznę.
Composite - Kompozyt składa się z kilku projekcji, które składają się na jeden wyświetlacz.
Conic - Rzutuje kulę na stożek, a następnie rozwija stożek na płaszczyznę.
Cylindrical - Występy cylindryczne rzutują kulę na zawierający ją cylinder, a następnie rozwijają cylinder na płaszczyznę.
Aby utworzyć nową projekcję, możesz użyć następującej funkcji.
d3.geoProjection(project)Tworzy nową projekcję z określonego surowego projektu odwzorowania. Funkcja projektu przyjmuje długość i szerokość geograficzną danego punktu w radianach. Możesz zastosować następującą projekcję w swoim kodzie.
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);Tutaj możemy zastosować dowolny z powyższych rzutów. Omówmy pokrótce każdą z tych prognoz.
d3.geo.orthographic()- Projekcja ortograficzna to projekcja azymutalna odpowiednia do wyświetlania pojedynczej półkuli; punkt perspektywy jest nieskończony.
d3.geo.gnomonic() - Projekcja gnomoniczna to projekcja azymutalna, która przedstawia wielkie koła jako linie proste.
d3.geo.equirectangular()- Równokątny to najprostsze możliwe odwzorowanie geograficzne. Funkcja tożsamości. Nie jest równy ani konformalny, ale czasami jest używany do danych rastrowych.
d3.geo.mercator() - Odwzorowanie sferyczne Mercatora jest powszechnie używane w kafelkowych bibliotekach mapowania.
d3.geo.transverseMercator() - Rzut poprzeczny Mercatora.
Przykład roboczy
W tym przykładzie stwórzmy mapę Indii. Aby to zrobić, powinniśmy postępować zgodnie z następującymi krokami.
Step 1 - Apply styles - Dodajmy style na mapie, używając poniższego kodu.
<style>
path {
stroke: white;
stroke-width: 0.5px;
fill: grey;
}
.stateTN { fill: red; }
.stateAP { fill: blue; }
.stateMP{ fill: green; }
</style>Tutaj zastosowaliśmy określone kolory dla stanu TN, AP i MP.
Step 2 - Include topojson script - TopoJSON jest rozszerzeniem GeoJSON, które koduje topologię, która jest zdefiniowana poniżej.
<script src = "http://d3js.org/topojson.v0.min.js"></script>Możemy włączyć ten skrypt do naszego kodowania.
Step 3 - Define variables - Dodaj zmienne do skryptu, używając poniższego kodu.
var width = 600;
var height = 400;
var projection = d3.geo.mercator()
.center([78, 22])
.scale(680)
.translate([width / 2, height / 2]);Tutaj szerokość SVG to 600, a wysokość 400. Ekran jest przestrzenią dwuwymiarową i próbujemy przedstawić trójwymiarowy obiekt. Tak więc możemy poważnie zniekształcić rozmiar / kształt gruntu za pomocąd3.geo.mercator() funkcjonować.
Środek jest określony [78, 22], to ustawia środek odwzorowania w określonej lokalizacji jako dwuelementowa tablica długości i szerokości geograficznej w stopniach i zwraca rzut.
Tutaj mapa została wyśrodkowana na 78 stopniach na zachód i 22 stopniach na północy.
Skala jest określona jako 680, co ustawia współczynnik skali projekcji na określoną wartość. Jeśli skala nie jest określona, zwraca bieżący współczynnik skali, który domyślnie wynosi 150. Należy zauważyć, że współczynniki skali nie są spójne we wszystkich projekcjach.
Step 4 - Append SVG - Teraz dołącz atrybuty SVG.
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height);Step 5 - Create path - Poniższa część kodu tworzy nowy generator ścieżek geograficznych.
var path = d3.geo.path()
.projection(projection);Tutaj generator ścieżki (d3.geo.path ()) służy do określenia typu rzutowania (.projection), który wcześniej został zdefiniowany jako odwzorowanie Mercatora przy użyciu zmiennej projekcji.
Step 6 - Generate data - indiatopo.json - Ten plik zawiera tak wiele rekordów, które możemy łatwo pobrać z poniższego załącznika.
Pobieranie indiatopo.json file
Po pobraniu pliku możemy dodać go do naszej lokalizacji D3. Przykładowy format pokazano poniżej.
{"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 - Teraz przeczytaj dane z pliku indiatopo.json plik i narysuj mapę.
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)
});Tutaj załadujemy plik TopoJSON ze współrzędnymi dla mapy Indii (indiatopo.json). Następnie deklarujemy, że będziemy działać na wszystkich elementach ścieżki w grafice. Jest zdefiniowany jako g.selectAll („ścieżka”). Następnie pobierzemy dane definiujące kraje z pliku TopoJSON.
.data(topojson.object(topology, topology.objects.states)
.geometries)Na koniec dodamy go do danych, które będziemy wyświetlać za pomocą .enter() a następnie dodajemy te dane jako elementy ścieżki przy użyciu .append(“path”) metoda.