1. Pendahuluan. 2. Tinjauan Pustaka

Transkripsi

1 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 surface plot. 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 zoom out 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 Penelitian tentang penggunaan heatmap sudah pernah dilakukan sebelumnya. Pada penelitian yang mengimplementasikan heatmap 2-D untuk visualisasi data terdistribusi memanfaatkan heatmap digunakan untuk 2

2 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 % 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 % Coklat 70 80% Kuning 60 70% Hijau 50 60% Biru muda 40 50% Biru Dibawah 40% 3

3 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] Perbedaan penelitian ini dengan penelitian sebelumnya adalah aplikasi yang dibuat akan menerapkan heatmap pada pemetaan persebaran UKM yang memproduksi makanan dan minuman. Heatmap digunakan untuk mevisualisasikan persebaran data UKM yang memproduksi makanan dan minuman agar lebih mudah dilihat seberapa luas persebaran UKM yang memproduksi makanan dan minman di Salatiga. 4

4 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 Kumpulrejo Ledok Noborejo Randuacir Tegalrejo Sidomukti Dukuh Kalicacing

5 Kecamatan Kelurahan Makanan Minuman Total Kecandran Mangunsari Sidorejo Bugel Blotongan Kauman Kidul Pulutan Salatiga Sidorejo Lor Tingkir Gedongan Kalibening Kutowinanngun Sidorejo Kidul Tingkir Lor Tingkir Tengah Total 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 Flow Diagram) 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 Pada DFD level 0 terdapat entitas user. User dapat meminta informasi yang tersedia dengan memilih filter yang ada pada aplikasi pemetaan presebaran UKM yang memproduksi makanan dan minuman di Salatiga. Pada aplikasi ini user hanya bisa meminta data dan memberi respon pada aplikasi. Respon yang dilakukan user adalah memilih filter berdasarkan kecamatan atau kelurahan melalui form filter. Informasi yang didapat user adalah pemetaan persebaran UKM yang memproduksi makanan dan minuman di Salatiga sesuai filter yang diberikan oleh user. Data UKM yang memproduksi makanan dan minuman divisualisasikan menggunakan heatmap. Dari DFD level 0 akan dijabarkan menjadi DFD level 1 seperti yang terlihat pada Gambar 5. DFD level 1 digunakan untuk memperjelas proses-proses yang terjadi pada sistem.. 6

6 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 Program dimulai dengan melakukan pengecekan apakah filter ditemukan atau tidak, jika filter ditemukan maka sistem akan meminta memilih kecamatan. Setelah mendapat masukan kode kecamatan sistem akan melakukan pengecekan apakah user memilih kelurahan atau tidak, jika memilih kelurahan maka sistem akan melakukan pengelompokan berdasakan kelurahan, jika tidak maka sistem akan melakukan pengelompokan berdasarkan kecamatan. Setelah melakukan pengelompokan maka sistem mengambil data dan memproses menggunakan heatmap untuk divisualisasikan. Jika sistem tidak menemukan filter maka sistem akan mengambil semua data yang cocok kemudian diproses menggunakan heatmap untuk divisualisasikan. 7

7 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 implementation and unit testing (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 black box testing. Tahapan terakhir adalah operation and maintenance (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. Pada Gambar 8 diambil sampel 10 titik koordinat dan dibentuk dalam layer-layer. Setiap titik pada masing-masing layer mempunyai warna gradien default. Langkah selanjutnya heatmap akan melebur gradien warna yang dimiliki setiap titik koordinat yang ada. Sebelum melebur warna yang dimiliki oleh 8

8 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. Gambar 9 Perkiraan hasil dari gambar 8 9

9 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 Maps Engine dan Heatmap. Kode Program 1 Referensi Visualisasi[7] 1. <script src=" visualization"> 2. </script> 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 Google Maps. 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] 1. var style = [ 2. { 3. "featuretype": "administrative", 4. "elementtype": "all", 5. "stylers": [{"visibility": "off"}]}, ]; 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 custom style 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 custom style dari air, dan transit yang digunakan untuk mengatur custom style 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 Google Maps. Berikutnya membuat array titik koordinat yang diambil dari database menggunakan variabel javascript seperti yang terlihat pada Kode Program 3. 10

10 Kode Program 3 Kode array titik 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. ]; 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 Google Maps. 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 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. } 15. google.maps.event.adddomlistener(window, 'load', initialize); 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. 11

11 Kode Program 5 Potongan javascript google maps API untuk visualization dan heatmap 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]; 18. Bf("visualization", {}); 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 12

12 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. Gambar 11 Hasil visualisasi heatmap pada zoom 12x dan 13x untuk Kecamatan Tingkir 13

13 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 Hasil Valid 14

14 Kecamatan Kelurahan Memvisualisasikan data UKM yang memproduksi makanan dan minuman berdasarkan kecamatan yang dipilih menggunakan gradien warna 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 Gradien warna keluar sesuai dengan seluruh data UKM yang memproduksi makanan dan minuman dikelompokkan berdasarkan kecamatan Hasil Valid 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 Kecamatan Kelurahan 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. 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. 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 dengan bentuk lebih menyebar dari pada zoom 12x dan intensitas 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 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 Hasil Valid Hasil Valid 15

15 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): /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. ~wilkinson/publications/heatmap.pdf. [3] Google, n.a, Google Maps Tutorial : Visualizing data, Diakses pada tanggal 18 Juni [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): [6] Powell, T Web Site Engineering Beyond Web Page Design. Upper Saddle River: Prentice Hall. 16

16 [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, ptypestyler. Diakses pada tanggal 20 April [9] Williams, Laurie, 2006, Testing Overview and Black-box Testing Techniques, Diakses pada tanggal 9 Juli