T1 672010033 Full text

2

1. Pendahuluan

Perkembangan teknik visualisasi data semakin berkembang mulai dari yang sederhana sampai yang kompleks. Heatmap merupakan salah satu teknologi visualisasi yang mempresentasikan data menggunakan gradien warna. Warna yang biasa digunakan adalah merah, kuning, hijau, dan biru. Warna-warna tersebut mencerminkan banyak data dari yang terbanyak sampai paling sedikit dengan urutan merah ke kuning ke hijau ke biru. Heatmap bisa digunakan untuk visualisasi data yang berbentuk 2-D dan 3-D.

Heatmap 2-D digunakan untuk membuat grafik berbentuk tabel untuk menyajikan data dalam baris dan kolom secara simultan. Selain berbentuk grafik heatmap 2-D juga digunakan untuk membuat simulasi persebaran data. Heatmap 3D digunakan untuk membuat grafik 3-D. Heatmap 3-D juga bisa digunakan untuk membuat simulasi tekanan gelombang dan bisa juga digunakan untuk membuat surfaceplot.

Heatmap juga bisa digunakan untuk mengelompokkan data berdasarkan jumlah atau berdasarkan kerapatan dari kumpulan data. Kelebihan dari heatmap adalah heatmap dapat mengelompokkan data secara otomatis dari jumlah terbanyak sampai jumlah paling sedikit. Heatmap juga digunakan untuk mengoptimalkan kinerja iklan pada sebuah website dengan cara mendeteksi klik terbanyak pada sebuah halaman web [1].

Pengembang sering kesulitan bagaimana mereka dapat mempresentasikan data yang besar dalam peta. Perkembangan teknologi web browser yang terus meningkat mempengaruhi jumlah marker yang bisa ditampilkan oleh Maps API, akan tetapi kepadatan marker yang berlebihan bisa membuat pengguna binggung. Jadi alternatifnya adalah menggunakan heatmap dan memungkinkan browser mengkorversi heatmap menggunakan Maps API dengan membuat heatmap layer baru. Maps API yang akan menentukan gradien warna, intensitas, dan perilaku heatmap ketika peta diperbesar [2][3].

Rumusan masalah dalam penelitian ini adalah bagaimana mengimplementasikan heatmap untuk menggambarkan pengelompokan data UKM di Salatiga. Pada penelitian ini heatmap digunakan sebagai media memberikan informasi persebaran UKM di Salatiga. Kelebihan heatmap bisa dilihat pada penelitian ini saat melakukan zoom in peta, heatmap akan semakin terpecah menjadi beberapa bagian, berubah bentuk serta perubahan intensitas warna kemudian saat melakukan zoomout maka heatmap akan menyatu kembali, berubah bentuk menjadi lebih padat serta perubahan intensitas warna menjadi lebih padat. Penggunaan heatmap ini diharapkan mampu memberikan informasi persebaran data UKM yang sudah dikelompokan berdasarkan kategori dan wilayah.

2. Tinjauan Pustaka

3

mevisualisasikan data terdistribusi. Data terdistribusi adalah kumpulan data yang digunakan bersama-sama, dan didistribusikan melalui suatu jaringan komputer. Teknologi heatmap pada penelitian ini digunakan untuk mevisualisasikan data terdistribusi agar lebih mudah dibaca dan lebih menarik. Dapat juga mempermudah pengguna dalam mencari data dalam database XML, melihat tren yang ada di masyarakat, atau mengambil kesimpulan dan/atau keputusan manajerial[4].

Pada penelitian yang mengimplementasikan teknologi heatmap sebagai alat untuk merekam posisi click pada suatu halaman website dan mencari posisi dimana click terbanyak yang terekam oleh heatmap. Data posisi akan digunakan untuk menentukan peletakan iklan supaya hasil yang didapat maksimal. Heatmap juga digunakan untuk menganalisis area rujukan untuk menu hot topik atau topik terhangat untuk mengoptimalkan kinerja website[1].

Penelitian sebelumnya yang juga membahas heatmap adalah penelitian yang memanfaatkan heatmap untuk merekam perilaku user dan aktifitas yang berkaitan dengan interface website tanpa menggunakan hardware khusus atau software yang mahal[5]. Pada penelitian tersebut heatmap digunakan untuk menampilkan data klik yang direkam dari sebuah website untuk menganalisa perilaku user yang mengunjungi website tersebut sehingga bisa disimpulkan user interface yang cocok untuk website tersebut.

