3. Perancangan Sistem
3.1 Gambaran Umum Sistem
Pada bagian ini menjelaskan arsitektur atau gambaran umum sistem yang akan dibangun dan menganalisis kebutuhan apa saja yang digunakan untuk membangun sistem visualisasi graph dengan representasi visual treemap. Berikut adalah alur sistem visualisasi yang akan dibuat pada gambar 3-1.
Gambar 3-1 Alur Sistem Visualisasi
Tahapan untuk membuat sistem visualisasi graph dengan representasi visual treemap ini adalah sebagai berikut :
1. Input Data
Untuk input data dalam penelitian ini digunakan dataset dari web https://snap.stanford.edu/data/ [14]. Pada web ini diberikan beberapa koleksi data dengan large network atau jaringan yang sangat besar. Untuk tugas akhir ini menggunakan dataset social networks yaitu wiki vote dengan jenis graph berarah. Dari web tersebut data diberikan dalam bentuk text atau dengan file ekstensi text. Untuk memudahkan dalam membaca data maka file dari text diubah menjadi file excel. Dataset yang sudah tersedia kemudian diinputkan ke dalam program untuk proses selanjutnya yaitu preprocessing data.
20
2. Preprocessing Data
Berdasarkan dataset yang diberikan yaitu jenis graph berarah, maka untuk visualisasi graph dengan visual treemap dataset tersebut harus diubah ke dalam bentuk tree. Pada proses ini dataset yang diinputkan dalam bentuk excel diubah terlebih dahulu ke dalam bentuk graph.
Gambar 3-2 Mengubah Data Excel ke Data Graph
Data yang sudah dalam bentuk graph akan memudahkan proses filtering dan convert data selanjutnya. Hasil akhir dari preprocessing data ini adalah dataset akan berbentuk struktur pohon atau tree dan memiliki struktur seperti dokumen JSON.
a. Filtering
Pada tahapan ini dataset yang sudah ada dipilih atau diklasifikasikan berdasarkan jumlah derajat masuk atau indegree yang bernilai nol dari suatu node. Tujuan dari proses ini adalah untuk mencari dan menentukan root. Root ini akan dijadikan elemen pertama pada sebuah tree atau juga dapat disebut sebagai parent pertama. Node dengan jumlah derajat masuk bernilai nol, maka node tersebut akan dijadikan root atau akar dalam sebuah tree. Dataset diinputkan menggunakan bahasa pemrograman java untuk mencari node dengan jumlah indegree atau derajat masuk bernilai nol. Dari hasil program didapatkan bahwa node yang indegree bernilai nol memiliki jumlah lebih dari satu node.
Gambar 3-3 Beberapa Node yang Merupakan Root
Karena jumlah node dengan indegree bernilai nol lebih dari satu maka harus menggunakan root semesta untuk menampung semua root yang indegree bernilai nol. Selain itu tidak dapat memilih dari salah satu node tersebut untuk dijadikan root, karena akan berakibat
21
pada node-node tersebut tidak akan dikunjungi. Root semesta ini digunakan supaya node-node yang indegree nol tidak terpisah satu sama lain dan mengakibatkan visualisasi treemap yang terpisah. Oleh karena itu diperlukan root semesta untuk menampung semua root dari node yang indegree nol. Setelah node-node tersebut didapatkan maka tahapan selanjutnya adalah mengkonversi dari data excel diubah menjadi file JSON atau dokumen JSON.
Gambar 3-4 Root Semesta yang Terhubung ke Beberapa Root
b. Convert data
Setelah node-node dari dataset telah dipilih berdasarkan jumlah derajat masuk atau indegree yang bernilai nol, kemudian dataset tersebut dikonversi ke dalam bentuk struktur pohon. Pengubahan bentuk dataset ini dikarenakan visualisasi treemap harus menggunakan data dengan struktur tree untuk memudahkan membaca dataset.
Gambar 3-5 Mengubah Data Graph ke Dokumen JSON
Dalam tahapan ini ada beberapa rule atau aturan untuk mengubah dataset menjadi dokumen JSON. Aturan tersebut ada supaya dataset yang berbentuk data dengan jenis graph berarah ini tidak mengalami perulangan yang tak terhingga. Menurut teori graph, tree adalah graph terhubung yang tidak memiliki siklus [4]. Perbedaan antara
22
tree dan graph adalah untuk tree tidak memiliki siklus sedangkan graph tidak mempunyai root. Oleh karena itu dalam mengkonversi bentuk dataset ke dalam bentuk dokumen JSON harus mempunyai rule agar masalah perbedaan tersebut dapat diselesaikan. Rule atau aturan mengubah dataset menjadi bentuk dokumen JSON yaitu : 1. Dokumen JSON terdapat aturan cara penulisan yang benar untuk
dapat dibaca oleh suatu program. Setelah proses filtering sebelumnya, sudah didapatkan hasil node-node dengan indegree bernilai nol. Hasil dari proses filtering membuktikan bahwa lebih dari satu node dengan indegree nol dan solusi untuk mengatasi masalah tersebut adalah dengan menggunakan node baru yang dijadikan root semesta yang dapat menghubungkan ke semua node dengan indegree nol. Berikut ini adalah contoh gambar pembentukan root semesta beserta node-node dengan indegree nol dalam dokumen JSON.
Gambar 3-6 Pembentukan Root Dengan Node-Node Indegree Nol di Dokumen JSON
Pada gambar diatas dapat dijelaskan bahwa nama root di dokumen JSON tersebut merupakan node baru yang dijadikan root semesta. Sementara children menandakan bahwa dari root tersebut mempunyai child node dengan menggunakan kurung siku. Dari gambar di atas dijelaskan bahwa 25, 4, 244, dan seterusnya hingga 8274 merupakan node dengan indegree bernilai nol.
23
2. Setelah root semesta beserta node-node dengan indegree bernilai nol ditampilkan, maka rule kedua adalah menampilkan semua node berdasarkan sisi yang menghubungkan dari node dengan indegree nol. Semua node yang sudah ditampilkan tersebut dilakukan lagi proses yang sama secara berulang hingga kondisi dimana ada node yang memiliki outdegree atau derajat keluar bernilai nol. Selain kondisi itu perlu juga suatu kondisi dimana jika ada sisi yang sudah dikunjungi tidak boleh lagi dikunjungi agar tidak menyebabkan perulangan yang tak terhingga. Sehingga ketika sisi yang sudah dikunjungi diberikan sebuah status true, perulangan akan berhenti dan menampilkan node yang terhubung dengan sisi tersebut. Di bawah ini adalah contoh tabel data graph.
Source Target 25 3 25 28 10 3 3 6 6 20 20 3 20 8 28 5 5 64 5 72
Table 3-1 Contoh Data Graph
Pada tabel di atas data dibentuk ke dalam bentuk graph seperti gambar di bawah ini.
24
Pada gambar graph di atas dapat terlihat dengan jelas bahwa terdapat cycle atau siklus. Dari graph tersebut jika diubah ke dalam bentuk tree maka dapat diketahui bahwa node 25 dan 10 adalah node dengan dengan indegree nol atau tidak ada sisi yang masuk ke node 25 dan 10. Hal tersebut menyebabkan salah satu node tidak dapat dipilih menjadi root dan harus menggunakan node baru untuk dijadikan root semesta yang akan menghubungkan ke node 25 dan 10. Jika digambarkan dalam struktur tree dan menggunakan aturan yang sudah dijelaskan maka akan terlihat seperti gambar di bawah ini.
Gambar 3-8 Struktur Tree dari Graph
Dari gambar di atas dapat dijelaskan bahwa dari Rs terhubung ke node 25 dan 10. Dan dari node 25 dilanjutkan lagi berdasarkan sisi yang terhubung yaitu node 28 dan 3 yang merupakan child. Proses ini dilakukan secara terus menerus atau berulang hingga terdapat node yang memiliki outdegree bernilai nol yaitu node 64,72 dan 8. Untuk node 3 bukan termasuk node dengan outdegree bernilai nol hal ini dikarenakan bahwa node 3
25
memiliki sisi yang menghubungkan ke node 6. Tetapi untuk node 3 yang dijadikan child node dari node 20 dan 10 adalah untuk mengatasi masalah siklus yang ada pada graph. Jadi jika ada sisi dari successor node(node yang berada di bawah dari node yang ditinjau) yang sudah dikunjungi maka successor node tidak harus lagi menjabarkan semua node yang terhubung untuk dijadikan child node.
Gambar 3-9 Struktur Tree dengan Boundary
Pada gambar di atas dapat dijelaskan bahwa proses perulangan yang terjadi di tandai dengan boundary atau batas. Boundary nomor satu menjelaskan bahwa perulangan dari node dengan indegree nol. Kemudian dilanjutkan lagi ke dalam boundary nomor dua yang melakukan proses perulangan untuk setiap sisi yang terhubung dari parent node. Dalam hal ini boundary dua berisi node-node yang merupakan child dari node di boundary satu. Dan proses ini dilakukan secara berulang sampai pada boundary nomor tiga yang menampilkan lagi child dari node di boundary dua. Proses perulangan ini akan berhenti ketika ada
26
node dengan outdegree bernilai nol, contohnya adalah node 64 dan 72. Ketika kondisi ini dipenuhi maka proses perulangan akan balik lagi ke node di boundary dua untuk mengecek apakah ada node lagi selain node 28. Dan jika sudah tidak ada lagi maka akan balik lagi ke boundary satu. Untuk node 10 atau node 20 dengan child node 3 merupakan kondisi khusus ketika node 3 dengan sisinya sudah dijelaskan maka tidak akan dijelaskan lagi jika ketemu node 3 karena hal itu akan menyebabkan perulangan yang tak terhingga. Sehingga node 64,72, 8 dan juga node 3 dari parent node 10 dan 20 dapat juga dikatakan leaf.
Hasil yang diperoleh setelah dua proses rule tersebut dijalankan maka dokumen JSON yang terbentuk adalah seperti gambar di bawah ini.
Gambar 3-10 Dokumen JSON yang Terbentuk dari Struktur Tree
Dari gambar dokumen JSON di atas dijelaskan bahwa nama root merupakan root semesta. Untuk nama dengan children digunakan ketika suatu node masih memiliki child node, misalkan node 25, 28,
27
5, dan lain-lain. Dan untuk penulisan size setelah nama node menjelaskan bahwa ketika node dengan outdegree bernilai nol dan juga node dengan sisi yang sudah dikunjugi, misalkan node 64,72,8 dan 3.
3. Implementasi Representasi Visual Treemap
Tahapan selanjutnya adalah melakukan implementasi representasi visual treemap menggunakan algoritma squarified. Penerapan algoritma squarified treemap pada program menggunakan library. Setelah proses preprocessing data selesai dilakukan dan dari proses tersebut didapatkan hasil konversi data berupa dokumen JSON. Dari dokumen JSON kemudian diinputkan ke dalam program untuk visualisasi treemap.
Gambar 3-11 Dokumen JSON Diinputkan Untuk Visualisasi Treemap
Dalam visualisasi treemap, dokumen JSON yang sudah ada dan struktur tree yang terbentuk diimplementasikan ke bentuk treemap. Di bawah ini adalah gambar dari struktur tree dari dokumen JSON yang diubah ke dalam visual treemap. Rs 25 10 28 3 6 5 64 72 20 3 3
Keterangan : Rs = Root semesta 8
28
Pada gambar di atas dapat dijelaskan bahwa dari tree yang ada dan dibentuk ke dalam treemap menampilkan semua node dari dari tree. Mulai dari node root semesta dan terletak paling atas pada treemap dengan bentuk persegi panjang kecil. Sementara itu child node dari root semesta yaitu node 25 dan 10 berada di bawah persegi panjang root semesta pada treemap. Node 25 yang mempunyai child node yaitu node 28 dan 3 berada di bagian bawah persegi panjang dari node 25. Dan hal ini terjadi seterusnya untuk setiap node yang masih mempunyai child node, pada treemap digambarkan dengan berada di bawah persegi panjang parent node hingga node yang merupakan leaf node atau node dengan outdegree bernilai nol dan juga node dengan kondisi bahwa node tersebut sudah pernah dikunjungi sebelumnya. Sehingga pada gambar di atas terdapat dua data yang sama ditampilkan yaitu node 3. Kedua data tersebut harus ditampilkan karena mengikuti struktur tree yang sudah terbentuk. Jadi pada gambar di atas dapat menjelaskan bahwa parent node dan child node dapat diketahui. Pada implementasi treemap ini juga terdapat interaksi terhadap user sistem. Jika node 25 dipilih atau diklik maka akan seperti gambar dibawah ini.
Gambar 3-13 Treemap Setelah Node 25 Dipilih
Setelah node 25 dipilih maka akan menampilkan seperti gambar di atas. Jadi yang ditampilkan adalah child node dari node 25 dan juga child dari child node yang lain hingga seterusnya sampai pada node yang merupakan leaf node. Implementasi treemap ini yang membedakan bahwa persegi tersebut parent atau child node adalah dari segi warna. Untuk setiap parent node diberikan warna abu-abu tua. Meskipun node tersebut merupakan child node dan jika node tersebut masih mempunyai child maka warna persegi akan tetap sama seperti parent node lainnya yaitu warna abu-abu tua. Sedangkan leaf node akan mempunyai warna yang beragam seperti biru, merah, kuning hijau dan lain-lain.
29
4. Output Visualisasi Treemap
Hasil dari proses implementasi representasi visual treemap digambarkan seperti gambar di bawah ini.
Gambar 3-14 Implementasi Visual Treemap
Pada gambar di atas merupakan hasil implementasi visual treemap dari program. Data yang ditampilkan pada gambar tersebut dipilih pendekatan top down. Dengan pendekatan top down, semua node yang ada ditampilkan mulai dari root sampai pada leaf node. Secara umum struktur graph dapat dilihat dan dapat melihat bagian yang menarik dari graph tersebut [6]. Semakin besar ukuran data maka ukuran persegi yang ada pada treemap juga semakin kecil tetapi untuk ukuran treemap itu tetap, dan itu menyebabkan sulitnya membaca isi data tersebut. Tetapi dengan implementasi treemap pada tugas akhir ini, node yang sulit dibaca bisa dipilih atau diklik untuk berganti layer dan melihat struktur yang lebih jelas.
30
Secara umum hasil dari program yang dibuat untuk mengkonversi data hingga visualisasi digambarkan dengan user interface seperti gambar di bawah ini.
Gambar 3-15 Tampilan Untuk Convert Data
Pada gambar di atas merupakan tampilan awal dari sistem yang sudah dibuat. Gambar di atas terdapat sebuah form untuk input sebuah data. Data yang harus diinputkan yaitu berupa file excel. Pada tampilan ini data file excel yang sudah diinputkan akan dikonversi ke dokumen JSON dengan memilih menu konversi. Dokumen JSON hasil konversi langsung disimpan dalam komputer. Setelah hasil konversi data keluar maka selanjutnya adalah menampilkan visual treemap dengan data dokumen JSON dengan menyalin file dokumen JSON dan dipindahkan ke folder xampp yang ada pada komputer. Setelah file dokumen JSON dipindahkan maka selanjutnya adalah membuka web browser dapat menggunakan mozilla firefox, chrome atau yang lainnya. Selanjutnya adalah memanggil file dokumen JSON tersebut di browser berdasarkan path tempat file disimpan pada komputer. Pada gambar 3-14 merupakan hasil visual treemap yang dibentuk setelah memanggil file dokumen JSON di browser. Dari gambar 3-14 di atas merupakan tampilan visual treemap yang terbentuk setelah membaca dokumen JSON. Pada tampilan visual treemap tersebut, informasi tentang data ditampilkan pada setiap persegi dari visual treemap. Tampilan visual treemap ini akan menyesuaikan dengan ukuran dari layar komputer supaya hasil yang diinginkan efisien dari segi ukuran.