Peta Menuju Kesempurnaan: Menggunakan D3.js untuk Membuat Peta Web yang Indah

Diterbitkan: 2022-03-11

Data Driven Documents, atau D3.js, adalah “library JavaScript untuk memanipulasi dokumen berdasarkan data”. Atau lebih sederhananya, D3.js adalah perpustakaan visualisasi data. Ini dikembangkan oleh Mike Bostock dengan ide menjembatani kesenjangan antara tampilan statis data, dan visualisasi data interaktif dan animasi.

D3 adalah perpustakaan yang kuat dengan banyak kegunaan. Dalam tutorial ini, saya akan membahas satu aplikasi D3 yang sangat menarik: pembuatan peta. Kami akan membahas tantangan umum dalam membangun peta web yang berguna dan informatif, dan menunjukkan bagaimana dalam setiap kasus, D3.js memberikan semua yang dibutuhkan pengembang JavaScript yang cakap untuk membuat peta terlihat dan terasa indah.

Untuk apa D3.js digunakan?

D3.js dapat mengikat data arbitrer apa pun ke Model Objek Dokumen (DOM), dan kemudian, melalui penggunaan JavaScript, CSS, HTML, dan SVG, menerapkan transformasi ke dokumen yang didorong oleh data tersebut. Hasilnya dapat berupa keluaran HTML sederhana, atau bagan SVG interaktif dengan perilaku dinamis seperti animasi, transisi, dan interaksi. Semua transformasi dan rendering data dilakukan di sisi klien, di browser.

Paling sederhana, D3.js dapat digunakan untuk memanipulasi DOM. Berikut adalah contoh sederhana di mana D3.js digunakan untuk menambahkan elemen paragraf ke badan dokumen kosong, dengan teks “Hello World”:

 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>D3 Hello World</title> <script src="http://d3js.org/d3.v3.min.js"></script> </head> <body> <script type="text/javascript"> d3.select("body").append("p").text("Hello World"); </script> </body> </html>

Namun, kekuatan D3.js terletak pada kemampuan visualisasi datanya. Misalnya, dapat digunakan untuk membuat grafik. Ini dapat digunakan untuk membuat grafik animasi. Itu bahkan dapat digunakan untuk mengintegrasikan dan menganimasikan bagan terhubung yang berbeda.

D3 untuk Peta Web dan Visualisasi Data Geografis

Tetapi D3.js dapat digunakan lebih dari sekadar manipulasi DOM, atau untuk menggambar bagan. D3.js sangat kuat dalam menangani informasi geografis. Memanipulasi dan menyajikan data geografis bisa sangat rumit, tetapi membuat peta dengan D3.js cukup sederhana.

Berikut adalah contoh D3.js yang akan menggambar peta dunia berdasarkan data yang disimpan dalam format data yang kompatibel dengan JSON. Anda hanya perlu menentukan ukuran peta dan proyeksi geografis yang akan digunakan (lebih lanjut tentang itu nanti), menentukan elemen SVG, menambahkannya ke DOM, dan memuat data peta menggunakan JSON. Penataan peta dilakukan melalui CSS.

 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>D3 World Map</title> <style> path { stroke: white; stroke-width: 0.5px; fill: black; } </style> <script src="http://d3js.org/d3.v3.min.js"></script> <script src="http://d3js.org/topojson.v0.min.js"></script> </head> <body> <script type="text/javascript"> 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) }); </script> </body> </html>

Terkait: Menuju Grafik D3.js yang Dapat Diperbarui

Data Geografis untuk D3

Untuk tutorial D3.js ini, perlu diingat bahwa pembuatan peta berfungsi paling baik dengan data yang diformat dalam format JSON, khususnya spesifikasi GeoJSON dan TopoJSON.

GeoJSON adalah "format untuk pengkodean berbagai struktur data geografis". Ini dirancang untuk mewakili objek geometri diskrit yang dikelompokkan ke dalam kumpulan fitur pasangan nama/nilai.