Heatmap merupakan representasi grafik dari data yang berisi matrik yang divisualisasikan menggunakan warna. Gradien warna default heatmap adalah merah, kuning, hijau, dan biru. Dari keempat warna tersebut akan ditemukan warna dari percampuran dua warna sehingga menghasilkan warna baru. Menurut Tabel 1 kepadatan titik 80 – 100% akan divisualisasikan menggunakan warna merah. Kepadatan titik 70 – 80% akan divisualisasikan menggunakan warna coklat, warna coklat disini dihasilkan dari pencampuran warna merah dan kuning. Kepadatan titik 60 – 70% akan divisualisasikan dengan warna kuning. Kepadatan titik 50 – 60% akan divisualisasikan dengan warna hijau. Kepadatan titik 40 – 50% akan divisualisasikan dengan warna biru muda dan dibawah dari 40% akan divisualisasikan dengan warna biru. Semua warna tersebut bisa jadi tidak terlihat pada heatmap yang muncul karena terpengaruh warna yang lebih dominan. Untuk lebih jelas bisa dilihat pada Gambar 1.

Tabel 1 Warna yang merepresentasikan kepadatan titik [1]

Warna Kepadatan titik

Merah 80 – 100%

Coklat 70 – 80%

Kuning 60 – 70%

Hijau 50 – 60%

Biru muda 40 – 50%

4

100 80 70 60 50 40

Gambar 1 Jajaran warna yang digunakan Heatmap [1]

Satu titik heatmap memiliki koordinat X dan Y dalam kasus ini Longitude dan Latitude dari peta. Sebenarnya satu titik memiliki semua elemen warna heatmap. Bisa dilihat pada Gambar 2 dalam 1 titik heatmap memiliki semua elemen warna heatmap dari warna paling panas sampai warna paling dingin. Warna panas berada dititik tengah dan semakin menjauhi titik tengah warna berubah menjadi semakin dingin.

Gambar 2 Contoh simpel 1 titik Heatmap [5]

5

3. Perancangan Sistem

Metode pengembangan sistem yang digunakan dalam merancang dan membangun aplikasi pemetaan persebaran UKM yang memproduksi makanan dan minuman di Salatiga, menggunakan heatmap adalah Modified Waterfall Model. Metode ini tidak jauh beda dari waterfall model karena masih menggunakan tahapan-tahapan dari waterfall model. Kebutuhan untuk proses yang dibentuk di dalam pengembangan Web menggunakan model air terjun yang dimodifikasi (modified waterfall) dengan “pusaran air” (whirlpools) bagi pemula dalam menggembangkan web[6]. Bagan modified waterfall model bisa dilihat pada gambar 3.

Gambar 3 Modified Waterfall Model[6]

Tahapan pertama yang dilakukan adalah requirments definition (analisis dan definisi persyaratan), yaitu mengumpulkan kebutuhan yang harus dipenuhi oleh program yang akan dibangun. Pada tahap ini meliputi pengumpulan bahan-bahan yang akan dijadikan referensi untuk menerapkan heatmap pada aplikasi pemetaan. Pengumpulan kebutuhan dilakukan dengan metode kepustakaan untuk mencari referensi terkait dan difokuskan pada penerapan heatmap. Data yang digunakan sebagai contoh kasus adalah data UKM yang memproduksi makanan dan minuman di Salatiga yang berjumlah 1747 usaha. Data-data tersebut bisa dilihat pada Tabel 2.

Tabel 2 Daftar Data UKM yang digunakan

Kecamatan Kelurahan Makanan Minuman Total

Agromulya Cebongan 27 9 36

Kumpulrejo 34 43 77

Ledok 94 10 104

Noborejo 41 2 43

Randuacir 46 20 66

Tegalrejo 34 6 40

Sidomukti Dukuh 45 0 45

6

Kecamatan Kelurahan Makanan Minuman Total

Kecandran 20 0 20

Mangunsari 113 11 124

Sidorejo Bugel 68 6 74

Blotongan 20 1 21

Kauman Kidul 23 0 23

Pulutan 35 2 37

Salatiga 282 61 343

Sidorejo Lor 47 3 50

Tingkir Gedongan 28 2 30

Kalibening 54 8 62

Kutowinanngun 278 46 324

Sidorejo Kidul 50 3 53

Tingkir Lor 29 2 31

