This is an example of using flex_dashboard presenting data, plot and story in general.
How to code flex dashboard
Column
First, you need YAML setting, similar to html_document or ioslide_presentation.
---
title: "Untitled"
output:
flexdashboard::flex_dashboard:
orientation: columns
vertical_layout: fill
---Secondly, you need to have a R code chunk to load flexdashboard library.
library(flexdashboard)
```
Then, if you need multi-page dashboard, for every page, you need to add name of the page, followed by a line of equal sign.
Example {data-icon="fa_signal"}
=======================================================================Within each page, you can design layout using Column specification.
This is based on orientation: column, and you are able to set column width for the first column.
Column {data-width=650}
-----------------------------------------------------------------------Within each column, you can choose to put one chart or multiple charts
Each chart is specified by ###.
### Chart 1
Some text and code.### Chart 2
Some other text and code.Then you can set the second column similar to how you would the first.
The sum of data-width of the two/multiple columns should be 1000.
Column {data-width=350}
-----------------------------------------------------------------------Similarly you can add one or multiple charts to the second column
### Chart 3
Some other text and code.Column
Here we present some other options for setting flex dashboard.
Setting orientation: row
By setting orientation: row in the YAML, you can have equal height of multiple rows, within each rows, charts will be displayed horizontally.
Setting tabset
A column can be changed to tabset if desired, that way the column will not be splitted into multiple charts, instead of having multiple charts as tabset.
Changing data-icon
Some other available icons can be found from ionic.
Common features between html_document and flex dashboard
A lot of the features are common between these two, for example, the way of referencing web pages like the previous section. Don’t be afraid of trying different things in the dashboard and make it useful.
Storyboard layout
Besides the regular column-/row-based layout, one can choose to present the data with ample comments through “storyboard” layout.
Example
Column
General description
Rows: 100
Columns: 58
$ StudentID <int> 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 1...
$ DoB <date> 1993-01-31, 1991-01-04, 1993-02-28, 1990-11...
$ Age <dbl> 26, 28, 26, 29, 29, 25, 28, 27, 28, 27, 25, ...
$ Gender <chr> "Female", "Female", "Female", "Male", "Male"...
$ Race <chr> "Asian", "Unknown", NA, "Unknown", "Multiple...
$ Ethnicity <chr> "Non-Hispanic", "Hispanic", "Hispanic", "Non...
$ Grade_Math_Y1 <dbl> 56, 65, 46, 69, 84, 81, 62, 75, 56, 90, 66, ...
$ Grade_Stats_Y1 <dbl> 78, 61, 46, 79, 80, 80, 70, 83, 75, 80, 63, ...
$ Grade_Engl_Y1 <dbl> 80, 92, 83, 74, 87, 56, 69, 60, 82, 77, 82, ...
$ Grade_Art_Y1 <dbl> 80, 87, 70, 62, NA, 63, 81, 63, 69, 69, 67, ...
$ Grade_Sports_Y1 <dbl> 75, 79, 90, 64, 82, 72, 81, 71, 90, 81, 79, ...
$ Grade_Math_Y2 <dbl> 60, 63, 45, 66, 90, 85, 64, 76, 61, 91, 61, ...
$ Grade_Stats_Y2 <dbl> 76, 62, 45, 79, 79, 88, 67, 80, 72, 76, 69, ...
$ Grade_Engl_Y2 <dbl> 85, 95, 88, 80, 95, NA, 75, NA, 80, 76, 81, ...
$ Grade_Art_Y2 <dbl> 88, 86, 77, 71, 58, 69, 87, 76, 64, 56, 67, ...
$ Grade_Sports_Y2 <dbl> 77, 81, 100, 57, 87, 72, 85, 74, 100, 85, 81...
$ Grade_Math_Y3 <dbl> 68, 67, 56, 76, 96, 87, 67, 75, 59, 91, 64, ...
$ Grade_Stats_Y3 <dbl> 77, 55, 47, 77, 91, 97, 64, 79, 79, 74, 80, ...
$ Grade_Engl_Y3 <dbl> 87, 96, 82, 79, 93, 79, 71, 57, 80, 80, 86, ...
$ Grade_Art_Y3 <dbl> 87, 84, 82, 64, 52, 69, 86, 74, 64, 54, 69, ...
$ Grade_Sports_Y3 <dbl> 77, 91, 98, 62, 85, 75, 86, 69, 100, 94, 90,...
$ Grade_Math_Y4 <dbl> 65, 73, 61, 78, 100, 91, 68, 75, 61, 100, 74...
$ Grade_Stats_Y4 <dbl> 78, 53, 39, 77, 100, 95, 71, 80, 77, 75, 72,...
$ Grade_Engl_Y4 <dbl> 92, 98, 83, 77, 91, 85, 69, 55, 91, 87, 91, ...
$ Grade_Art_Y4 <dbl> 100, 77, 93, 67, 65, 69, 93, 71, 64, 54, 68,...
$ Grade_Sports_Y4 <dbl> 80, 85, 88, 61, 89, 67, 83, 56, 100, 98, 88,...
$ Grade_Math_Y1_Letter <chr> "F", "D", "F", "D", "B", "B", "D", "C", "F",...
$ Grade_Stats_Y1_Letter <chr> "C", "D", "F", "C", "B", "B", "C", "B", "C",...
$ Grade_Engl_Y1_Letter <chr> "B", "A", "B", "C", "B", "F", "D", "D", "B",...
$ Grade_Art_Y1_Letter <chr> "B", "B", "C", "D", NA, "D", "B", "D", "D", ...
$ Grade_Sports_Y1_Letter <chr> "C", "C", "A", "D", "B", "C", "B", "C", "A",...
$ Grade_Math_Y2_Letter <chr> "D", "D", "F", "D", "A", "B", "D", "C", "D",...
$ Grade_Stats_Y2_Letter <chr> "C", "D", "F", "C", "C", "B", "D", "B", "C",...
$ Grade_Engl_Y2_Letter <chr> "B", "A", "B", "B", "A", NA, "C", NA, "B", "...
$ Grade_Art_Y2_Letter <chr> "B", "B", "C", "C", "F", "D", "B", "C", "D",...
$ Grade_Sports_Y2_Letter <chr> "C", "B", "A", "F", "B", "C", "B", "C", "A",...
$ Grade_Math_Y3_Letter <chr> "D", "D", "F", "C", "A", "B", "D", "C", "F",...
$ Grade_Stats_Y3_Letter <chr> "C", "F", "F", "C", "A", "A", "D", "C", "C",...
$ Grade_Engl_Y3_Letter <chr> "B", "A", "B", "C", "A", "C", "C", "F", "B",...
$ Grade_Art_Y3_Letter <chr> "B", "B", "B", "D", "F", "D", "B", "C", "D",...
$ Grade_Sports_Y3_Letter <chr> "C", "A", "A", "D", "B", "C", "B", "D", "A",...
$ Grade_Math_Y4_Letter <chr> "D", "C", "D", "C", "A", "A", "D", "C", "D",...
$ Grade_Stats_Y4_Letter <chr> "C", "F", "F", "C", "A", "A", "C", "B", "C",...
$ Grade_Engl_Y4_Letter <chr> "A", "A", "B", "C", "A", "B", "D", "F", "A",...
$ Grade_Art_Y4_Letter <chr> "A", "C", "A", "D", "D", "D", "A", "C", "D",...
$ Grade_Sports_Y4_Letter <chr> "B", "B", "B", "D", "B", "D", "B", "F", "A",...
$ Major <chr> "Nursing", "Unknown", "Unknown", "Public Hea...
$ Scholarship <chr> "No", "No", "No", "No", "No", "No", "No", "N...
$ Schol_Amount <dbl> NA, NA, NA, NA, NA, NA, NA, NA, NA, NA, NA, ...
$ ProjectedEarning <dbl> 46000, 91500, 48500, 98500, 102000, 108500, ...
$ JobHuntDate <date> 2020-01-10, 2020-01-10, 2020-01-17, 2020-03...
$ Employed <chr> "No", "No", "No", "No", "Yes", "No", "No", "...
$ EmployDate <date> 2021-01-01, 2021-01-01, 2021-01-01, 2021-01...
$ Day2Employ <dbl> 357, 357, 350, 295, 63, 283, 355, 43, 349, 2...
$ Fav_Jane <chr> "answer a note, instead of waiting for me, y...
$ Longitude <dbl> -75.79086, -71.41919, -89.39861, -114.72906,...
$ Latitude <dbl> 44.45007, 41.60247, 30.29801, 33.40344, 38.4...
$ State <chr> "new york", "rhode island", "mississippi", "...Some key factors
| Variable | N | Overall, N = 1001 | No, N = 741 | Yes, N = 261 |
|---|---|---|---|---|
| Grade_Math_Y1 | 98 | 70 (62, 76) | 69 (62, 74) | 75 (70, 82) |
| Unknown | 2 | 1 | 1 | |
| Gender | 100 | |||
| Female | 65 (65%) | 48 (65%) | 17 (65%) | |
| Male | 35 (35%) | 26 (35%) | 9 (35%) | |
| Age | 100 | |||
| 25 | 19 (19%) | 16 (22%) | 3 (12%) | |
| 26 | 27 (27%) | 22 (30%) | 5 (19%) | |
| 27 | 21 (21%) | 16 (22%) | 5 (19%) | |
| 28 | 22 (22%) | 14 (19%) | 8 (31%) | |
| 29 | 11 (11%) | 6 (8.1%) | 5 (19%) | |
| Race | 78 | |||
| Asian | 19 (24%) | 12 (21%) | 7 (35%) | |
| Black | 20 (26%) | 15 (26%) | 5 (25%) | |
| Multiple | 15 (19%) | 10 (17%) | 5 (25%) | |
| Unknown | 11 (14%) | 10 (17%) | 1 (5.0%) | |
| White | 13 (17%) | 11 (19%) | 2 (10%) | |
| Unknown | 22 | 16 | 6 | |
|
1
Median (IQR) or Frequency (%)
|
||||
Column
Scattetplot of first year math grade and first year statistics grade.
Total number of observations
100
Percent employed
How was the example coded
Example {data-icon="fa_signal"}
=======================================================================
Column {.tabset}
-----------------------------------------------------------------------
### General description
| R code to generate pseudo data
| R code to glimpse the pseudo data
### Some key factors
| R code to present descriptive table
Column {data-width=350}
-----------------------------------------------------------------------
### Scattetplot of first year math grade and first year statistics grade.
| R code to generate scatter plot
### Value box to indicate number of observation in the pseudo data.
| Code to present data in value boxes.
### Gauge to indicate percent of observations found a job.
| Code to present the data in gauge.