Introduction
Dalam pembahasan kali ini saya akan coba membahas tentang perbandingan visualisasi data map, sebelum dijelaskan lebih lanjut visualisasi data map adalah proses menampilkan sebuah peta dengan menggunakan sebuah data. Berikut contoh gambarnya :
Dalam pembahasan kali ini saya akan coba membahas tentang perbandingan visualisasi data map, sebelum dijelaskan lebih lanjut visualisasi data map adalah proses menampilkan sebuah peta dengan menggunakan sebuah data. Berikut contoh gambarnya :
Map Visualization : D3 JS
Map Visualization : Highmaps
Pada
perbandingan ini saya menggunakan 2 library yang saya gunakan dalam project, 2
library tersebut adalah HighMaps dan D3 JS Map. Dalam website resminya Highmaps
adalah sebuah library yang menyediakan cara mudah untuk menampilkan map pada
project, diperkuat dengan Javascript API yang user-friendly dan biasa digunakan
untuk penjualan, hasil pemilihan atau infomasi lain yang berhubungan dengan
geografi.
Dilihat dari
website resminya, D3 JS merupakan libarary JavaScript untuk memanipulasi grafik
dengan menggunakan data, D3 JS dikhususkan untuk pembuatan web dan D3 JS
memberikan kemampuan penuh dan fleksibilitas dalam menampilkan hasil yang
diinginkan.
Saya
mengutip sebuah atikel yang ditulis oleh Ruslan Borovikov pada https://onextrapixel.com/8-javascript-libraries-for-interactive-map-visualizations/
, Dia menjelaskan Highmaps adalah open source yang ringan karena proses
rendering data yang cepat dibandingkan dengan D3 JS, dan memiliki fitur yang
interaktif. Highmaps menyediakan banyak contoh map yang ready-to-use. Dokumentasi
highmaps sangat membantu dalam memahami dan melakukan modifikasi dengan mudah
dan cepat. Berbeda dengan D3 JS yang berfokus pada penyediaan cara memanipulasi
sebuah data menjadi grafik atau map, D3 JS seperti sebuah framework yang lebih
fleksible dalam customisasi.
Saya membandingkan kedua library tersebut dengan beberapa aspek dibawah ini menggunakan tabel pembanding sebagai berikut :
Aspect
|
HighMaps
|
D3
JS
|
Support Browser
|
Firefox, Chrome, Safari, Opera, IE9+
|
Firefox, Chrome, Safari, Opera, IE9+
|
Support Mobile Layout
|
Yes
|
Yes
|
Responsive Layout
|
Yes
|
No
|
Sample Directory
|
Less
|
More
|
Support Data Format
|
CSV, JSON
|
CSV, JSON
|
Dependencies
|
JQuery
|
None
|
NPM and Bower
|
Yes
|
Yes
|
Export Feature
|
Yes
|
No
|
Support Angular
|
Yes
|
Yes
|
Flexible
|
Less
|
More
|
Code
|
JSON / API
|
JavaScript
|
Rendering Performance
|
More
|
Less
|
Installation
Instalasi Highmaps dan D3 JS bisa menggunakan 2 cara yang pertama menggunakan CDN seperti dibawah ini :
<script src="http://d3js.org/d3.v3.min.js"></script><script src="https://code.highcharts.com/maps/highmaps.js"></script>
$ npm install d3$ npm install highmaps
Untuk membuat maps membutuhkan geojson, geojson ini mirip
json. Cuma bedanya kalo di json kita bisa definisiin sendiri indexnya, kalau di
geojson indexnya sudah ditentukan, jadi kita ngga bisa buat sembarangan.
geojson bisa didapatkan dari sumber berikut ini :
D3 JS :
Highmaps :
Implementation
Dalam implementasinya saya contohkan pada Angular 1.3.13 dengan JQuery 2.2.4. Untuk Source Codenya bisa check link dibawah ini :
Conclusion
"If you want to quickly create simple charts like bar,
pie, polar etc or even time series based bar, line, area charts etc; use
Highcharts."
"If you want to design a new chart which the world has
never seen before, or a known chart but with lots of customization ( again
which the world has never seen before) use D3."
Terimakasih...
References
No comments:
Post a Comment