Tingkir Tengah 96 5 101

Total 1503 244 1747

Langkah kedua adalah system and software design (perancangan sistem dan perangkat lunak), yaitu merancang sistem dan user interface. Perancangan sistem menggunakan DFD(Data Flow Diagram) yang digunakan untuk menggambarkan informasi yang mengalir pada sistem atau aplikasi. DFD(Data FlowDiagram) menggambarkan proses aliran data atau informasi yang digunakan pada sistem atau aplikasi. Pada DFD level 0 menunjukkan rancangan proses dasar sistem. Proses keseluruhan aliran data atau informasi digambarkan secara garis besar dalam DFD level 0 seperti yang terlihat pada Gambar 4.

Gambar 4 DFD Level 0 aplikasi pemetaan persebaran UKM yang memproduksi makanan dan

minuman di Salatiga

7

Gambar 5 DFD Level 1 aplikasi pemetaan persebaran UKM yang memproduksi makanan dan

minuman di Salatiga

Pada DFD level 1 user dapat melihat data UKM yang memproduksi makanan dan minuman di Salatiga yang divisualisasikan menggunakan heatmap. Tahap selanjutnya membuat sebuah flowchart yang menggambarkan langkah-langkah yang dilakukan, dalam membangun sebuah aplikasi pemetaan menggunakan heatmap. Flowchart yang dibangun bisa dilihat pada Gambar 6.

Gambar 6 Flowchart proses program

8

Perancangan user interface, dilakukan agar pembuatan aplikasi lebih mudah dan terarah. Desain utama adalah halaman beranda atau halaman awal. Pada halaman awal ada delapan komponen yaitu tombol beranda, tombol tentang, tombol kontak, combobox pilih kecamatan, combobox pilih kelurahan, tombol lihat, area peta dan area keterangan. Seperti yang terlihat pada gambar 7.

Gambar 7 Form user interface halaman utama

Tahapan selanjutnya adalah implementationandunittesting (implementasi dan pengujian unit). Pada tahap ini dilakukan implementasi dari rancangan yang telah dibuat. Implementasi dilakukan melalui proses pengkodean. Proses pengkodean menggunakan PHP dan pemanfaatan Google Maps API untuk mendapatkan data peta dan mengambil library visualization untuk penerapan heatmap.

Tahap berikutnya adalah system testing (pengujian sistem) pada tahap ini dilakukan pengujian sistem yang telah dibuat. Pengujian sistem ini menggunakan blackboxtesting. Tahapan terakhir adalah operationandmaintenance (penerapan dan pemeliharaan sistem). Pada tahap ini dilakukan pemeliharaan terhadap aplikasi. Bentuk pemeliharaan bisa dalam bentuk penambahan fitur dan perubahan layout.

4. Hasil dan pembahasan

Pada hasil dan pembahasan akan dibahas beberapa proses yang terjadi dalam penerapan heatmap, antara lain bagaimana heatmap memproses data koordinat yang diberikan dan mengambil peta dari google maps menggunakan Google Maps API. Heatmap akan membentuk lapisan-lapisan layer untuk setiap titik koordinat kemudian divisualisasikan menggunakan gradien warna default. Titik yang berdekatan akan mencampur warnanya menjadi warna yang dominan sehingga terbentuk sebuah gradien warna dengan intensitas warna yang berbeda.

9

masing-masing titik koordinat heatmap akan menghitung jarak tiap-tiap titik koordinat dan mendapatkan perpotongan diantara radius warna sebuah titik koordinat. Setelah menemukan perpotongan heatmap akan melebur warna dari lapisan paling dalam sampai lapisan terluar.

Gambar 8 Contoh proses layer heatmap

Gambar 9 merupakan perkiraan hasil gradien warna yang terbentuk dari 10 titik koordinat pada Gambar 8. Gradien warna yang terbentuk dari 10 titik koordinat tersebut akan terlihat seperti pada gambar 9. Sebenarnya setiap titik koordinat mempunyai semua warna yang ada pada gradien warna default heatmap. Tetapi titik bagian tengah hanya memiliki beberapa warna saja dan bahkan hanya memiliki satu warna saat titik koordinat sangat rapat. Hal tersebut dikarenakan peleburan warna atau percampuran warna yang dilakukan heatmap.

10

