D3.js - Geografi
Koordinat geospasial sering digunakan untuk data cuaca atau populasi. D3.js memberi kita tiga alat untuk data geografis -
Paths - Mereka menghasilkan piksel akhir.
Projections - Mereka mengubah koordinat bola menjadi koordinat Cartesian dan
Streams - Mereka mempercepat.
Sebelum mempelajari apa itu geografi di D3.js, kita harus memahami dua istilah berikut -
- D3 Geo Path dan
- Projections
Mari kita bahas kedua istilah ini secara rinci.
D3 Geo Path
Ini adalah generator jalur geografis. GeoJSON menghasilkan string data jalur SVG atau merender jalur ke Canvas. Canvas direkomendasikan untuk proyeksi dinamis atau interaktif guna meningkatkan performa. Untuk membuat D3 Geo Path Data Generator, Anda dapat memanggil fungsi berikut.
d3.geo.path()Di sini d3.geo.path() Fungsi generator jalur memungkinkan kita untuk memilih Proyeksi Peta mana yang ingin kita gunakan untuk terjemahan dari Koordinat Geo ke Koordinat Kartesius.
Misalnya, jika kita ingin menampilkan detail peta India, kita dapat menentukan jalur seperti yang ditunjukkan di bawah ini.
var path = d3.geo.path()
svg.append("path")
.attr("d", path(states))Proyeksi
Proyeksi mengubah geometri poligonal bola menjadi geometri poligonal planar. D3 menyediakan implementasi proyeksi berikut.
Azimuthal - Proyeksi Azimuthal memproyeksikan bola langsung ke bidang.
Composite - Komposit terdiri dari beberapa proyeksi yang disusun menjadi satu tampilan.
Conic - Memproyeksikan bola ke atas kerucut lalu membuka gulungannya ke pesawat.
Cylindrical - Proyeksi silinder memproyeksikan bola ke silinder penampung, lalu membuka gulungan silinder ke bidang.
Untuk membuat proyeksi baru, Anda dapat menggunakan fungsi berikut.
d3.geoProjection(project)Ini membangun proyeksi baru dari proyek proyeksi mentah yang ditentukan. Fungsi proyek mengambil bujur dan lintang dari suatu titik dalam radian. Anda dapat menerapkan proyeksi berikut dalam kode Anda.
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);Di sini, kita dapat menerapkan salah satu proyeksi di atas. Mari kita bahas masing-masing proyeksi ini secara singkat.
d3.geo.orthographic()- Proyeksi ortografi adalah proyeksi azimut yang cocok untuk menampilkan belahan bumi tunggal; titik perspektif berada pada tak terhingga.
d3.geo.gnomonic() - Proyeksi gnomonik adalah proyeksi azimut yang memproyeksikan lingkaran besar sebagai garis lurus.
d3.geo.equirectangular()- Persegi panjang adalah proyeksi geografis yang paling sederhana. Fungsi identitas. Ini bukan area yang sama atau konformal, tetapi terkadang digunakan untuk data raster.
d3.geo.mercator() - Proyeksi Spherical Mercator biasanya digunakan oleh perpustakaan pemetaan ubin.
d3.geo.transverseMercator() - Proyeksi Transverse Mercator.
Contoh Kerja
Mari kita buat peta India dalam contoh ini. Untuk melakukan ini, kita harus mengikuti langkah-langkah berikut.
Step 1 - Apply styles - Mari kita tambahkan gaya di peta menggunakan kode di bawah ini.
<style>
path {
stroke: white;
stroke-width: 0.5px;
fill: grey;
}
.stateTN { fill: red; }
.stateAP { fill: blue; }
.stateMP{ fill: green; }
</style>Di sini, kami telah menerapkan warna tertentu untuk TN, AP dan MP negara.
Step 2 - Include topojson script - TopoJSON adalah perpanjangan dari GeoJSON yang mengkodekan topologi, yang didefinisikan di bawah ini.
<script src = "http://d3js.org/topojson.v0.min.js"></script>Kami dapat memasukkan skrip ini dalam pengkodean kami.
Step 3 - Define variables - Tambahkan variabel dalam skrip Anda, menggunakan kode di bawah ini.
var width = 600;
var height = 400;
var projection = d3.geo.mercator()
.center([78, 22])
.scale(680)
.translate([width / 2, height / 2]);Di sini, lebar SVG adalah 600 dan tinggi 400. Layar adalah ruang dua dimensi dan kami mencoba menampilkan objek tiga dimensi. Jadi, dengan sedih kita dapat mengubah ukuran / bentuk lahan dengan menggunakand3.geo.mercator() fungsi.
Pusat ditentukan [78, 22], ini menetapkan pusat proyeksi ke lokasi yang ditentukan sebagai larik dua elemen bujur dan lintang dalam derajat dan mengembalikan proyeksi.
Di sini, peta dipusatkan di 78 derajat Barat dan 22 derajat Utara.
Skala ditentukan sebagai 680, ini menetapkan faktor skala proyeksi ke nilai yang ditentukan. Jika skala tidak ditentukan, ini mengembalikan faktor skala saat ini, yang defaultnya ke 150. Penting untuk dicatat bahwa faktor skala tidak konsisten di seluruh proyeksi.
Step 4 - Append SVG - Sekarang, tambahkan atribut SVG.
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height);Step 5 - Create path - Bagian kode berikut membuat generator jalur geografis baru.
var path = d3.geo.path()
.projection(projection);Di sini, generator jalur (d3.geo.path ()) digunakan untuk menentukan jenis proyeksi (.projection), yang didefinisikan sebelumnya sebagai proyeksi Mercator menggunakan proyeksi variabel.
Step 6 - Generate data - indiatopo.json - File ini mengandung banyak sekali record yang dapat dengan mudah kita download dari lampiran berikut.
Unduh indiatopo.json file
Setelah file diunduh, kita dapat menambahkannya ke lokasi D3 kita. Format contoh ditunjukkan di bawah ini.
{"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 - Sekarang, baca data dari indiatopo.json mengajukan dan menggambar peta.
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)
});Di sini, kami akan memuat file TopoJSON dengan koordinat peta India (indiatopo.json). Kemudian kami menyatakan bahwa kami akan bertindak pada semua elemen jalur dalam grafik. Ini didefinisikan sebagai, g.selectAll ("path"). Kami kemudian akan menarik data yang menentukan negara dari file TopoJSON.
.data(topojson.object(topology, topology.objects.states)
.geometries)Terakhir, kami akan menambahkannya ke data yang akan kami tampilkan menggunakan .enter() metode dan kemudian kami menambahkan data itu sebagai elemen jalur menggunakan .append(“path”) metode.