Praktikum Visualisasi Data Interaktif

Dokumen ini memperkenalkan visualisasi data interaktif menggunakan Shiny — framework R untuk membangun aplikasi web yang bisa dioperasikan oleh pengguna tanpa menulis kode.

Catatan Penting: Kode Shiny di halaman ini tidak dapat dijalankan langsung di browser. Salin setiap blok kode ke RStudio, simpan sebagai app.R, lalu klik Run App.

Yang akan dipelajari:

Struktur dasar aplikasi Shiny (UI + Server)
Elemen input: dropdown, slider, checkbox
Output: plot, teks, tabel
Membuat plot interaktif yang merespons input pengguna

1. Apa Itu Visualisasi Interaktif?

Visualisasi statis (seperti plot() atau ggplot2) menghasilkan gambar tetap yang tidak bisa diubah oleh pengguna. Visualisasi interaktif memungkinkan pengguna untuk:

Memilih variabel yang ingin ditampilkan
Mengatur parameter (jumlah bin, rentang data)
Menjelajahi data secara mandiri tanpa menulis kode

Perbandingan Cepat

	Statis	Interaktif (Shiny)
Output	Gambar PNG/PDF	Aplikasi web
Pengguna	Hanya melihat	Bisa berinteraksi
Kebutuhan	`plot()` / `ggplot2`	`library(shiny)`
Cocok untuk	Laporan, paper	Dashboard, eksplorasi

💡 Petunjuk — Kapan interaktif lebih baik dari statis?

Pilih visualisasi interaktif ketika:
(1) Pengguna perlu menjelajahi berbagai subset data
(2) Ada banyak variabel yang bisa dipilih
(3) Audiens adalah pengambil keputusan non-teknis yang ingin eksplorasi mandiri

Tetap gunakan visualisasi statis untuk laporan akademis, jurnal, atau ketika hanya ada satu tampilan yang perlu dikomunikasikan.

Pertanyaan: Untuk presentasi hasil skripsi, mana yang lebih tepat — statis atau interaktif?

2. Struktur Dasar Aplikasi Shiny

Setiap aplikasi Shiny tersusun dari dua bagian:

app.R
├── ui     → Tampilan: apa yang dilihat pengguna
└── server → Logika: bagaimana data diproses

2.1 Template Paling Minimal

💡 Petunjuk — Mengapa UI dan Server dipisahkan?

Pemisahan UI dan Server mengikuti prinsip separation of concerns:
- UI mendeskripsikan apa yang ditampilkan
- Server mendeskripsikan bagaimana data diproses

Ini membuat kode lebih mudah dibaca, diuji, dan dimodifikasi. Perubahan tampilan tidak perlu menyentuh logika, dan sebaliknya.

Pertanyaan: Jika Anda ingin mengubah warna latar belakang aplikasi, di bagian mana (UI atau Server) perubahan itu dilakukan?

4. Menambahkan Tabel Interaktif

Paket DT menampilkan data frame sebagai tabel yang bisa dicari, diurutkan, dan difilter.

💡 Petunjuk — Apa keunggulan tabsetPanel?

tabsetPanel() memisahkan beberapa output ke dalam tab berbeda, sehingga halaman tidak terlalu penuh. Pengguna bisa fokus pada satu tampilan sekaligus tanpa scrolling berlebihan. Ini praktik UI yang baik ketika ada beberapa jenis output (plot, tabel, ringkasan).

Pertanyaan: Apa perbedaan antara renderPlot() dan renderDT()? Mengapa tidak bisa ditukar?

5. Scatter Plot Interaktif

Pengguna bisa memilih variabel untuk sumbu X dan Y, serta mengaktifkan garis regresi.

💡 Petunjuk — Apa itu checkboxInput dan bagaimana membacanya di server?

checkboxInput() mengembalikan nilai TRUE (dicentang) atau FALSE (tidak dicentang). Di server, nilai ini diakses via input$garis. Pernyataan if (input$garis) { ... } berarti “jalankan kode di dalam kurung kurawal hanya jika kotak dicentang”.

Pertanyaan: Jika korelasi antara dua variabel mendekati 0, apakah masuk akal menampilkan garis regresi? Mengapa?

6. Referensi Elemen Input Shiny

Fungsi	Jenis Kontrol	Nilai yang Dikembalikan
`selectInput()`	Dropdown	String (nama pilihan)
`sliderInput()`	Slider	Angka
`checkboxInput()`	Kotak centang	`TRUE` / `FALSE`
`radioButtons()`	Tombol pilihan	String
`textInput()`	Kotak teks	String
`numericInput()`	Kotak angka	Angka

7. Latihan

Latihan 1 — Mudah: Tambahkan Input Warna

Modifikasi aplikasi Bagian 3 (Histogram) dengan menambahkan dropdown untuk memilih warna histogram.

✅ Jawaban Latihan 1

# Bagian UI — tambahkan di sidebarPanel:
selectInput(
  inputId  = "warna",
  label    = "Warna:",
  choices  = c("steelblue", "tomato", "forestgreen"),
  selected = "steelblue"
)

# Bagian Server — ubah col di hist():
col = input$warna,

Latihan 2 — Mudah: Tambahkan Output Teks Mean dan Median

Lanjutkan dari Latihan 1. Tambahkan textOutput("statistik") di UI dan renderText() di server yang menampilkan nilai mean dan median variabel yang dipilih.

✅ Jawaban Latihan 2

# UI — di dalam mainPanel():
plotOutput("histogram"),
textOutput("statistik")

# Server:
output$statistik <- renderText({
  x <- mtcars[[input$variabel]]
  paste0(
    "Mean: ",    round(mean(x), 2),
    " | Median: ", round(median(x), 2)
  )
})

Latihan 3 — Sedang: Scatter Plot dengan Pilihan Kelompok Warna

Modifikasi aplikasi Scatter Plot (Bagian 5) agar titik-titik diwarnai berdasarkan variabel kategori yang dipilih pengguna (misalnya cyl atau gear).

✅ Jawaban Latihan 3

# Di selectInput untuk grup:
choices = var_kategori

# Di renderPlot, untuk mengakses variabel grup:
grp <- as.factor(mtcars[[input$grp]])

as.factor() mengubah kolom numerik seperti cyl menjadi kategori, sehingga setiap nilai unik mendapat warna berbeda. as.integer(grp) mengubah faktor menjadi angka untuk digunakan sebagai indeks warna.

Ringkasan

Fungsi Shiny	Tipe	Keterangan
`selectInput()`	Input	Dropdown pilihan
`sliderInput()`	Input	Slider angka
`checkboxInput()`	Input	Kotak centang TRUE/FALSE
`reactive()`	Reaktif	Kalkulasi yang diperbarui otomatis
`renderPlot()`	Output	Menghasilkan grafik
`renderPrint()`	Output	Menghasilkan teks/ringkasan
`renderText()`	Output	Menghasilkan teks sederhana
`renderDT()`	Output	Menghasilkan tabel interaktif