How to Make Impressive Shiny Dashboards in Under 10 Minutes with semantic.dashboard

Introducing semantic.dashboard

Dashboards allow you to structure reports intuitively and break them down into easy-to-read chunks. As a result, end-users can navigate and explore data much easier than with traditional reports.

The shinydashboard R package has been out for ages, and it is a good option with a decent amount of features. However, apps built with it tend to look alike – especially if you’re using it daily on multiple projects. A lot of simplistic, aesthetically identical dashboards can leave a bad impression on clients and stakeholders. That’s where semantic.dashboard comes into play.

The semantic.dashboard package is an open-source alternative to shinydashboard created by Appsilon. It allows you to include Fomantic UI components to R Shiny apps without breaking a sweat. 

For example, let’s take a look at two identical applications – the first built with shinydashboard, and the second one with semantic.dashboard:

Image 1 – Dashboard built with shinydashboard

Image 2 – Dashboard built with semantic.dashboard

Both look good – that’s guaranteed, but the one built with semantic.dashboard doesn’t look as generic. You’ll create a somewhat simplified version of this dashboard today.

You can download the source code of this article here.

Want to learn more about semantic.dashboard? Visit the official Github page. Feel free to leave us a star!

Navigate to a section:

• semantic.dashboard Installation and Your First Dashboard
• Build a Fully Interactive Dashboard
• Conclusion

To learn more about Appsilon’s open-source packages, see our new Open-Source Landing Page: 

Appsilon’s shiny.tools landing page for our open source packages.

Installation and Your First Dashboard

The semantic.dashboard package is available on CRAN (Comprehensive R Archive Network). To install it, execute the following line from the R console:

install.packages("semantic.dashboard")

You can now proceed by creating an empty dashboard:

library(shiny)
library(semantic.dashboard)

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

server <- function(input, output) { }

shinyApp(ui, server)

Here’s the corresponding output:

Image 3 – Empty shiny.semantic dashboard

The semantic.dashboard‘s app UI is made of a dashboardPage, which is further split into three elements:

1. Header – dashboardHeader
2. Sidebar – dashboardSidebar
3. Body – dashboardBody

This structure is identical as with shinydashboard – making things easier to learn. Let’s see how to tweak all of them.

There are a lot of things you can do with dashboardHeader. For example, you can change the color by specifying a value for the color parameter. You could also include a logo by setting logo_path and logo_allign parameters. If you want to remove the header, specify disabled = TRUE.

Here’s how to change the color from white to something less boring:

dashboardHeader(color = "blue", inverted = TRUE)

The inverted parameter sets the color to the header background instead of the header text.

Here’s the corresponding output:

Image 4 – Styling the header of the semantic dashboard

Next, let’s see how to add elements to the dashboardSidebar. You can specify the sidebar size by tweaking the side parameter (left by default). You can also tweak the size, which you’ll see how in a minute. Finally, you can altogether disable the sidebar by setting disable = TRUE.

Here’s how to make the sidebar wider:

dashboardSidebar(
  size = "wide",
  sidebarMenu(
    menuItem(tabName = "panel1", text = "Panel 1"),
    menuItem(tabName = "panel2", text = "Panel 2")
  )
)

Here are the results:

Image 5 – Styling the sidebar of the semantic dashboard

That adds the elements to the sidebar, but how can you display different content when the tab is clicked? That’s where tweaks to dashboardBody come into play.

Let’s add tabItems and two tabs, corresponding to two options in the sidebar. The first option is selected by default, as specified with the selected parameter. Only a single text box should be visible on both panels, indicating which panel you’re currently on. Here’s the code snippet:

dashboardBody(
  tabItems(
    selected = 1,
    tabItem(
      tabName = "panel1",
      textOutput(outputId = "text1")
    ),
    tabItem(
      tabName = "panel2",
      textOutput(outputId = "text2")
    )
  )
)

To make this work, you’ll need to make some tweaks to the server function. You’ll have to render text on the corresponding outputs. Here’s how:

server <- function(input, output) {
  output$text1 <- renderText("This is Panel 1")
  output$text2 <- renderText("This is Panel 2")
}

Your dashboard should look like this now:

Image 6 – Initial dashboard with two panels