TopoJSON adalah perpanjangan dari GeoJSON, yang dapat mengkodekan topologi di mana geometri "dijahit bersama dari segmen garis bersama yang disebut busur". TopoJSON menghilangkan redundansi dengan menyimpan informasi relasional antara fitur geografis, bukan hanya informasi spasial. Akibatnya, geometri jauh lebih kompak dan digabungkan di mana geometri berbagi fitur. Ini menghasilkan file TopoJSON tipikal 80% lebih kecil daripada yang setara dengan GeoJSON.

Jadi, misalnya, diberikan peta dengan beberapa negara yang berbatasan satu sama lain, bagian perbatasan yang dibagikan akan disimpan dua kali di GeoJSON, satu kali untuk setiap negara di kedua sisi perbatasan. Di TopoJSON, itu hanya satu baris.

Pustaka Peta: Google Maps dan Leaflet.js

Saat ini, perpustakaan pemetaan yang paling populer adalah Google Maps dan Leaflet. Mereka dirancang untuk mendapatkan "peta licin" di web dengan cepat dan mudah. “Peta licin” adalah istilah yang mengacu pada peta web modern yang didukung JavaScript yang memungkinkan memperbesar dan menggeser di sekitar peta.

Leaflet adalah alternatif yang bagus untuk Google Maps. Ini adalah pustaka JavaScript open source yang dirancang untuk membuat peta interaktif ramah seluler, dengan mempertimbangkan kesederhanaan, kinerja, dan kegunaan. Leaflet adalah yang terbaik saat memanfaatkan banyak pilihan peta berbasis raster yang tersedia di internet, dan menghadirkan kesederhanaan bekerja dengan peta bersusun dan kemampuan presentasinya.

Leaflet dapat digunakan dengan sangat sukses bila dikombinasikan dengan fitur manipulasi data D3.js, dan untuk memanfaatkan D3.js untuk grafik berbasis vektor. Menggabungkannya bersama-sama menghasilkan yang terbaik di kedua perpustakaan.

Google Maps lebih sulit digabungkan dengan D3.js, karena Google Maps bukan open source. Dimungkinkan untuk menggunakan Google Maps dan D3 bersama-sama, tetapi ini sebagian besar terbatas pada overlay data dengan D3.js di atas peta latar belakang Google Maps. Integrasi yang lebih dalam tidak mungkin dilakukan, tanpa peretasan.

Proyeksi - Beyond Spherical Mercator

Pertanyaan tentang bagaimana memproyeksikan peta Bumi bulat 3 dimensi ke permukaan 2 dimensi adalah masalah lama dan kompleks. Memilih proyeksi terbaik untuk peta adalah keputusan penting yang harus dibuat untuk setiap peta web.

Dalam tutorial D3.js peta dunia sederhana kami di atas, kami menggunakan sistem koordinat proyeksi Spherical Mercator dengan memanggil d3.geo.mercator() . Proyeksi ini juga dikenal sebagai Web Mercator. Proyeksi ini dipopulerkan oleh Google ketika mereka memperkenalkan Google Maps. Kemudian, layanan web lain juga mengadopsi proyeksi tersebut, yaitu OpenStreetMap, Bing Maps, Here Maps dan MapQuest. Ini telah membuat Spherical Mercator menjadi proyeksi yang sangat populer untuk peta slippy online.

Semua pustaka pemetaan mendukung proyeksi Spherical Mercator di luar kotak. Jika Anda ingin menggunakan proyeksi lain, Anda perlu menggunakan, misalnya, perpustakaan Proj4js, yang dapat melakukan transformasi apa pun dari satu sistem koordinat ke sistem koordinat lainnya. Dalam kasus Leaflet, ada plugin Proj4Leaflet. Dalam kasus Google Maps, tidak ada apa-apa.