Sebelum menggunakan heatmap pada aplikasi peta diharuskan mereferensikan library heatmap pada coding aplikasi peta. Kode program 1 merupakan script yang harus ada dalam pembuatan aplikasi peta yang menggunakan heatmap. Script tersebut berisikan referensi visualization dari library Google Maps API. Library visualization digunakan jika aplikasi akan menggunakan MapsEngine dan Heatmap.

Kode Program 1 Referensi Visualisasi[7]

Isi dari library visualization adalah fungsi-fungsi yang digunakan untuk memanggil data peta dan fungsi heatmap. Pada library visualization semua data yang diambil oleh heatmap diolah dan kemudian ditampilkan pada heatmap layer yang ada pada data peta GoogleMaps.

Agar warna peta yang ditampilkan berbeda dengan warna default dari Google maka perlu style tambahan seperti yang terlihat pada Kode Program 2.

Kode Program 2 Custom style peta Google Maps[8]

Pada kode program 2 pada baris tiga merupakan fungsi featureType yang berfungsi untuk mendefinisikan tipe fitur dari peta yang akan di rubah warnanya. Jenis-jenis featureType yang digunakan adalah administrative(wilayah administrasi) yang digunakan untuk mengatur customstyle dari area administrasi suatu wilayah, poi(point of interest/tempat tujuan) yang digunakan untuk mengatur style tempat-tempat tujuan seperti gereja, masjid, kampus dan lain sebagainya, road(jalan) yang digunakan untuk mengatur custom style dari jalan, water(air) yang digunakan untuk mengatur customstyle dari air, dan transit yang digunakan untuk mengatur customstyle dari area pemberhentian.

Pada baris empat merupakan fungsi elementType yang berfungsi untuk menentukan elemen tipe apa saja yang akan di kostum warnanya. Jenis-jenis elementTipe yang digunakan adalah geometry yang berfungsi untuk mengatur fill dan stroke dari featureType dan label yang berfungsi untuk mengatur elemen text dan icon dari featureType. Terdapat juga fungsi stylers yang berfungsi sebagai tempat peletakan dan pengaturan style dari GoogleMaps.

Berikutnya membuat array titik koordinat yang diambil dari database menggunakan variabel javascript seperti yang terlihat pada Kode Program 3.

1. var style = [ 2. {

3. "featureType": "administrative", 4. "elementType": "all",

5. "stylers": [{"visibility": "off"}]}, 6. ...

7. ... 8. ]; 1. <script

src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries= visualization">

11 Kode Program 3 Kode array titik

Kode Program 3 pada baris 1 merupakan kode untuk membuat variabel pada javascript. Baris 3 merupakan kode untuk mengambil data koordinat dari database. Baris 4-8 merupakan kode untuk membuat perulangan data koordinat dari database sehingga membentuk array. Pada baris 7 merupakan kode untuk mencetak koordinat pada fungsi LatLng dari GoogleMaps.

Berikutnya memanggil fungsi initialize dari Google Maps API. Didalam fungsi ini terdapat pengaturan untuk peta, membuat layer baru untuk heatmap, memasukkan array titik dan memanggil event untuk memunculkan peta seperti yang terlihat pada kode program 4.

Kode Program 4 Fungsi pengaturan peta dan heatmap

Kode Program 4 baris 2 merupakan kode untuk membuat variabel mapOptions yang berfungsi untuk menyimpan pengaturan peta. Baris 3 merupakan kode untuk menentukan zoom peta default saat pertama peta di load. Baris 4 merupakan kode untuk menentukan titik tengah dari peta. Baris 5 merupakan kode untuk menentukan jenis peta yang akan ditampilkan. Baris 6 merupakan kode untuk memanggil style peta yang sudah didefinisikan sebelumnya. Baris 8 merupakan kode untuk menampilkan peta. Baris 9-14 merupakan kode untuk mengambil array titik dan membuat layer heatmap kemudian memasukkan layer heatmap pada peta. Baris 15 merupakan kode untuk menjalankan fungsi initialize.

1. var ukmData = [ 2. <?php

3. $query = mysql_query("SELECT * FROM data WHERE kategori > 0"); 4. while ($row = mysql_fetch_array($query)){

5. $lat=$row['Lat']; 6. $lon=$row['Lng'];

7. echo ("new google.maps.LatLng($lat, $lon),\n"); 8. }

9. ?> 10. ];

