Hands On: Shiny Webapp¶

In this tutorial, we’ll create a simple Shiny webapp in Dataiku DSS. It’s a scatterplot on Haiku T-shirt sales data, related to the data used in the Tutorials.

Prerequisites¶

Some familiarity with R.

Technical Requirements¶

An R code environment with the shiny, dplyr, and magrittr packages.

Create Your Project¶

From the Dataiku homepage, click +New Project > DSS Tutorials > General Topics > Haiku Starter. Alternatively you can download the Orders_enriched_prepared dataset and import it into a new project.

Create a New Shiny Webapp¶

Create a new empty Shiny webapp:

In the Code menu of the top navigation bar, select Webapps.
Click + New Webapp > Code Webapp
Select Shiny.
Choose An empty Shiny app and provide a name for the webapp.

You will be redirected to the webapp editor.

The Webapp Editor¶

The Shiny webapp editor is divided into two panes.

The left pane allows you to see and edit the R code underlying the webapp, and contains two tabs:

A UI tab that contains the code that defines the layout of the webapp, defines and displays interactive widgets, and displays the visualization generated in the Server tab.
A Server tab that defines the server logic required to create the visualization. It accesses the data, uses the selections in the widgets on the UI tab as input, and creates the output to be displayed in the webapp.

The right pane gives you several views on the webapp.

The Preview tab allows you to write and test your code in the left pane while having immediate visual feedback in the right pane. At any time you can save or reload your current code by clicking on the Save button or the Reload Preview button.
The UI and Server tabs allow you to look at different portions of the code side-by-side in the left and right panes.
The Log is useful for troubleshooting problems.
Settings allows you to set the code environment for this webapp, if you want it to be different from the project default.

Coding the Webapp¶

While the code is split across two files, and there is no explicit code needed to listen for changes to the widget values, the concepts behind Shiny and Bokeh are very similar.

Let’s build the code behind the R Shiny webapp.

Defining the UI¶

In the UI tab, insert the following code to define the layout for the webapp.

library(shiny)

# Define UI for application that draws a histogram
shinyUI(fluidPage(

  # Application title
  titlePanel("Order total by Customer age"),

  # Webapp layout
  sidebarLayout(

    sidebarPanel(),

    # Show a plot of the generated distribution
    mainPanel(
      plotOutput("scatterPlot")
    )
  )
))

We are using the shiny R library

library(shiny)

The shinyUI() function indicates we’re building the UI for the webapp.
The fluidPage() function allows us to define a flexible layout for the page. It accepts several arguments that are the components of the page layout.

shinyUI(fluidPage(

titlePanel() creates a title at the top of the webapp

titlePanel("Order total by Customer age"),

sidebarLayout() defines a layout where widgets are defined in a sidebar panel, and the visualization is displayed in a main panel. For now, we’ll leave sidebarPanel() empty and just include the definition for the mainPanel(), which will show plotOutput() as defined by the scatterPlot element of the output object. We’ll add the interactivity later.

sidebarLayout(
  sidebarPanel(),
  mainPanel(
    plotOutput("scatterPlot")
  )
)

Defining the Visualization¶

Now, in the Server tab, insert the following code to define the output visualization.

library(shiny)
library(dplyr)
library(magrittr)
library(dataiku)

df <- dkuReadDataset("Orders_enriched_prepared", samplingMethod="head", nbRows=100000)

# Define server logic required to draw a plot
shinyServer(function(input, output) {

  # Expression that generates a plot. The expression is
  # wrapped in a call to renderPlot to indicate that:
  #
  #  1) It is "reactive" and therefore should re-execute automatically
  #     when inputs change
  #  2) Its output type is a plot

  output$scatterPlot <- renderPlot({

    # draw the scatterplot with the specified
    plot(as.numeric(df$age), as.numeric(df$total), ylab="Order total", xlab="Customer age")
  })
})

We are using the shiny, dplyr, magrittr, and dataiku R libraries

library(shiny)
library(dplyr)
library(magrittr)
library(dataiku)

To incorporate Dataiku datasets into Shiny webapps, simply use the dkuReadDataset() function to pull the dataset as an R data frame, as you would in an R recipe or notebook.

df <- dkuReadDataset("Orders_enriched_prepared", samplingMethod="head", nbRows=100000)

The shinyServer() function indicates we’re building the server logic for the webapp.

shinyServer(function(input, output) {

The renderPlot() function contains the code to generate the output visualization. It can also accept input from widgets in the UI code; we will add the interactivity in a moment. The results of renderPlot() are saved to the scatterPlot element of the output object, which is then displayed in the Preview.

output$scatterPlot <- renderPlot({
  plot(as.numeric(df$age), as.numeric(df$total), ylab="Order total", xlab="Customer age")
})

Save your work, and the preview should show the current (non-interactive) scatterplot.

../../../_images/shiny-noninteractive1.png

Adding Interactivity¶

The current scatterplot includes all orders from 2013-2017, across all types of t-shirts sold. Now let’s add the ability to select a subset of years, and a specific category of t-shirt. To do this, we need to make changes to the UI and Server code.

In the UI tab, change sidebarPanel() to the following.

sidebarPanel(
  sliderInput("year", "Order year", 2013, 2017, value = c(2013, 2017)),
  selectInput("category", "T-shirt category",
      c("All","White T-Shirt M","White T-Shirt F","Black T-Shirt M",
        "Black T-Shirt F","Hoodie","Tennis Shirt")
  )
),

The sliderInput() function creates a slider widget labeled “Order year”, that has values ranging from 2013 to 2017, and an initial state where all years are selected. The widget selection is saved to the year element of the input object.
The selectInput() function creates a dropdown selection widget labeled “T-shirt category”, that has values for each of the t-shirt categories plus “All”. The widget selection is saved to the category element of the input object.

In the Server tab, change renderPlot() as follows.

output$scatterPlot <- renderPlot({
    df %>% filter(order_date_year >= input$year[1]) %>%
           filter(order_date_year <= input$year[2]) -> selected
    if ( input$category != "All" ) {
        selected <- filter(selected,tshirt_category == input$category)
    }

  x  <- as.numeric(selected$age)
  y  <- as.numeric(selected$total)

  # draw the histogram with the specified number of bins
  plot(x, y, ylab="Order total", xlab="Customer age")
})

This takes the input data frame df and uses the widget selections to filter the data frame to only use records with the correct order year and t-shirt category. It then defines the x and y axes of the scatterplot to be the age and order total from the filtered data frame.

Save your work, refresh the preview, and it should now show the current interactive scatterplot.

Publish to a Dashboard¶

When you are done with editing, you can easily publish your webapp on a dashboard from the Actions dropdown at the top-right corner of the screen.

courses/advanced-code/web-apps/_img/publish-webapp.png

What’s Next¶

Using Dataiku DSS, you have created an interactive Shiny webapp and published it to a dashboard.

You can examine a version of this sample webapp on the Dataiku gallery.
See the Shiny gallery (external) for further inspiration on what is possible in Shiny webapps.
See the reference doc for further details on using Bokeh in Dataiku.