Menyusun Dashboard Menggunakan R

Dashboard merupakan salah satu perangkat visualisasi yang dapat digunakan untuk manayangkan ringkasan data, analisa,atau indikator tertentu. Penyusunan dashboard menggunakan R software dapat dilakukan dengan beberapa cara, di antaranya adalah dengan menggunakan:

• flexdashboard

• R shinydashboard

• R shiny

Modul ini akan membahas secara ringkas tentang penyusunan dashboard dengan beberapa pendekatan tersebut dengan menggunakan R Studio.

flexdashboard

Package flexdashboard memungkinkan kita menyusun dashboard menggunakan file berbasis R markdown. Berikut adalah langkah-langkahnya. Pertama, kita perlu install terlebih dulu package flexdashboard tersebut.

install.packages("flexdashboard")

Setelah itu, buatlah file baru dengan cara mengakses menu File > New File > R Markdown > From Template > Flex Dashboard , seperti pada gambar di bawah ini.

Selanjutnya, layout dashboard dapat diatur dengan ketentuan sebagai berikut:

• Gunakan # untuk membuat page

• Gunakan ## untuk membuat tampilan kolom

• Gunakan ### untuk membuat tampilan baris

Ilustrasi

Program di atas akan menghasilkan tampilan dengan 2 page, dimana page pertama akan terdiri dari 2 kolom. Kolom pertama hanya berisi Chart A, sedangkan kolom kedua berisi Chart B dan Chart C yang berurut menurut baris. Page 2 akan kosong, karena belum diberikan isi apapun.

Di dalam setiap subheader Chart A, B, dan C, kita dapat menuliskan R code chunk yang akan muncul pada bagian tersebut masing-masing. Anda dapat mencoba menuliskan beberapa contoh syntax pada modul https://rpubs.com/r_anisa/interactive-plot-using-r ke dalam code chunk di Chart A, B, atau C, contohnya seperti hasil berikut ini.

Penjelasan lengkap tentang flexdashboard dapat dipelajari lebih lanjut di Grolemund (2016).

Pengenalan R Shiny

Struktur R shiny terdiri dari tiga komponen utama, yaitu:

• user interface (UI), ini merupakan bagian dimana kita bisa mengatur tampilan dari app yang kita bangun.

• server, ini merupakan bagian untuk menjalankan fungsi-fungsi yang ada di dalam app.

• shinyApp, ini merupakan bagian yang menghubungkan antara UI dengan server.

R Shiny biasa digunakan untuk membangun aplikasi web, berikut adalah contoh sederhananya.

install.packages("shiny")
library(shiny)
runExample("01_hello")

Pada bagian bawah tampilan contoh tersebut, Anda dapat melihat code yang digunakan untuk membangun app tersebut. Objek ui berikut berisi pengaturan layout yang ingin ditampilkan. Terlihat bahwa interface terdiri dari tiga panel, yaitu:

• Judul, diisi dengan tulisan “Hello Shiny!”

• Side bar, diisi dengan slide bar untuk menginput lebar kelas histogram (bins), dengan batas bawah 1 dan batas nilai maksimum 50, serta diset dengan nilai awal 30.

• Main panel, digunakan untuk menampilkan output berupa histogram.

# Define UI for app that draws a histogram ----
ui <- fluidPage(

  # App title ----
  titlePanel("Hello Shiny!"),

  # Sidebar layout with input and output definitions ----
  sidebarLayout(

    # Sidebar panel for inputs ----
    sidebarPanel(

      # Input: Slider for the number of bins ----
      sliderInput(inputId = "bins",
                  label = "Number of bins:",
                  min = 1,
                  max = 50,
                  value = 30)

    ),

    # Main panel for displaying outputs ----
    mainPanel(

      # Output: Histogram ----
      plotOutput(outputId = "distPlot")

    )
  )
)

Server menjalankan fungsi untuk menghasilkan output histogram yang ditampilkan pada ui. Fungsi renderPlot() digunakan untuk menghasilkan plot berdasarkan input yang diberikan pada menu slidebar di bagian ui.

# Define server logic required to draw a histogram ----
server <- function(input, output) {

  # Histogram of the Old Faithful Geyser Data ----
  # with requested number of bins
  # This expression that generates a histogram is wrapped in a call
  # to renderPlot to indicate that:
  #
  # 1. It is "reactive" and therefore should be automatically
  #    re-executed when inputs (input$bins) change
  # 2. Its output type is a plot
  output$distPlot <- renderPlot({

    x    <- faithful$waiting
    bins <- seq(min(x), max(x), length.out = input$bins + 1)

    hist(x, breaks = bins, col = "#75AADB", border = "white",
         xlab = "Waiting time to next eruption (in mins)",
         main = "Histogram of waiting times")

    })

}

Pada bagian akhir, fungsi shinyApp() akan membuat object Shiny app dari pasangan object ui dan server yang telah dibuat sebelumnya.

# Create Shiny app ----
shinyApp(ui = ui, server = server)

shinydashboard

Package shinydashboard dapat digunakan untuk menyusun dashboard menggunakan R shiny. Berikut adalah contohnya.

install.packages("shinydashboard")
library(shinydashboard)

