shinydashboard の対話型要素

shinydashboard で作るダッシュボード

Png Kee Seng

Researcher

シナリオ

ロンドンの旅行代理店に勤務しています。
旅行者には宿泊先が必要です。
私たちは何ができるでしょうか。

ロンドンのグラフィック

価格帯ごとの掲載件数
個室の割合
平均価格
各種チャート
データテーブル
ロンドンの地図

¹ Image by Freepik

ダッシュボードのスケッチ

ダッシュボードのラフスケッチ。

ダッシュボード作成: 枠組みを設定

希望のタイトルとサイドバーのボタンで空の shinydashboard を用意し、ワイヤーフレームを実施。

header <- dashboardHeader(
  title = "Home rental listings")
sidebar <- dashboardSidebar()
body <- dashboardBody()
ui <- dashboardPage(header, 
                    sidebar, 
                    body)

server <- function(input, output) {}

shinyApp(ui, server)

ダッシュボード作成: ValueBox を追加

ワイヤーフレームに valueBox を追加。

body で:

fluidRow(
    valueBoxOutput(outputId = "count"),
    valueBoxOutput(outputId = "prop"),
    valueBoxOutput(outputId = "avg"))

server で:

output$count <- renderValueBox({
    valueBox(..., icon = ...)})
output$prop <- renderValueBox(...)
...

ダッシュボード作成: コントロールを追加

入力（ユーザー用のコントロール）を追加。

body で:

box(
    side = "right", ...,
    sliderInput(inputId = "range",
        label = "価格帯を選択:",
        min = 0,
        max = 25000,
        value = c(0,25000))
        ))

server を更新し、input$range[1] と input$range[2] を使用

ダッシュボード作成: 対話型プロットを追加

plotly による対話型プロットを追加。

body で:

plotlyOutput("plots", 
    height = 500, 
    width = 600)

server で:

output$plots <- renderPlotly({
      ...
  })

ダッシュボード作成: 別プロットを追加

ドロップダウンで同一ページに2つ目のプロットを追加。

body で:

selectInput(inputId = "select", 
    label = "グループを選択:", 
    choices = c("Neighbourhood", 
            "Room Type"))

server で:

output$plots <- renderPlotly({
    if (input$select == ...){plot1}
    else if(input$select == ...){plot2}
  })

ダッシュボード作成: 説明とタブを追加

このダッシュボードの説明文を追加。

body で:

box(side = "right", ...,
    title = "ロンドンへようこそ！", 
    "...")

body を更新:

tabBox(id = "tabset", ...,
    tabPanel("Charts", ...),
    tabPanel("Data table", ...)

ダッシュボード作成: 対話型テーブルを追加

dataTable 関数で対話型テーブルを追加。

shiny の関数を使えます。

body で:

dataTableOutput("table")

server で:

output$table <- 
    renderDataTable(listings)

ダッシュボード作成: 対話型マップを追加

ダッシュボードに leaflet マップを追加。

sidebar で:

sidebarMenu(
    menuItem("Charts", ...),
    menuItem("Map", ...))

body で:

leafletOutput("map",...)

server で:

output$map <- renderLeaflet(map)

Ayo berlatih!

shinydashboard で作るダッシュボード