
Interactive dashboards empower users to gain valuable insight into key metrics and make data-driven decisions. Interactivity helps optimize the use of dashboard space and updates visualizations automatically as the user changes inputs.
Interactive dashboards with R (Flexdashboard + Shiny)
Flexdashboard is an R markdown file, which can be either static or dynamic. By combining flexdashboard with Shiny, you can write dynamic web applications without any knowledge of HTML, CSS, or JavaScript, using only R and R markdown.
In this article, we walk through the simple steps of building your first flexdashboard Shiny app. We will make this app as simple as possible with two user inputs and three reactive outputs. Once you understand the basics, you can use the same techniques to build more advanced dashboards.
Before we start, make sure you have installed the following libraries: shiny, flexdashboard,
plotly,
and dplyr.
Step 1. Create Flexdashboard Layout
Initialize a Flexdashboard from R Studio using File > New File > R markdown > From Template > Flex Dashboard, save, and knit the document.
This creates a static, two-column dashboard with one chart on the left and two on the right:

Step 2. Customize the Flexdashboard

- Add runtime: shiny to the YAML header at the top of the document. This specifies that the Shiny package will be used to handle reactive content.
2. Load the libraries flexdashboard, shiny, dplyr, and plotly.
3. Add a new code chunk
{r data} where we will load and work with the data.
4. Add sidebar attribute to the first column of the dashboard. The default width of the sidebar is 250 pixels; let's change it to 200. Later, we will add user input controls to the sidebar.
5. Slightly change the layout dimensions by making each column width equal to 400 pixels.
If you did these steps your layout should look like below. Otherwise, you can copy-paste the following [template](https://gist.github.com/nataberishvili/127e2849cf32463bee9e1728647632f5).

## Step 3. Retrieve and Prepare the Data
For this example, we will use a subset of the [Credit Card Customers](https://www.kaggle.com/sakshigoyal7/credit-card-customers) dataset from Kaggle to explore customer profiles with exploratory data analysis. Let's load and prepare the **** data under the code chunk of the dashboard.
<script src="https://gist.github.com/nataberishvili/2fee596b417a2bb9586b6e86e9a69dcd.js"></script>
Remember to store both the dashboard and the data in the same working directory!
## Step 4. Create User Inputs (Widgets)
User inputs are the key components of a dynamic dashboard, driving functionality, user experience, and end results.
_**SelectInput**_ widget creates a simple dropdown menu. In _SelectInput_ widget we specify three arguments: (1) **name**: invisible to user, which we use to access widget's value, (2) **label:** displayed above the dropdown menu, and (3) **choices**: list of values for the user to select.
We will create two _**SelectInput**_ widgets in the dashboard's sidebar, allowing the user to select a categorical variable and a numeric variable.
<script src="https://gist.github.com/nataberishvili/3ce83e74ec7e1981a6d85cef16d41987.js"></script>
The dashboard should look like this when rendered:

## Step 5. Create Reactive Outputs - Dynamic Content
Reactivity is what makes Shiny apps responsive, automatically updating whenever the user makes a change. To make an output reactive, we use Shiny's render functions. Changes to inputs automatically render code and update outputs. Shiny offers a wide variety of render functions:
renderPlot – renders standard R plots renderLeaflet – renders leaflet output renderDT – renders DT DataTables renderPlotly – renders plotly
In this project, we will create _Plotly_ charts: _(1) boxplot, (2) bar chart, and (3) histogram._ We use _renderPlotly_ to insert _Plotly_ charts_._ The charts enclosed in the function renderPlotly will automatically update each time the user changes the corresponding input value.
- The boxplot will react to a change in either widget.
<script src="https://gist.github.com/nataberishvili/11f8c485983b6cf95e38c96302135dfa.js"></script>
- The bar chart will react to a change in the categorical variable widget.
<script src="https://gist.github.com/nataberishvili/89d6db88c3b479e65595daf00e217981.js"></script>
- The histogram will react to a change in the numeric variable widget.
<script src="https://gist.github.com/nataberishvili/94017f9b6531d7874f26a0e722e890b8.js"></script> The code creates the app below:

You can find the final code here, and the finished dashboard is available at the following link.
Summary
In this post, we created your first interactive dashboard with flexdashboard and Shiny. Now you have the tools to creatively experiment and design your own dashboard. I hope you enjoyed the post. All suggestions and feedback are welcome and appreciated.
Thank you!