fbpx
banner kopdar useR regional jogja jateng

Yang Saya Pelajari Ketika Menghadiri “Kopdar useR Indonesia Regional Jogja & Jateng” – Part 1: “Graph Visualization and Network Analysis”

“The main concern in designing a network visualization is the purpose it has to serve. What are the structural properties that we want to highlight?”

~ Katherine Ognyanova

hkaLabs – hakim-azizul.com – Kali ini saya akan membahas mengenai field report kopdar Komunitas R Indonesia Regional Jogja & Jateng, yang bertempat pada 22 Juni 2019 di Sadasa Academy Office Jl. Sagan GK. V No. 990, Yogyakarta.

Informasi tentang kopdar ini saya dapatkan dari grup Telegram-nya R Indonesia – Regional Jateng, silakan join, di sana akan selalu update info-info kopdar, meetup, workshop, dan diskusi-diskusi terkait R. 🙂

Kopdar useR Jogja Jateng
Kopdar useR Regional Jateng-Jogja. Sumber Gambar: https://t.me/RIndonesia_Jateng.

Sesi pertama kopdar ini berjudul: “Graph Visualization and Network Analysis”, dengan pembicaranya adalah Mas Canggih Puspo Wibowo, ST., M.Eng., Co-Founder & Lead Mentor di Sadasa Academy.

Sesi kedua kopdar ini berjudul: “User Level Access in Shiny Apps (Free)”, dengan pembicaranya adalah Mas Muhammad Farkhan Novianto, Business Intelligence Specialist di Amartha.

 

1. Sesi Pertama: Graph Visualization and Network Analysis

Mengenai materi tentang Graph Visualization and Network Analysis ini sebenarnya sudah tidak terlalu asing untuk saya, karena pada 3 November 2018, saya juga menghadiri GDG Jogja: Tech Talk on AI. Saat itu, Mas Canggih juga menjadi salah satu pembicara; yang menyampaikan materi Dive into Social Network, yang juga membahas Graph Visualization dan Network Analysis dalam konteks Social Network.

Berikut ini beberapa insights yang saya dapatkan dari Sesi Pertama Kopdar useR Jogja-Jateng:

  • Graph vs Network: Ketika berbicara graph, konteksnya kepada bentuk atau visualisasi graph itu sendiri, sedangkan apabila berbicara network; konteksnya adalah kepada konteks dari network itu sendiri, atau konteks relasi antar node (misalnya social network).
  • Graph berakar dari matematika; khususnya Graph Theory, atau sains; seperti Fisika atau Kimia. Sedangkan Network berakar dari ilmu sosial; seperti Sosiologi.
  • Graph Theory adalah studi mengenai graph, yaitu struktur matematis yang digunakan untuk menggambarkan relasi antar objek.
Contoh Social Graph. Sumber: Wikipedia.
Contoh Social Graph. Sumber Gambar: Wikipedia.
  • Anatomi graph: Graph terdiri dari node (atau vertice, atau point) yang ditunjukkan oleh nomor 1-6 di bawah ini, dan juga edge (atau link atau line) yang ditunjukkan sebagai garis yang menghubungkan antar node.
wikipedia anatomi Graph1
Anatomi Graph 1: . Sumber Gambar: Wikipedia
  • Sejarah Graph Theory: Paper pertama dalam sejarah Graph Theory dipublish oleh Leonhard Euler pada 1736, tentang Seven Bridges of Konisberg atau The Konisberg Bridge Problem. Masalah yang diangkat pada paper ini adalah: Bagaimana cara berjalan-jalan keliling kota tersebut, dengan hanya melintasi jembatan (ketujuh jembatan) sebanyak satu kali. Euler membuktikan bahwa problem tersebut tidak memiliki solusi.