D3.js membawa proyeksi kartografi ke tingkat yang sama sekali baru dengan dukungan bawaan untuk banyak proyeksi geografis yang berbeda. D3.js memodelkan proyeksi geografis sebagai transformasi geometris penuh, yang berarti bahwa ketika garis lurus diproyeksikan ke kurva, D3.js menerapkan resampling adaptif yang dapat dikonfigurasi untuk membagi garis dan menghilangkan artefak proyeksi. Plugin Extended Geographic Projections D3 membawa jumlah proyeksi yang didukung menjadi lebih dari 40. Bahkan dimungkinkan untuk membuat proyeksi kustom baru menggunakan d3.geo.projection dan d3.geo.projectionMutator .

Peta Raster

Seperti disebutkan sebelumnya, salah satu kekuatan utama D3.js adalah bekerja dengan data vektor. Untuk menggunakan data raster ada pilihan untuk menggabungkan D3.js dengan Leaflet. Namun ada juga opsi untuk melakukan semuanya hanya dengan D3.js menggunakan d3.geo.tile untuk membuat peta yang licin. Bahkan hanya dengan D3.js saja, orang-orang melakukan hal-hal menakjubkan dengan peta raster.

Manipulasi Vektor dengan Cepat

Salah satu tantangan terbesar dalam kartografi klasik adalah generalisasi peta. Anda ingin memiliki geometri sedetail mungkin, tetapi data tersebut perlu beradaptasi dengan skala peta yang ditampilkan. Memiliki resolusi data yang terlalu tinggi meningkatkan waktu pengunduhan dan memperlambat rendering, sementara resolusi yang terlalu rendah merusak detail dan hubungan topologi. Peta yang licin menggunakan data vektor dapat menjadi masalah besar dengan generalisasi peta.

Salah satu opsi adalah melakukan generalisasi peta sebelumnya: memiliki kumpulan data yang berbeda dalam resolusi yang berbeda, dan kemudian menampilkan kumpulan data yang sesuai untuk skala yang dipilih saat ini. Tetapi ini melipatgandakan kumpulan data, memperumit pemeliharaan data, dan rentan terhadap kesalahan. Namun sebagian besar perpustakaan pemetaan terbatas pada opsi ini.

Solusi yang lebih baik adalah melakukan generalisasi peta dengan cepat. Dan inilah D3.js lagi, dengan fitur manipulasi data yang kuat. D3.js memungkinkan penyederhanaan baris dilakukan di browser.

Saya ingin lebih!

D3.js tidak mudah dikuasai dan memiliki kurva belajar yang curam. Perlu untuk mengenal banyak teknologi, yaitu objek JavaScript, sintaks rantai jQuery, SVG dan CSS, dan tentu saja API D3. Selain itu, seseorang perlu memiliki sedikit keterampilan desain untuk membuat grafik yang bagus pada akhirnya. Untungnya, D3.js memiliki komunitas yang besar, dan ada banyak sumber daya untuk digali orang. Titik awal yang bagus untuk belajar D3 adalah tutorial ini.

Jika Anda suka belajar dengan memeriksa contoh, Mike Bostock telah membagikan lebih dari 600 contoh D3.js di halaman webnya. Semua contoh D3.js memiliki repositori git untuk kontrol versi, dan dapat di-fork, dapat dikloning, dan dikomentari.

Jika Anda menggunakan CartoDB, Anda akan senang mendengar bahwa CartoDB membuat peta D3 menjadi mudah.

Dan sebagai bonus kecil di akhir, inilah salah satu contoh favorit saya yang memamerkan hal-hal menakjubkan yang mampu dilakukan D3:

bumi, peta angin 3D animasi global dari seluruh dunia yang dibuat dengan D3.js. Earth adalah visualisasi kondisi cuaca global, berdasarkan prakiraan cuaca yang dibuat oleh superkomputer di National Centers for Environmental Prediction, NOAA / National Weather Service dan dikonversi ke JSON. Anda dapat menyesuaikan data yang ditampilkan seperti ketinggian untuk pembacaan kecepatan angin, mengubah data overlay, dan bahkan mengubah proyeksi Bumi.

Terkait: Survei Alat Pemetaan Online Terbaik untuk Pengembang Web: Peta Jalan Menuju Peta Jalan