+ All Categories
Home > Documents > D a s h b o a r d s I n c o r p o r a ti n g S h i n y i n to...1. Create a sidebar column (using...

D a s h b o a r d s I n c o r p o r a ti n g S h i n y i n to...1. Create a sidebar column (using...

Date post: 07-Jun-2020
Category:

Documents
Upload: others
View: 0 times
Download: 0 times
Download Report this document
Share this document with a friend
32
DataCamp Building Dashboards with flexdashboard Incorporating Shiny into Dashboards BUILDING DASHBOARDS WITH FLEXDASHBOARD Elaine McVey Director of Quantitative Mobility TransLoc
Transcript
Page 1: D a s h b o a r d s I n c o r p o r a ti n g S h i n y i n to...1. Create a sidebar column (using .sidebar). 2. Add user inputs to the sidebar (using xyzInput() Shiny widgets). 3.

DataCamp Building Dashboards with flexdashboard

Incorporating Shiny intoDashboards

BUILDING DASHBOARDS WITH FLEXDASHBOARD

Elaine McVeyDirector of Quantitative Mobility

TransLoc

Page 2: D a s h b o a r d s I n c o r p o r a ti n g S h i n y i n to...1. Create a sidebar column (using .sidebar). 2. Add user inputs to the sidebar (using xyzInput() Shiny widgets). 3.

DataCamp Building Dashboards with flexdashboard

Why should I add Shiny? Or not?

Why

Interactivity

Lightweight

Why not

Complication

Hosting

Page 3: D a s h b o a r d s I n c o r p o r a ti n g S h i n y i n to...1. Create a sidebar column (using .sidebar). 2. Add user inputs to the sidebar (using xyzInput() Shiny widgets). 3.

DataCamp Building Dashboards with flexdashboard

Why should I add Shiny? Or not?

Why

Interactivity

Lightweight

Why not

Complication

Hosting

Page 4: D a s h b o a r d s I n c o r p o r a ti n g S h i n y i n to...1. Create a sidebar column (using .sidebar). 2. Add user inputs to the sidebar (using xyzInput() Shiny widgets). 3.

DataCamp Building Dashboards with flexdashboard

Why should I add Shiny? Or not?

Why

Interactivity

Lightweight

Why not

Complication

Hosting

Page 5: D a s h b o a r d s I n c o r p o r a ti n g S h i n y i n to...1. Create a sidebar column (using .sidebar). 2. Add user inputs to the sidebar (using xyzInput() Shiny widgets). 3.

DataCamp Building Dashboards with flexdashboard

Why should I add Shiny? Or not?

Why

Interactivity

Lightweight

Why not

Complication

Hosting

Page 6: D a s h b o a r d s I n c o r p o r a ti n g S h i n y i n to...1. Create a sidebar column (using .sidebar). 2. Add user inputs to the sidebar (using xyzInput() Shiny widgets). 3.

DataCamp Building Dashboards with flexdashboard

If not a Shiny app, then what?

A flexdashboard with Shiny is an interactive RMarkdown document

Page 7: D a s h b o a r d s I n c o r p o r a ti n g S h i n y i n to...1. Create a sidebar column (using .sidebar). 2. Add user inputs to the sidebar (using xyzInput() Shiny widgets). 3.

DataCamp Building Dashboards with flexdashboard

Making it shiny

runtime: shiny

Page 8: D a s h b o a r d s I n c o r p o r a ti n g S h i n y i n to...1. Create a sidebar column (using .sidebar). 2. Add user inputs to the sidebar (using xyzInput() Shiny widgets). 3.

DataCamp Building Dashboards with flexdashboard

Let's practice!

BUILDING DASHBOARDS WITH FLEXDASHBOARD

Page 9: D a s h b o a r d s I n c o r p o r a ti n g S h i n y i n to...1. Create a sidebar column (using .sidebar). 2. Add user inputs to the sidebar (using xyzInput() Shiny widgets). 3.

DataCamp Building Dashboards with flexdashboard

The Reactive DataframePattern

BUILDING DASHBOARDS WITH FLEXDASHBOARD

Elaine McVeyDirector of Quantitative Mobility

TransLoc

Page 10: D a s h b o a r d s I n c o r p o r a ti n g S h i n y i n to...1. Create a sidebar column (using .sidebar). 2. Add user inputs to the sidebar (using xyzInput() Shiny widgets). 3.

DataCamp Building Dashboards with flexdashboard

Creating a sidebar

Column {data-width=200 .sidebar}

Page 11: D a s h b o a r d s I n c o r p o r a ti n g S h i n y i n to...1. Create a sidebar column (using .sidebar). 2. Add user inputs to the sidebar (using xyzInput() Shiny widgets). 3.

DataCamp Building Dashboards with flexdashboard

Creating a sidebar

Page 12: D a s h b o a r d s I n c o r p o r a ti n g S h i n y i n to...1. Create a sidebar column (using .sidebar). 2. Add user inputs to the sidebar (using xyzInput() Shiny widgets). 3.

DataCamp Building Dashboards with flexdashboard

Adding user inputs

Page 13: D a s h b o a r d s I n c o r p o r a ti n g S h i n y i n to...1. Create a sidebar column (using .sidebar). 2. Add user inputs to the sidebar (using xyzInput() Shiny widgets). 3.

DataCamp Building Dashboards with flexdashboard

Making our dataframe reactive

Page 14: D a s h b o a r d s I n c o r p o r a ti n g S h i n y i n to...1. Create a sidebar column (using .sidebar). 2. Add user inputs to the sidebar (using xyzInput() Shiny widgets). 3.

DataCamp Building Dashboards with flexdashboard

Using the reactive dataframe

Page 15: D a s h b o a r d s I n c o r p o r a ti n g S h i n y i n to...1. Create a sidebar column (using .sidebar). 2. Add user inputs to the sidebar (using xyzInput() Shiny widgets). 3.

DataCamp Building Dashboards with flexdashboard

Making dashboard components reactive

Page 16: D a s h b o a r d s I n c o r p o r a ti n g S h i n y i n to...1. Create a sidebar column (using .sidebar). 2. Add user inputs to the sidebar (using xyzInput() Shiny widgets). 3.

DataCamp Building Dashboards with flexdashboard

Steps to the reactive dataframe pattern

1. Create a sidebar column (using .sidebar).

2. Add user inputs to the sidebar (using xyzInput() Shiny widgets).

3. Make a "dataframe" that reacts to user inputs (using reactive()).

4. Replace the dataframe in the dashboard component code with the reactive

version.

5. Wrap each dashboard output with the appropriate Shiny version (renderXyz()).

Page 17: D a s h b o a r d s I n c o r p o r a ti n g S h i n y i n to...1. Create a sidebar column (using .sidebar). 2. Add user inputs to the sidebar (using xyzInput() Shiny widgets). 3.

DataCamp Building Dashboards with flexdashboard

Let's practice!

BUILDING DASHBOARDS WITH FLEXDASHBOARD

Page 18: D a s h b o a r d s I n c o r p o r a ti n g S h i n y i n to...1. Create a sidebar column (using .sidebar). 2. Add user inputs to the sidebar (using xyzInput() Shiny widgets). 3.

DataCamp Building Dashboards with flexdashboard

Customized Inputs forCharts

BUILDING DASHBOARDS WITH FLEXDASHBOARD

Elaine McVeyDirector of Quantitative Mobility

TransLoc

Page 19: D a s h b o a r d s I n c o r p o r a ti n g S h i n y i n to...1. Create a sidebar column (using .sidebar). 2. Add user inputs to the sidebar (using xyzInput() Shiny widgets). 3.

DataCamp Building Dashboards with flexdashboard

Chart-Specific Effects

Page 20: D a s h b o a r d s I n c o r p o r a ti n g S h i n y i n to...1. Create a sidebar column (using .sidebar). 2. Add user inputs to the sidebar (using xyzInput() Shiny widgets). 3.

DataCamp Building Dashboards with flexdashboard

Moving Inputs Into Charts

Page 21: D a s h b o a r d s I n c o r p o r a ti n g S h i n y i n to...1. Create a sidebar column (using .sidebar). 2. Add user inputs to the sidebar (using xyzInput() Shiny widgets). 3.

DataCamp Building Dashboards with flexdashboard

Moving Inputs Into Charts

Page 22: D a s h b o a r d s I n c o r p o r a ti n g S h i n y i n to...1. Create a sidebar column (using .sidebar). 2. Add user inputs to the sidebar (using xyzInput() Shiny widgets). 3.

DataCamp Building Dashboards with flexdashboard

Moving Inputs Into Charts

Page 23: D a s h b o a r d s I n c o r p o r a ti n g S h i n y i n to...1. Create a sidebar column (using .sidebar). 2. Add user inputs to the sidebar (using xyzInput() Shiny widgets). 3.

DataCamp Building Dashboards with flexdashboard

Moving Inputs Into Charts

Page 24: D a s h b o a r d s I n c o r p o r a ti n g S h i n y i n to...1. Create a sidebar column (using .sidebar). 2. Add user inputs to the sidebar (using xyzInput() Shiny widgets). 3.

DataCamp Building Dashboards with flexdashboard

Moving Inputs Into Charts

Page 25: D a s h b o a r d s I n c o r p o r a ti n g S h i n y i n to...1. Create a sidebar column (using .sidebar). 2. Add user inputs to the sidebar (using xyzInput() Shiny widgets). 3.

DataCamp Building Dashboards with flexdashboard

A Shortcut

Page 26: D a s h b o a r d s I n c o r p o r a ti n g S h i n y i n to...1. Create a sidebar column (using .sidebar). 2. Add user inputs to the sidebar (using xyzInput() Shiny widgets). 3.

DataCamp Building Dashboards with flexdashboard

Let's practice!

BUILDING DASHBOARDS WITH FLEXDASHBOARD

Page 27: D a s h b o a r d s I n c o r p o r a ti n g S h i n y i n to...1. Create a sidebar column (using .sidebar). 2. Add user inputs to the sidebar (using xyzInput() Shiny widgets). 3.

DataCamp Building Dashboards with flexdashboard

Course Recap

BUILDING DASHBOARDS WITH FLEXDASHBOARD

Elaine McVeyDirector of Quantitative Mobility

TransLoc

Page 28: D a s h b o a r d s I n c o r p o r a ti n g S h i n y i n to...1. Create a sidebar column (using .sidebar). 2. Add user inputs to the sidebar (using xyzInput() Shiny widgets). 3.

DataCamp Building Dashboards with flexdashboard

Resources

https://rmarkdown.rstudio.com/flexdashboard/

https://www.htmlwidgets.org/

https://rmarkdown.rstudio.com/flexdashboard/
https://www.htmlwidgets.org/
Page 29: D a s h b o a r d s I n c o r p o r a ti n g S h i n y i n to...1. Create a sidebar column (using .sidebar). 2. Add user inputs to the sidebar (using xyzInput() Shiny widgets). 3.

DataCamp Building Dashboards with flexdashboard

Resources

https://rmarkdown.rstudio.com/flexdashboard/

https://www.htmlwidgets.org/

https://rmarkdown.rstudio.com/flexdashboard/
https://www.htmlwidgets.org/
Page 30: D a s h b o a r d s I n c o r p o r a ti n g S h i n y i n to...1. Create a sidebar column (using .sidebar). 2. Add user inputs to the sidebar (using xyzInput() Shiny widgets). 3.

DataCamp Building Dashboards with flexdashboard

Resources

leaflet

DT (datatable)

plotly

highcharter

https://rmarkdown.rstudio.com/flexdashboard/

https://www.htmlwidgets.org/

https://rmarkdown.rstudio.com/flexdashboard/
https://www.htmlwidgets.org/
Page 31: D a s h b o a r d s I n c o r p o r a ti n g S h i n y i n to...1. Create a sidebar column (using .sidebar). 2. Add user inputs to the sidebar (using xyzInput() Shiny widgets). 3.

DataCamp Building Dashboards with flexdashboard

shinydashboard

Page 32: D a s h b o a r d s I n c o r p o r a ti n g S h i n y i n to...1. Create a sidebar column (using .sidebar). 2. Add user inputs to the sidebar (using xyzInput() Shiny widgets). 3.

DataCamp Building Dashboards with flexdashboard

Thank you!

BUILDING DASHBOARDS WITH FLEXDASHBOARD


Recommended
Sidebar Summer 2015

Sidebar Summer 2015

Documents

...2. n 2. o n c -o n n c 3 o n o n o n 2. c 2. o n n o o o o n N n o n o n . N 3 n o 2 n o n o o c n o 2. o 2. N o c n o o n o o n c c o o o o -o n n

...2. n 2. o n c -o n n c 3 o n o n o n 2. c 2. o n n o o o o n N n o n o n . N 3 n o 2 n o n o o c n o 2. o 2. N o c n o o n o o n c c o o o o -o n n

Documents

Newspaper sidebar

Newspaper sidebar

Education

pasztoipiac.hupasztoipiac.hu/kisbagyon/afrikai_sertespestis_hatarozat.pdfo N o — CD, N O N o N < o o: N < N o: N O o o: c: a O N O O N N o N N o o: N o. < o. N O o o cra N o < o.

pasztoipiac.hupasztoipiac.hu/kisbagyon/afrikai_sertespestis_hatarozat.pdfo N o — CD, N O N o N < o o: N < N o: N O o o: c: a O N O O N N o N N o o: N o. < o. N O o o cra N o < o.

Documents

Sidebar 1 - tylerbradford.files.wordpress.com · Sidebar 1 Sidebar 2 Logo Home contact/ about me-Typography Typography-Illustrations Illustrations (image link) (image link) (image

Sidebar 1 - tylerbradford.files.wordpress.com · Sidebar 1 Sidebar 2 Logo Home contact/ about me-Typography Typography-Illustrations Illustrations (image link) (image link) (image

Documents

o o < o o N o o o O o o o o N o o o o o N 00 — t....n-o N > Ono < o N o o o O o o o N o n o N N o O o N N o o o

o o < o o N o o o O o o o o N o o o o o N 00 — t....n-o N > Ono < o N o o o O o o o N o n o N N o O o N N o o o

Documents

Sidebar Media Kit

Sidebar Media Kit

Documents

 · i' tan n onto > o o n n o on 3020 n o < n n h . o n cc o o o o O < n 70 n o o n o o n 01 n o . o o o

 · i' tan n onto > o o n n o on 3020 n o < n n h . o n cc o o o o O < n 70 n o o n o o n 01 n o . o o o

Documents

Express Sidebar

Express Sidebar

Documents

bip.namyslow.eubip.namyslow.eu/download//1120/pomoc-publiczna-2011.pdf · to N O o h N N N o N O O O O o N o o N N N o o N N N o N o O N o o O o O . Created Date: 5/31/2012 8:10:12

bip.namyslow.eubip.namyslow.eu/download//1120/pomoc-publiczna-2011.pdf · to N O o h N N N o N O O O O o N o o N N N o o N N N o N o O N o o O o O . Created Date: 5/31/2012 8:10:12

Documents

mpgm.plmpgm.pl/website/przet-kred/biznes_plan.pdf · n N o o o N N o o N o N o N N 2.1 2.) o n N o N o o o N o o o N o o o N . Created Date: 7/18/2013 1:10:20 PM

mpgm.plmpgm.pl/website/przet-kred/biznes_plan.pdf · n N o o o N N o o N o N o N N 2.1 2.) o n N o N o o o N o o o N o o o N . Created Date: 7/18/2013 1:10:20 PM

Documents

 · N o N N O o, 00 O o o O O o O O N. O o N O O N o N. N. o O CTQ N O N o N . Created Date: 20151209175536Z

 · N o N N O o, 00 O o o O O o O O N. O o N O O N o N. N. o O CTQ N O N o N . Created Date: 20151209175536Z

Documents

 · Paul o o n n o n n n n o o X O n n o o O < o o o o n o N o o o 3 o n n o o n < < c n o o c n 3 x o n o < o o n n < X n n o o o > o o < n o o n o n n o o o

 · Paul o o n n o n n n n o o X O n n o o O < o o o o n o N o o o 3 o n n o o n < < c n o o c n 3 x o n o < o o n n < X n n o o o > o o < n o o n o n n o o o

Documents

Sidebar - fedbar.org

Sidebar - fedbar.org

Documents

 · 00 o, N n N o o V N n N t c N N o n N n o n c O N ON N on N n o N o N n . N N N n n n O o 0 o o N o o o N c : N N o N 00 N o 10 N o c 00 co w n o

 · 00 o, N n N o o V N n N t c N N o n N n o n c O N ON N on N n o N o N n . N N N n n n O o 0 o o N o o o N c : N N o N 00 N o 10 N o c 00 co w n o

Documents

wieczorynkanaukomanow.files.wordpress.com · O o N O CD N o o N N N o N. N. o o N N o N O N o o o o O o O o o O o o o . Created Date: 11/6/2014 11:22:55 AM

wieczorynkanaukomanow.files.wordpress.com · O o N O CD N o o N N N o N. N. o o N N o N O N o o o o O o O o o O o o o . Created Date: 11/6/2014 11:22:55 AM

Documents

o o, O N O N o CD O o O N o: O, O o O, o o o O. o o o, o ... · O o o O O O N < o O N O O N N N N a N o to o N o cn N o a N N o O o CJQ < O: N O CJQ o O N o O g: O cn O CJQ o: N CJQ

o o, O N O N o CD O o O N o: O, O o O, o o o O. o o o, o ... · O o o O O O N < o O N O O N N N N a N o to o N o cn N o a N N o O o CJQ < O: N O CJQ o O N o O g: O cn O CJQ o: N CJQ

Documents

JPress Sidebar

JPress Sidebar

Documents