wikipediaKonigsbergBridges
Konigsberg Bridges. Sumber Gambar: Wikipedia.
reduksi Menjadi Graph Problem
Reformulasi Menjadi Graph Problem. Sumber Gambar: Wikipedia.
Reduksi Menjadi Graph Problem
Reformulasi Menjadi Graph Problem. Sumber Gambar: Wikipedia.
  • Dari bentuknya, terdapat bermacam-macam graph, diantaranya:
  1. Tree Graph
  2. Planar Graph
  3. Planar Orthogonal Graph
  4. Circular Graph
  5. Spine Graph
  6. Hierarchical Graph
  7. Force Oriented Graph
  • Force Directed Graph adalah kompulan algoritma untuk memvisualisasikan graph menjadi aesthetically-pleasing. Force Directed Graph ini terinspirasi dari hukum fisika dan kimia, contohnya gaya pegas (hukum Hooke), gaya gravitasi, dan gaya tarik-menarik atau tolak-menolak antar muatan listrik (hukum Coulomb).
  • Force Directed Graph dibahas lebih dalam di kopdar ini, karena dengan Force Directed Graph ini, terdapat bermacam-macam layout visualisasi graph yang dapat digunakan sesuai dengan kebutuhan kita. Macam-macam Force Directed Graph, diantaranya:
  1. Multidimensional Scaling (MDS)
  2. Large Graph Layout (LGL)
  3. Kamada-Kawai (KK)
  4. Graph Embedding (GEM)
  5. Fruchterman Reingold (FR)
  6. Davidson-Harrel (DH)
  • Untuk memvisualisasikan Force Directed Graph ini, kita dapat menggambarkannya secara static dan animated.
  • Jika menggunakan R, kita dapat membuat static graph dengan menggunakan package “igraph”, dan untuk animated graph, kita dapat menggunakan “visNetwork” atau “networkD3”.
  • Untuk Graph Analysis, hal-hal yang dianalisis misalnya: Important Vertices (titik-titik atau nodes yang penting pada suatu network). Terdapat 4 metode klasik (Classic Graph Centralities) untuk menganalisis Important Vertices, diantaranya:
  1. Closeness atau “The Hub”. Metode ini bertujuan mencari orang-orang atau nodes yang posisinya paling dekat dengan semua nodes lainnya pada suatu jaringan. Contoh studi kasus di Social Network: The Hub adalah para Marketer atau Buzzer.
  2. Betweeness atau “The Bridge”. Metode ini bertujuan untuk mengidentifikasi orang-orang yang paling sering dilewati, atau menjadi jembatan informasi. Contoh studi kasus di militer: Untuk mengidentifikasi lalu mematikan jalur komunikasi musuh (contoh: ketika Amerika mematikan jalur komunikasi Al-Qaeda). 
  3. Degree atau “The Celebrity”. Bertujuan untuk mengidentifikasi orang yang memiliki follower atau teman terbanyak.
  4. Eigenvector Centrality atau “The Gray Cardinal”. Bertujuan untuk menemukan para “Puppet Masters”, yang tidak muncul ke permukaan, namun menjadi influencer di balik layar yang mengendalikan semuanya.
  • Analisis-analisis di atas, jika diterapkan pada igraph, dapat dimasukkan menjadi variabel pada igraph.

 

2. Studi Lebih Lanjut

Saya setuju dengan kata-kata Mas Canggih pada kopdar ini, yaitu: “Kalau bingung; dan pasti bingung ketika berhadapan dengan materi baru seperti ini memang wajar, justru itu tujuannya ada kopdar seperti ini, karena bingung, jadi penasaran.”, sehingga, sepulang dari kopdar, saya buka laptop dan mulai googling tentang materi kopdar tadi, lalu saya coba cari beberapa contoh.

Sebelumnya, library yang perlu kita install diantaranya: “igraph”, “visNetwork”, dan “networkD3”. Sistem yang saya gunakan adalah R versi 3.6.0, dengan R Studio versi 1.2.907, dan sistem operasi Windows 8.1.

2.1. igraph

Berikut ini adalah contoh-contoh sederhana visualisasi Static Graph:

library(igraph)

#Contoh directed graph sederhana
g1 <- graph(edges=c(1,2, 2,3, 3,1), n=3)
plot(g1)
contoh directed graph
Contoh Directed Graph. Perhatikan Bahwa Edge-nya Hanya Memiliki Satu Arah. Sumber Gambar: Dokumentasi Pribadi.
#Contoh undirected graph sederhana
g2 <- graph(edges=c(1,2, 2,3, 3,1), n=3, directed=F)
plot(g2)
contoh undirected graph
Contoh Undirected Graph. Sumber Gambar: Dokumentasi Pribadi.
#Contoh empty graph
eg <- make_empty_graph(40)
plot(eg, vertex.size=10, vertex.label=NA)
contoh empty graph
Contoh Empty Graph. Perhatikan Bahwa Tidak Ada Satupun Edge yang Menghubungkan Tiap Titik. Sumber Gambar: Dokumentasi Pribadi.
#Contoh full graph
fg <- make_full_graph(40)
plot(fg, vertex.size=10, vertex.label=NA)
contoh full graph
Contoh Full Graph. Perhatikan Bahwa Tidak Ada Satupun Edge yang Menghubungkan Tiap Titik. Sumber Gambar: Dokumentasi Pribadi.
#Contoh star graph
st <- make_star(40)
plot(st, vertex.size=10, vertex.label=NA)
contoh Star Graph
Contoh Star Graph. Sumber Gambar: Dokumentasi Pribadi.
#Contoh ring graph
rn <- make_ring(40)
plot(rn, vertex.size=10, vertex.label=NA)
contoh ring graph
Contoh Ring Graph. Sumber Gambar: Dokumentasi Pribadi.
#Contoh tree graph
tr <- make_tree(40, children = 3, mode = "undirected")
plot(tr, vertex.size=10, vertex.label=NA)
contoh Tree Graph
Contoh Tree Graph. Sumber Gambar: Dokumentasi Pribadi.

