Create Outstanding R Shiny Dashboards with the semantic.dashboard Package

Posted by Dominik Krzemiński

 11 June, 2018

2020 Update: semantic.dashboard is available on the Comprehensive R Archive Network (CRAN). You can make use of it simply by running install.packages(“semantic.dashboard”). You might also be interested in this new tutorial on how to build a high quality Shiny dashboard with semantic.dashboard.

tl;dr

semantic.dashboard is an alternative to shinydashboard and makes use of Semantic UI. The package allows developers to easily introduce Semantic UI components into R Shiny apps. Use it by running install.packages(“semantic.dashboard”).

How to Make R Shiny More Beautiful

R Shiny is an excellent tool for interactive data visualizations. However, fitting a large number of graphs onto just one Shiny page may prove to be a challenge. In our experience, virtually all projects with new KPIs being introduced along the way result in inadequate and not readable final reports. 

Dashboards provide a solution. They allow the developer to intuitively structure their reports by breaking them down into sections, panels and tabs. This makes it much easier for the final user to navigate through the data.

shinydashboard is one available solution and provides decent features. However, over time it may turn out that the apps based around this tool all look alike. In this tutorial, I will show you how to take advantage of the semantic.dashboard package. It is an alternative to shinydashboard which makes use of Semantic UI. The package allows the developer to introduce attractive Semantic components into the app and select from many available themes.

Before we start: if you don’t have semantic.dashboard installed yet, visit this GitHub page for detailed instructions.

How to start?

Begin by creating an empty dashboard:

library(shiny)
library(semantic.dashboard)

ui <- dashboardPage(
  dashboardHeader(),
  dashboardSidebar(),
  dashboardBody()
)

server <- shinyServer(function(input, output, session) {
  
})

shinyApp(ui, server)

For comparison you can check what happens if you change library(semantic.dashboard) to library(shinydashboard).

It should look similar to this:

With almost no effort we have created the skeleton for our first semantic.dashboard app.

Now it is time to discuss basic components of a dashboard. Each dashboardPage consists of three elements:

• header,
• sidebar,
• body.

Currently our header is quite boring, so let’s add a title and change its color:

dashboardHeader(color = "blue", title = "Dashboard Demo", inverted = TRUE)

We don’t need a sidebar to be this wide. We also would like to to make it more functional, so let’s add two menu elements:

dashboardSidebar(
    size = "thin", color = "teal",
    sidebarMenu(
      menuItem(tabName = "main", "Main"),
      menuItem(tabName = "extra", "Extra")
    )
  )

This is the result we should get:

Not bad! We can do even better by adding some icons to our menuItems. Can you do it yourself?

Hint! Use semantic.dashboard documentation, eg. by typing ?menuItem in RStudio console.

Adding content

In this section we will start filling our app with some content. We will use a popular dataset “mtcars”, extracted from the 1974 Motor Trend US magazine, which comprises a range of parameters for 32 old-school automobiles.

First, we need to make sure that we know how to change the content of our body using tabs. Look at the following piece of code:

dashboardBody(
  tabItems(
    selected = 1,
    tabItem(
      tabName = "main",
      fluidRow(
        h1("main")
      )
    ),
    tabItem(
      tabName = "extra",
      fluidRow(
        h1("extra")
      )
    )
  )
)

We created two tabItems with tabNames exactly the same as menuItems. The selected parameters of tabItems tell us which tabItem should be selected and displayed after running the app.

Equipped with this knowledge, we can implement something functional. We start with creating a simple plot describing the relationship between the car’s gearbox type and their miles per gallon parameter.

In the shinyServer function, we call:

  data("mtcars")
  mtcars$am <- factor(mtcars$am,levels=c(0,1),
                      labels=c("Automatic","Manual"))
  output$boxplot1 <- renderPlot({
    ggplot(mtcars, aes(x = am, y = mpg)) +
       geom_boxplot(fill = semantic_palette[["green"]]) + 
       xlab("gearbox") + ylab("Miles per gallon")
  })

Since we are using ggplot2 do not forget to attach this package at the beginning of the script.

We are going to make another plot from this dataset, so let’s divide the main page into two sections. We can exchange content of fluidRow function of our first tabItem by:

box(width = 8,
    title = "Graph 1",
    color = "green", ribbon = TRUE, title_side = "top right",
    column(8,
      plotOutput("boxplot1")
    )
),
box(width = 8,
    title = "Graph 2",
    color = "red", ribbon = TRUE, title_side = "top right"
)

This is a good moment to make sure that your app is running. If the answer is yes, proceed to the next section. In case it’s not, verify if you followed all the previous steps.

Interactive items