1. function initialize() { 2. var mapOptions = { 3. zoom: 12,

4. center: new google.maps.LatLng(deflat, deflng), 5. mapTypeId: google.maps.MapTypeId.MAP,

6. styles: style 7. };

8. map = new

google.maps.Map(document.getElementById('map-canvas'),mapOptions); 9. var pointArray = new google.maps.MVCArray(ukmData);

10. heatmap = new google.maps.visualization.HeatmapLayer({ 11. data: pointArray

12. });

13. heatmap.setMap(map); 14. }

12

Kode Program 5 Potongan javascript google maps API untuk visualization dan heatmap

Kode Program 5 merupakan potongan dari javascript google maps API untuk visualization dan heatmap. Pada Kode Program 5 terdapat fungsi sebagai berikut polygonOptions yang berfungsi untuk menbuat sebuah bentuk dari sekumpulan garis, strokeColor yang berfungsi untuk menentukan warna garis, strokeColorStyle yang berfungsi untuk menentukan style dari warna sebuah garis, strokeOpacity berfungsi sebagai pengatur transparansi sebuah garis, strokeOpacityStyle berfungsi sebagai penentu style transparansi dari sebuah garis, strokeWeight berfungsi untuk menentukan ketebalan sebuah garis, fillColor berfungsi untuk memberi warna sebuah polygon, fillColorStyle berfungsi sebagai pengatur style warna sebuah polygon, fillOpacity berfungsi sebagai pengatur transparansi sebuah polygon, dan fillOpacityStyle berfungsi sebagai pengatur style transparansi sebuah polygon. Fungsi-fungsi yang lain merupakan fungsi yang digunakan untuk menentukan bentuk dari peta sesuai data yang diambil dari server dan menampikan pada halaman web. Terdapat juga fungsi untuk heatmap layer didalam fungsi tersebut terdapat fungsi untuk menentukan posisi sebuah titik dan menentukan warna dari titik tersebut.

Hasil dari visualisasi heatmap adalah gradien warna, pada Gambar 10 merupakan hasil dari visualisasi untuk Kota Salatiga dan gradien warna yang terlihat adalah warna merah yang berarti kerapatan UKM yang memproduksi makanan dan minuman sangat rapat, kemudian warna kuning yang berarti kerapatannya sedang, dan warna hijau berarti kerapatannya jarang. Salah satu kelebihan heatmap adalah heatmap mampu memecah bentuk dan merubah intensitas warna ketika data berubah atau tampilan diperbesar. Pada Gambar 10 bagian atas, peta di perbesar 12x sehingga terlihat bentuk persebaran data UKM yang memproduksi makanan dan minuman sedikit memencar dan warna dominan merah yang berarti kepadatan UKM yang memproduksi makanan dan minuman sangat padat. Pada Gambar 10 bagian bawah peta diperbesar 13x terlihat bentuk visualisasi data UKM yang memproduksi makanan dan minuman berubah lebih terpencar dan intensitas warna berubah karena ketika peta diperbesar kerapatan

1. function(b){ 2. b.Am(a)

3. })}); Lf(Um[F], {map: Dg, query: Tm, style: Qm}); 4. Ug.visualization = function(a) {

5. eval(a) 6. };

7. var Vm = Cd[Jc].maps.visualization = {DynamicMapsEngineLayer: Mm, HeatmapLayer: Gm, MapsEngineLayer: Nm, MapsEngineStatus: {OK: od, INVALID_LAYER: id, UNKNOWN_ERROR: rd}};

8. cl[16] && Sd(Vm, {DemographicsLayer: Um}); 9. cl[15] || delete Nm[F][ad];

10. Bf("visualization", {});

11. function(b){b.Am(a)})}); Lf(Um[F], {map: Dg, query: Tm, style: Qm}); 12. Ug.visualization = function(a) {

13. eval(a) 14. };

15. var Vm = Cd[Jc].maps.visualization = {DynamicMapsEngineLayer: Mm, HeatmapLayer: Gm, MapsEngineLayer: Nm, MapsEngineStatus: {OK: od, INVALID_LAYER: id, UNKNOWN_ERROR: rd}};

16. cl[16] && Sd(Vm, {DemographicsLayer: Um}); 17. cl[15] || delete Nm[F][ad];

13

antar titik posisi UKM yang memproduksi makanan dan minuman berubah secara skala dan bukan posisi sebenarnya yang berubah.

Gambar 10 Hasil visualisasi heatmap pada zoom 12x dan 13x untuk Kota Salatiga

