Friday, December 15, 2017

Comparison Geographical Map Data Visualization with HighMaps and D3 JS Map

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 :

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>

Instalasi highmaps dan D3 JS menggunakan npm
$ npm install d3
$ npm install highmaps

Requirement

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