Interactive elements in a shinydashboard
1. Interactive elements in a shinydashboard
So far, we have learned to create interactive visualizations like plots using the plotly package, and maps using the leaflet package. Let's now create a shinydashboard with interactive elements. We will also better understand how interactive elements can enhance user experience.2. Scenario
Let’s first set up the scenario. Imagine we are working for a tour agency in London, and would like to set up a dashboard for tourists looking for a place to stay. What information will our customers want? We can show some numbers like the number of listings, the proportion of private rooms, and the average price. We can also show some charts. A data table will be helpful. Finally, we can include a map. To this end, let's use the same data seen in the previous videos.3. Sketch of the dashboard
Let’s begin with a sketch of the dashboard. Here is one possible way to arrange these elements. See that we have placed the value boxes at the top, since users are more likely to look there first. Let's also place charts and tables in tabs, so that users can switch between them. Users can interact with the dashboard through the controls. The map can be placed on another page.4. Building the dashboard: Setting up the frame
We can now build this dashboard. Any shinydashboard is comprised of three main components. First, the UI, which is made up of the header, sidebar and body. Next, the server which links inputs and outputs. Finally, shinyApp, which generates the shinydashboard.5. Building the dashboard: Adding ValueBox
We can add value boxes. This amounts to adding a valueboxoutput for each box in the body of the UI. We have to set the output values in the server function, where rendervaluebox ought to be used for each value box.6. Building the dashboard: Adding controls
Next, we can add controls to change the price ranges. To this end, in the body, we will need the sliderinput function. We will also need to update the server function, so that the numbers generated in the valueboxes are now dependent on input$range[1] and input$range[2]. As we will see later, creating helper functions will be useful in these interactions.7. Building the dashboard: Adding interactive plots
Now, we can add interactive plots, not unlike the plotly plots that were generated earlier. In a shinydashboard, this means we have to use plotlyoutput in the body. Similarly, in the server, we will need the renderplotly function which takes in a ggplot object.8. Building the dashboard: Adding another plot
We can further enhance this dashboard by adding another plot. To make it easier for users to toggle between different plots, we can use select input in the body. In the server, we can set some conditionals to implement this toggling action.9. Building the dashboard: Adding a description and adding tabs
Recall that we can also add text and tabs to a shinydashboard. To display the descriptive text, we can add a box in the body. To add tabs, we ought to update the body, so that each tab is defined by tabpanel, and are housed in tabbox.10. Building the dashboard: Adding interactive tables
Next, we can add interactive tables using shiny functions. Particularly, we can use the datatableoutput in the body. We then need to add renderdatatable in the server.11. Building the dashboard: Adding an interactive map
Finally, we can add an interactive map of London to a new dashboard page. To allow users to toggle to the new page, we can update the side bar menu. See that each page is added as a menu item. To get the interactive map in here, we can use the leaflet package. In the body, we will need leafletoutput. In the server, we will then need renderleaflet. There we have it. We now have a shinydashboard with interactive elements.12. Let's practice!
Now it's your turn to practice. Have fun!Create Your Free Account
or
By continuing, you accept our Terms of Use, our Privacy Policy and that your data is stored in the USA.