ui <- dashboardPage(
  dashboardHeader(title = "Basic dashboard"),
  dashboardSidebar(),
  dashboardBody(
    # Boxes need to be put in a row (or column)
    fluidRow(
      box(plotOutput("plot1", height = 250)),

      box(
        title = "Controls",
        sliderInput("slider", "Number of observations:", 1, 100, 50)
      )
    )
  )
)

server <- function(input, output) {
  set.seed(122)
  histdata <- rnorm(500)

  output$plot1 <- renderPlot({
    data <- histdata[seq_len(input$slider)]
    hist(data)
  })
}

shinyApp(ui, server)

Program di atas akan menghasilkan dashboard sederhana seperti berikut ini.

Beberapa contoh dashboard dapat dilihat di: https://rstudio.github.io/shinydashboard/examples.html .

Modifikasi flexdashboard dengan shiny

Kita dapat memodifikasi dashboard yang disusun menggunakan flexdashboard dengan menambahkan argumen runtime: shiny pada bagian header YAML. Hal ini memungkinkan kita menjalankan konten reaktif pada dashboard menggunakan package shiny.

Perhatikan contoh berikut ini (Sumber: Berishvili, 2020).

Template dashboard yang digunakan dibuat oleh Berishvili (2020) dan dapat diakses di link ini.

Sebagai ilustrasi, akan digunakan data kartu kredit yang diambil dari Kaggle, data tersedia di link ini.

• Mengimpor data

Tuliskan code berikut setelah code chunk dengan argumen {r data}.

data<-read.csv("https://github.com/raoy/data/raw/master/BankChurners.csv")

Categorical.Variables = c("Gender", "Education_Level", "Marital_Status")

Numeric.Variables = c("Customer_Age", "Total_Trans_Ct", "Credit_Limit")

• Membuat user input (widgets)

Untuk membuat widgets yang berfungsi sebagai user input, silahkan Anda mencoba menuliskan code chunk berikut pada bagian column pertama.

selectInput("categorical_variable", label = "Select Categorical Variable:", choices = Categorical.Variables)

selectInput("numeric_variable", label = "Select Numeric Variable:", choices = Numeric.Variables)

Syntax tersebut akan menghasilkan tampilan seperti di bawah ini.

Terdapat berbagai jenis input yang tersedia dalam package shiny, di antaranya adalah:

• actionButton()

• checkboxInput()

• dataInput()

• numericInput()

• radioButtons()

• selectInput()

• sliderInput()

• textInput()

• Membuat Output Reactive

Kegunaan shiny adalah rectivity yang memungkinkan pengguna memperoleh output yang updated sesuai dengan input yang dapat diubah-ubah. Caranya adalah dengan menggunakan berbagai fungsi render yang tersedia pada package shiny, diantaranya adalah:

• renderPrint()

• renderText()

• renderTable()

• renderDataTable()

• renderPlot()

• renderImage()

• renderUI()

Pada ilustrasi ini, kita akan membuat dashboard menggunakan grafik dari package plotly yang terdiri dari boxplot, bar chart, dan histogram. Dengan menggunakan fungsi renderPlotly(), grafik yang dihasilkan akan secara otomatis diupdate sesuai dengan input dari user.

Silahkan tuliskan r code chunk berikut pada bagian Chart A.

renderPlotly({
   plot_ly(data,
              x = ~data[[input$numeric_variable]],
              color = ~data[[input$categorical_variable]],
              colors = "Paired",
              type = "box") %>%
  layout(title = "",
         xaxis = list(title = "" ,
                      zeroline = FALSE))
})

Selanjutnya, tuliskan R code chunk berikut pada bagian Chart B.

renderPlotly({
  data %>%
    count(var = data[[input$categorical_variable]], name = "count") %>%
    plot_ly( x = ~var, y = ~ count, type = "bar", marker = list(color = '#008ae6',
                           line = list(color = '#008ae6', width = 2)), hoverinfo = "x+y") %>%
    add_text(text = ~paste0( " (",   scales::percent(count/sum(count)),")"), 
           textposition = "bottom", 
           textfont = list(size = 12, color = "white"), 
           showlegend = FALSE) %>%
    layout(xaxis = list(title = ""), yaxis = list(title = ""))
    
})

Terakhir, silahkan tuliskan code berikut pada bagian Chart C.

renderPlotly({
  plot_ly(x = data[[input$numeric_variable]], type = "histogram",  marker = list(color = "#008ae6",
                            line = list(color = "darkgray",
                                        width = 1)))
})

Program di atas akan menghasilkan dashboard seperti di bawah ini.

Sebagai perbandingan, dengan mengikuti tahapan pada ilustrasi di atas, seharusnya Anda memiliki code akhir seperti pada contoh ini, dan dashboard seperti pada link ini.

REFERENCES

Berishvili, N. (2020, December 31). Create an interactive dashboard with shiny, Flexdashboard, and Plotly. Medium. https://towardsdatascience.com/create-an-interactive-dashboard-with-shiny-flexdashboard-and-plotly-b1f025aebc9c

Grolemund, G. (2016, June 8). Introducing flexdashboards. RStudio | Open source & professional software for data science teams - RStudio. https://www.rstudio.com/resources/webinars/introducing-flexdashboards/

R Studio inc. (2020). The basic parts of a shiny app. Shiny. https://shiny.rstudio.com/articles/basics.html