To add a more interactive plot into our dashboards we can use “plotly”. In this example we will use it to present the relation between the weight of a car and miles per gallon. I decided for a point plot here since it allows for providing some additional information. I mark the number of cylinders by color and the quarter mile time by the size of the dots. Here’s the the code:

colscale <- c(semantic_palette[["red"]], semantic_palette[["green"]], semantic_palette[["blue"]])
output$dotplot1 <- renderPlotly({
  ggplotly(ggplot(mtcars, aes(wt, mpg))
           + geom_point(aes(colour=factor(cyl), size = qsec))
           + scale_colour_manual(values = colscale)
           )
})

Note that we used semantic_palette here for graph colors in order to stay consistent with the SemanticUI layout of the app.

To insert it into the dashboard, we add by analogy to the second box:

box(width = 8,
    title = "Graph 2",
    color = "red", ribbon = TRUE, title_side = "top right",
    column(width = 8,
      plotlyOutput("dotplot1")
    )
)

That’s what our main page looks right now:

We can now move on to the next tab to provide the user with additional information.

For instance, we can add a complete list of cars properties in the “Extra” tab for the curious automobile enthusiast. Let’s give them that chance. To do that, we will use the DT package to render the table on the server side:

output$gstatstable <- DT::renderDataTable(mtcars)

and display it in the second tab:

  tabItem(
    tabName = "extra",
    fluidRow(
      dataTableOutput("carstable")
    )
  )

I’m pretty satisfied with what we have achieved so far…

However, I changed my mind at this point and decided to modify the theme of this dashboard. I reviewed my options on Semantic Forest website and picked the cerulean theme. It is simple to change the theme now, as it requires changing just one parameter in the dashboardPage function.

dashboardPage(
  header, sidebar, body,
  theme = "cerulean")

Let’s see how this app works:

Full code

This is it! If you got to this point, it means that you created your first dashboard with semantic.dashboard package. For training, I encourage you to customize it by adding more tabs with new interactive plots. If you missed a step, you can review the complete code for the dashboard below:

library(shiny)
library(semantic.dashboard)
library(ggplot2)
library(plotly)
library(DT)

ui <- dashboardPage(
  dashboardHeader(color = "blue",title = "Dashboard Demo", inverted = TRUE),
  dashboardSidebar(
    size = "thin", color = "teal",
    sidebarMenu(
      menuItem(tabName = "main", "Main", icon = icon("car")),
      menuItem(tabName = "extra", "Extra", icon = icon("table"))
    )
  ),
  dashboardBody(
    tabItems(
      selected = 1,
      tabItem(
        tabName = "main",
        fluidRow(
          box(width = 8,
              title = "Graph 1",
              color = "green", ribbon = TRUE, title_side = "top right",
              column(width = 8,
                plotOutput("boxplot1")
              )
          ),
          box(width = 8,
              title = "Graph 2",
              color = "red", ribbon = TRUE, title_side = "top right",
              column(width = 8,
                plotlyOutput("dotplot1")
              )
          )
        )
      ),
      tabItem(
        tabName = "extra",
        fluidRow(
          dataTableOutput("carstable")
        )
      )
    )
  ), theme = "cerulean"
)

server <- shinyServer(function(input, output, session) {
  data("mtcars")
  colscale <- c(semantic_palette[["red"]], semantic_palette[["green"]], semantic_palette[["blue"]])
  mtcars$am <- factor(mtcars$am,levels=c(0,1),
                      labels=c("Automatic","Manual"))
  output$boxplot1 <- renderPlot({
    ggplot(mtcars, aes(x = am, y = mpg)) +
       geom_boxplot(fill = semantic_palette[["green"]]) + 
       xlab("gearbox") + ylab("Miles per gallon")
  })

  output$dotplot1 <- renderPlotly({
    ggplotly(ggplot(mtcars, aes(wt, mpg))
             + geom_point(aes(colour=factor(cyl), size = qsec))
             + scale_colour_manual(values = colscale)
             )
  })
  output$carstable <- renderDataTable(mtcars)
})

shinyApp(ui, server)

Resources:

• semantic.dashboard GitHub page
• shiny.semantic GitHub page

Appsilon is an RStudio Full Certified Partner, we would be happy to answer your questions about Shiny dashboards and other topics related to R Shiny, Data Analytics, and Machine Learning. We’re experts in this area, and we’d love to chat with you.

Follow Appsilon Data Science on Social Media

• Follow @Appsilon on Twitter
• Follow Appsilon on LinkedIn
• Try out our other R Shiny open source packages
• Sign up for the Data for Good newsletter

Reach out to Appsilon

Marek Rogala

CTO

*By completing the form, I agree to receive commercial information by email from Appsilon. I can withdraw my consent at any time. Privacy Policy

Sign up for newsletter