Membuat Peta Gempa dengan p5js
Ini adalah kali kedua saya mencoba melakukan speedhack dengan menggunakan framework p5js. Agaknya p5js lumayan membantu para newbie yang ingin membuat sistem yang interaktif dengan menggunakan teknologi web atau para artis dan desainer yang ingin mengaplikasikan ide-ide kreatifnya.
Speedhack ini sejatinya diinspirasi dari gempa 1 menitan yang saya rasakan beberapa saat lalu. Saat itu, saya sedang menimang anak saya yang tak kunjung tidur dan tiba-tiba lampu gantung di ruang tamu berosilasi dengan heboh. Pengalaman gempa ini memang bukan yang pertama, tapi agaknya awareness saya akan gempa jadi lebih tinggi ketika sudah beranak seperti ini. Setelah update status di medsos, saya langsung mencoba untuk mencari info-info yang terpercaya keluaran dari BMKG.
Melihat screenshot keluaran BMKG ini, saya jadi tertarik bagaimana mereka mengolah data tersebut sehingga menjadi sebuah peta interaktif. Akhirnya saya bertolak menuju website BMKG yang (ternyata) menyediakan akses data seismik secara gratis dengan syarat harus melakukan registrasi akun di http://repogempa.bmkg.go.id/ .
Setelah masuk, kita akan diarahkan ke halaman query data seismik dengan parameter yang bisa atur sesuai keinginan kita. Kemudian akan muncul data sebagai berikut:
Kita dapat mengunduh data tersebut melalui tombol download data yang terletak di laman BMKG tersebut. Namun, data yang diunduh ternyata belum merupakan set data yang siap untuk diolah lebih lanjut. Data seismik tersebut memiliki ekstensi .txt dan tiap nilai di dalamnya dipisahkan dengan menggunakan tab. Pun kita harus menghapus beberapa bagian dalam file tersebut untuk bisa diolah lebih mudah, diantaranya adalah bagian header di awal file. Longitude dan latitude yang diberikan juga dibulatkan hingga 2 angka di belakang koma saja.
Mencoba untuk melihat sumber data lain, saya mendapatkan U.S. Geological Survey memberikan data yang lebih baik dan agaknya lebih mudah untuk diolah. Beberapa alasan diantaranya:
- Data yang diberikan sudah berformat csv (comma separated value)
- Longitude dan Latitude yang diberikan memiliki ketelitian hingga 4–7 angka di belakang koma
- Tersedia API dan dokumentasi yang cukup lengkap dan memudahkan developer untuk query data secara real-time.
- Tersedia berbagai set data seismik yang terupdate setiap 5–15 menit.
- Tersedia data gempa untuk seluruh bagian dunia
Agaknya alasan-alasan tersebut cukup untuk developer beralih menggunakan data seismik USGS ketimbang BMKG, namun saya mencoba untuk memaksimalkan data yang dimiliki BMKG dalam peta visualisasi yang akan saya buat.
Okey, setelah raw data seismik terkumpul, sekarang saatnya untuk membuat peta interaktif tersebut. Saya menggunakan Mapbox sebagai penyedia peta dunia karena free untuk digunakan secara terbatas dan dokumentasinya yang cukup mudah.
Hal pertama yang harus diperhatikan ketika membuat peta ini, adalah menyesuaikan koordinat kanvas yang digunakan dalam peta dengan satuan koordinat peta (longitude dan latitude). Untuk ini, digunakan acuan web mercator untuk melakukan konversi antara keduanya. Berikut adalah formula dari wikipedia yang digunakan untuk ukuran peta dengan koodinat origin pojok kiri atas (0,0) dan pojok kanan bawah (256, 256).
Mapbox sendiri, memiliki ukuran resolusi peta hingga (1280,1280). Hitungan ini menjadi penting untuk diperhitungakan, karena akan mempengaruhi presisi dari penempatan koordinat nantinya, pun juga cara penggambaran peta nantinya pada canvas.
Rumus tersebut akan dimanfaatkan untuk menempatkan titik-titik pusat gempa yang tertera dalam longitude dan latitude pada data BMKG yang sebelumnya telah kita unduh.
Berikutnya yang menjadi perhatian adalah bagaimana proses parsing data BMKG untuk mendapatkan nilai-nilai longitude, latitude, kedalaman gempa, dan skala gempa. Ternyata untuk data BMKG, data yang didapat dari setiap baris bisa berbeda-beda jumlahnya, terkadang 17, 18, atau 19.
Untuk parse data yang saya lakukan, masalah tersebut tidak terlalu berdampak karena data yang saya gunakan cukup memberikan nilai yang konsisten (tidak ada double tab yang menyebabkan bacaan menghasilkan null karena kosong)
Hasil untuk speedhack ini, bisa dilihat di: https://labtek-indie.github.io/map-viz-indo-gempa/. Lingkaran dengan dengan diameter lebih besar, menunjukkan magnitude/skala gempa yang lebih besar, sementara warna yang lebih gelap menunjukkan kedalaman sumber gempa yang lebih dalam.
untuk source codenya, bisa diintip di: https://github.com/labtek-indie/map-viz-indo-gempa
Yak begitulah hasil speedhack saya! meskipun sepertinya belum se-akurat data pembacaan gempa yang dimiliki BMKG. Mungkin karena penghitungan web mercator, penempatan peta pada canvas, dan resolusi tile map mapbox yang belum akur.
Project ini diselesaikan dalam waktu 2 jam. Tapi karena di template Fat-Lab ga ada 2 jam, jadi 4 jam saja ditulisnya.