Now you know the basics of semantic.dashboard. Let’s see how to take it a step further and display an interactive data-driven map.

Build a Fully Interactive Dashboard

R comes with a lot of built-in datasets, quakes being one of them. It shows geolocations of 1000 seismic events that occurred near Fiji since 1964. Here’s what the first couple of rows look like:

Image 7 – First couple of rows of the Quakes dataset

You’ll now see how to develop a semantic dashboard with the following tabs:

• Interactive map – display geographical area near Fiji with markers representing the magnitude of the seismic event
• Table – shows the source dataset formatted as a table

You’ll create the interactive map with the leaflet package, so make sure to have it installed:

install.packages("leaflet")

The UI follows the pattern discussed in the previous section – there’s a header, sidebar, and a body. The header will be empty this time. Most of the differences are in the dashboardBody. The structure should look familiar, but there are two new functions:

• leafletOutput() – used to display the interactive map 
• dataTableOutput() – used to display the data table 

To make the map as large as possible, you can set some inline CSS styles. In the code below, the height is modified, so the map always takes almost the entire screen height (- 80 pixels as a margin).

Here’s the code for the UI:

library(shiny)
library(shiny.semantic)
library(shinydashboard)
library(leaflet)

ui <- dashboardPage(
  dashboardHeader(),
  dashboardSidebar(
    size = "wide",
    sidebarMenu(
      menuItem(tabName = "map", text = "Map", icon = icon("map")),
      menuItem(tabName = "table", text = "Table", icon = icon("table"))
    )
  ),
  dashboardBody(
    tabItems(
      selected = 1,
      tabItem(
        tabName = "map",
        tags$style(type = "text/css", "#map {height: calc(100vh - 80px) !important;}"),
        leafletOutput("map")
      ),
      tabItem(
        tabName = "table",
        fluidRow(
          h1("Quakes Table"),
          semantic_DTOutput("quakesTable")
        )
      )
    )
  )
)

In order to make this dashboard work, you’ll have to modify the server function. Inside it lies the code for rendering both the map and the table. The coordinates for the map were chosen arbitrarily, after a quick Google search. 

The magnitude of the seismic activity determines the size of a marker. Every marker is clickable – showing the magnitude, depth in kilometers, and the number of stations that reported the seismic activity.

Here’s the code for the server:

server <- function(input, output) {
  output$map <- renderLeaflet({ leaflet() %>%
      setView(lng = 179.3355929, lat = -20.4428959, zoom = 6.5) %>%
      addProviderTiles("Esri.WorldStreetMap") %>%
      addCircles(
        data = quakes,
        radius = sqrt(10^quakes$mag) * 30,
        color = "#000000",
        fillColor = "#ffffff",
        fillOpacity = 0.5,
        popup = paste0(
          "Magnitude: ", quakes$mag, "
",
          "Depth (km): ", quakes$depth, "
",
          "Num. stations reporting: ", quakes$stations
        )
      )
  })
  
  output$quakesTable <- DT::renderDataTable(
    semantic_DT(quakes)
  )
}

And here’s the final dashboard:

Image 8 – Final Quakes dashboard

Conclusion

In this short hands-on guide, you’ve learned how to develop simple and aesthetically-pleasing Shiny dashboards. You’ve learned what semantic.dashboard is, what it brings to the table, and how to pair it with other libraries to produce stunning and intuitive dashboards. You can learn more about semantic.dashboard by visiting the links below.

Looking for inspiration? Check out component demos and complete dashboards here.

• Create outstanding R Shiny dashboards with the semantic.dashboard package
• Video Tutorial: Create and Customize a Simple Shiny Dashboard
• Why is My Dashboard Ugly? A Crash Course in R Shiny UI
• Make R Shiny Dashboards Faster with updateInput, CSS, and JavaScript
• Video Tutorial: How to Scale Shiny Dashboards

Appsilon is hiring globally! We are primarily seeking an Engineering Manager who can lead a team of 6-8 ambitious software engineers. See our Careers page for all new openings, including openings for a Project Manager and Community Manager.

Article How to Make Impressive Shiny Dashboards in Under 10 Minutes with semantic.dashboard comes from Appsilon | End­ to­ End Data Science Solutions.