Pada Gambar 11 merupakan hasil visualisasi heatmap untuk Kecamatan Tingkir yang terdiri dari 555 data UKM yang memproduksi makanan dan 66 data UKM yang memproduksi minuman dan total dari kedua kategori adalah 601 data. Perbedaan bentuk dan intensitas warna sangat terlihat saat peta diperbesar 12x Gambar 11 bagian atas dan saat peta diperbesar 13x Gambar 11 bagian bawah. Hal ini terjadi karena perbedaan kerapatan titik posisi UKM yang memproduksi makanan dan minuman, saat peta diperbesar maka kerapatan titik posisi UKM yang memproduksi makanan dan minuman secara skala akan melebar. Karena kerapatan titik posisi UKM yang memproduksi makanan dan minuman berubah maka bentuk visualisasi heatmap dan warnanya pun berubah.

14

Gambar 12 merupakan hasil visualisasi heatmap untuk Kelurahan Salatiga yang berada di Kecamatan Sidorejo yang terdiri dari 282 UKM yang memproduksi makanan dan 61 UKM yang memproduksi minuman dan total dari kedua kategori tersebut adalah 343. Bentuk dan warna dari visualisasi heatmap saat peta diperbesar 12x Gambar 12 bagian atas dan saat peta diperbesar 13x Gambar 12 bagian bawah tidak banyak berubah karena data sangat padat. Perenggangan antar titik tidak begitu berpengaruh karena wilayahnya juga kecil. Warna visualisasi heatmap didominasi oleh warna merah karena kerapatan titik lokasi UKM yang memproduksi makanan dan minuman di kelurahan Salatiga sangat rapat.

Gambar 12 Hasil visualisasi heatmap pada zoom 12x dan 13x untuk Kelurahan Salatiga

Pengujian black box merupakan pengujian yang fokus pada persyaratan fungsi. Dengan metode black box pengujian dilakukan dengan mencari fungsi-fungsi yang tidak benar, menguji kesalahan-kesalahan yang mungkin terjadi pada tampilan aplikasi yang telah dikembangkan[9].

Metode pengujian yang digunakan pada penelitian ini adalah metode black box. Tujuannya adalah untuk memperkecil kesalahan pada saat pengembangan dan dengan mudah melakukan koreksi terhadap kekurangan yang terjadi setelah aplikasi selesai dikerjakan. Hasil pengujian bisa dlihat pada Tabel 3.

Tabel 3 Tabel Uji Aplikasi Pemetaan pada zoom 12x

Pengelompokan Hasil yang diharapkan Hasil pengujian Kesimpulan

Kota

Memvisualisasikan semua data UKM yang

memproduksi makanan dan minuman

menggunakan gradien warna

Gradien warna keluar sesuai dengan seluruh data UKM yang memproduksi makanan dan minuman

15

Kecamatan

Memvisualisasikan data UKM yang memproduksi makanan dan minuman berdasarkan kecamatan yang dipilih menggunakan gradien warna

Gradien warna keluar sesuai dengan seluruh data UKM yang memproduksi makanan dan minuman dikelompokkan berdasarkan kecamatan Hasil Valid Kelurahan Memvisualisasikan data UKM yang memproduksi makanan dan minuman berdasarkan kelurahan yang dipilih menggunakan gradien warna

Gradien warna keluar sesuai dengan seluruh data UKM yang memproduksi makanan dan minuman

dikelompokkan berdasarkan kecamatan

Hasil Valid

Pada Tabel 3 memperlihatkan hasil uji black box testing atas uji pengelompokan berdasarkan wilayah saat peta diperbesar 12x. Pada pengujian ini dipastikan semua wilayah memiliki hasil yang sesuai harapan. Pengujian ini akan berperngaruh pada pengujian pengelompokan berdasarkan wilayah dengan peta diperbesar 13x seperti yang terlihat pada Tabel 4.

Tabel 4 Tabel Uji Aplikasi Pemetaan pada zoom 13x

Pengelompokan Hasil yang diharapkan Hasil pengujian Kesimpulan

Kota

Memvisualisasikan semua data UKM yang

memproduksi makanan dan minuman menggunakan gradien warna dengan bentuk lebih menyebar dari pada zoom 12x dan intensitas gradien warna berubah.

Gradien warna keluar sesuai dengan seluruh data UKM yang memproduksi makanan dan minuman dengan bentuk lebih menyebar dari pada zoom 12x dan intensitas warna berubah

Hasil Valid