2.1.1. Force Directed Graph Layout Visualization

Selanjutnya, contoh-contoh sederhana visualisasi Force Directed Graph static:

#Contoh mds graph
g <- sample_gnp(100, 2/100)
l <- layout_with_mds(g)
plot(g, layout=l, vertex.label=NA, vertex.size=3)
contoh MDS Graph
Contoh MDS Graph. Sumber Gambar: Dokumentasi Pribadi.
#contoh lgl graph
glgl <- sample_gnp(100, 2/100)
l <- layout_with_lgl(glgl)
plot(glgl, layout=l, vertex.label=NA, vertex.size=3)
contoh LGL Graph
Contoh LGL Graph. Sumber Gambar: Dokumentasi Pribadi.
#contoh kk graph
gkk <- sample_gnp(100, 2/100)
l <- layout_with_kk(gkk)
plot(gkk, layout=l, vertex.label=NA, vertex.size=3)
contoh KK Graph
Contoh KK Graph. Sumber Gambar: Dokumentasi Pribadi.
#contoh gem graph
ggem <- sample_gnp(100, 2/100)
l <- layout_with_gem(ggem)
plot(ggem, layout=l, vertex.label=NA, vertex.size=3)
contoh GEM Graph
Contoh GEM Graph. Sumber Gambar: Dokumentasi Pribadi.
#contoh fr graph
gfr <- sample_gnp(100, 2/100)
l <- layout_with_fr(gfr)
plot(gfr, layout=l, vertex.label=NA, vertex.size=3)
contoh FR Graph
Contoh FR Graph. Sumber Gambar: Dokumentasi Pribadi.
#contoh dh graph
gdh <- sample_gnp(100, 2/100)
l <- layout_with_dh(gdh)
plot(gdh, layout=l, vertex.label=NA, vertex.size=3)
contoh DH Graph
Contoh DH Graph. Sumber Gambar: Dokumentasi Pribadi.

Selanjutnya, yang menarik adalah menerapkan visualisasi graph di atas pada dataset. Namun, agar postingan ini tidak terlalu panjang, semoga bisa kita coba di lain waktu, insyaAlloh. 🙂

 

2.2. visNetwork

Setelah mencoba beberapa sampel static graph menggunakan igraph di atas, mari kita coba membuat animated graph menggunakan visNetwork. Saya hanya mencoba sampel-sampel minimum, karena keterbatasan hardware. 🙂

library(visNetwork)

#Contoh minimum
nodes <- data.frame(id = 1:3)
edges <- data.frame(from = c(1,2), to = c(1,3))
visNetwork(nodes, edges, width = "100%")
contoh minimum visNetwork
Contoh Minimum visNetwork. Sumber Gambar: Dokumentasi Pribadi.

Untuk mencoba sensasi animated dari interaksi force-directed antar node, silakan kunjungi URL di bawah, karena sudah saya export hasil di atas menjadi html:

https://hakim-azizul.com/visNetwork-minimal-example.html

 

2.3. networkD3

Selanjutnya kita buat visualisasi animated Force Directed Graph yang lebih kompleks, menggunakan networkD3:

#Contoh networkD3
library(networkD3)

#Load data
data(MisLinks)
data(MisNodes)

#Plotting
forceNetwork(Links = MisLinks, Nodes = MisNodes,
             Source = "source", Target = "target",
             Value = "value", NodeID = "name",
             Group = "group", opacity = 0.8)
contoh Network D3
Contoh Force Directed Network yang Dibuat Menggunakan networkD3. Sumber Gambar: Dokumentasi Pribadi.

Untuk mencoba sensasi animated dari interaksi force-directed antar node, silakan kunjungi URL di bawah, karena sudah saya export hasil di atas menjadi html:

https://hakim-azizul.com/networkD3-forceNetwork-example.html

 

Sampai jumpa di field report Kopdar useR Indonesia Regional Jogja & Jateng – Part 2: “User Level Access in Shiny Apps (Free)”. Stay tuned, dan enjoy! 🙂

 

References & Further Reading

Introduction to visNetwork.

networkD3: D3 JavaScript Network Graphs from R.

Ognyanova, K. (2015): Network Visualization with R, POLNET 2015 Workshop, Portland OR.

Follow and like us:

1 comment

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *

Social media & sharing icons powered by UltimatelySocial