Kecamatan

Memvisualisasikan data UKM yang memproduksi makanan dan minuman berdasarkan kecamatan yang dipilih menggunakan gradien warna dengan bentuk lebih menyebar dari pada zoom 12x dan intensitas gradien warna berubah.

Gradien warna keluar sesuai dengan seluruh data UKM yang memproduksi makanan dan minuman dikelompokkan berdasarkan kecamatan dengan bentuk lebih menyebar dari pada zoom 12x dan intensitas warna berubah

Hasil Valid

Kelurahan

Memvisualisasikan data UKM yang memproduksi makanan dan minuman berdasarkan kelurahan yang dipilih menggunakan gradien warna dengan bentuk lebih menyebar dari pada zoom 12x dan intensitas gradien warna berubah.

Gradien warna keluar sesuai dengan seluruh data UKM yang memproduksi makanan dan minuman dikelompokkan berdasarkan kecamatan dengan bentuk lebih menyebar dari pada zoom 12x dan intensitas warna berubah

16

Pada Tabel 4 menunjukan hasil uji saat peta diperbesar 13x yang mengharapkan hasil yang berbeda dari peta yang diperbesar 12x. Perbedaan yang diinginkan adalah perubahan bentuk dan perubahan intensitas warna pada gradien warna heatmap. Pada Tabel 4 menyatakan bahwa perbedaan yang diinginkan sesuai dengan harapan.

5. Kesimpulan

Dalam membangun aplikasi peta menggunakan heatmap dan google map harus memperhatikan jumlah data dan kerapatan titik. User interface dibuat sedemikian mungkin sehingga pengguna mudah mengerti informasi yang diberikan. Aplikasi yang dibuat menggunakan data sebanyak 1747 titik. Heatmap pada aplikasi bisa merepresentasikan semua titik dalam bentuk gradien warna yang memiliki bentuk sesuai dengan persebaran data. Heatmap juga memberikan informasi populasi persebaran dan kerapatan titik dari posisi UKM. Heatmap mampu memecah bentuk dan merubah intensitas warna yang digunakan ketika peta diperbesar. Dengan menggunakan heatmap dapat memvisualisasikan data persebaran UKM yang memproduksi makanan dan minuman di Salatiga dengan bentuk warna yang berbeda karena kerapatan titik posisi UKM yang memproduksi makanan dan minuman di Salatiga.

Saran untuk pengembangan aplikasi ini adalah: 1) Menambahkan kategori UKM dan memperluas wilayah pemetaan; 2) Aplikasi memiliki halaman administrator untuk memperbaharui data; 3) Aplikasi dapat menampilkan informasi data pada peta.

6. Daftar Pustaka

[1] Soava, Georgeta, dan Raduteanu, Mircea, 2013, Optimizing Ecommerce Sites Through the use Heatmap, European International Journal of Science and Technology, 2(4):53 – 64. http://www.cekinfo.org.uk/images /frontImages/gallery/Vol._2_No._4_/6.pdf.

[2] Wilkinson, Leland dan Friendly, Michael, 2008, The History of the Cluster Heat Map, The American Statistician. http://www.cs.uic.edu/ ~wilkinson/Publications/heatmap.pdf.

[3] Google, n.a, Google Maps Tutorial : Visualizing data, https://developers.google.com/maps/tutorials/visualizing/. Diakses pada tanggal 18 Juni 2014.

[4] Lisana, dan Pramana, Edwin, 2013, Implementasi Metode Heatmap 2-D untuk Visualisasi Data Terdistribusi, Prosiding Seminar Nasional Teknologi Informasi dan Multimedia 2013, 4(24):C-55 – C-60.

[5] Horák, Oldřich, Novák, Martin, dan Zákoutský, Vojtěch, 2012, Heatmap Generation Techniques used for GeoWeb Application User-Interface Evaluation, International Journal of Mathematics and Computers in Simulation, 6(4):369 – 377. http://naun.org/main/NAUN/mcs/17-398.pdf. [6] Powell, T. 1998. Web Site Engineering Beyond Web Page Design. Upper

17

[7] Dincer, Alper and Uraz, Balkan, 2013, Google Maps JavaScript API Cookbook, United Kingdom:Packt Publishing.

[8] Google, n.a, Google Maps Javascript API V3 Reference, https://developers.google.com/maps/documentation/javascript/reference#Ma pTypeStyler. Diakses pada tanggal 20 April 2014.