—

title: “R12. Interactive presentation” subtitle: “ioslides, htmlwidgets” author: “Sim, Min Kyu, Ph.D., mksim@seoultech.ac.kr” output: ioslides_presentation: logo: myRmdBeamerStyle/logo_ds.png css: styles.css smaller: true # incremental: true # transition: slower —

• Part I. ioslides
• Part II. htmlwidget

Part I. ioslides

Slides in rmarkdown

File type and format

• html
  • ioslides, slidy
  • htmlwidget 사용 가능, web에 간편하게 게시가능
• pdf
  • beamer
  • 가장 formal하고 academic함
• pptx - powerpoint

Structure

Header	rmarkdown	in slides
Level-1 header	#	part
Level-2 header	##	page
Level-3 header	###	paragraph

ioslides

• R Markdown의 html 슬라이드 포맷
  • htmlwidget 사용 가능
  • web에 간편하게 게시가능
  • css파일을 사용하여 외형을 customization할 수 있음
• slidy
  • 상대적으로 customization의 영역이 더 많음
  • ioslides 보다 heavy함
• https://bookdown.org/yihui/rmarkdown/ioslides-presentation.html

Subtitling & Incremental Mode | This is my subtitle

• 이 페이지의 Level-2 헤더는 아래와 같이 적었음

## Subtitling and Incremental Mode | This is my subtitle {.build}

• Subtitle
  • 페이지의 title과 subtitle을 함께 넣을 수 있음
• Incremental Mode
  • {.build}를 적어주면 incremental mode가 실행됨
  • global하게 적용하려면 YAML 헤더에 incremental: true

Presentation control | Chrome에서 파일을 열었을 때에 아래 키로 프리젠테이션 조작 가능

• ‘f’: enable fullscreen mode
• ‘w’: toggle widescreen mode
• ‘o’: enable overview mode
• ‘h’: enable code highlight mode
• ‘p’: show presenter notes

Code highlighting

• ‘h’: enable code highlight mode

trivial_code1 <- 0
### <b>
important_code1 <- 0
important_code2 <- 0
### </b>
trivial_code2 <- 0

• 위의 코드 블럭은 아래와 같이 입력했음
• Highlight하고 싶은 영역을 “### <b>”와 “### </b>”로 둘러쌓으면 됨

Code highlight

Background images and Font color

As you walk down the fairway of life you must smell the roses, for you only get to play one round. – Ben Hogan

• 앞 페이지의 Rmd 코드는 아래와 같음
  • Background images는 Level-2 Header에서 지정 (이미지 파일 경로와 사이즈 지정)
  • 폰트의 색을 바꾸고 싶은 영역을 <div class="white">와 </div>로 둘러싸면 하얀색 폰트로 나옴

Background and font

YAML Header of this lecture note

YAML header

• logo - 로고 파일 경로
• styles.css - 스타일 파일을 이용해서 로고 이미지와 테두리 크기 지정
• smaller - 작은 폰트
• incremental - incremental mode
• transition: slower - 페이드 효과

Part II. htmlwidget

htmlwidget

• JavaScript 데이터 시각화물을 R에서 사용
• Rmarkdown의 html 포맷과 shiny application에 widget 형태로 삽입
• Interactive presentation

1. plotly 객체 | Interactive ggplot

library(ggplot2)
library(plotly)
fig <- ggplot(mpg, aes(x = displ, y = hwy)) + 
  geom_point(aes(color = class)) + geom_smooth()
### <b>
fig_plotly <- ggplotly(fig) 
### </b>
class(fig_plotly)

## [1] "plotly"     "htmlwidget"

• https://plotly.com/ggplot2/

fig_plotly

2. dygraphs 객체 | Interactive timeseries plot

library(dygraphs)
lungDeaths <- cbind(mdeaths, fdeaths)
fig_dygraph <- dygraph(lungDeaths) %>%
  dySeries("mdeaths", label = "Male") %>%
  dySeries("fdeaths", label = "Female") %>%
  dyOptions(stackedGraph = TRUE) %>%
  dyRangeSelector(height = 20)
class(fig_dygraph)

## [1] "dygraphs"   "htmlwidget"

• https://rstudio.github.io/dygraphs/

fig_dygraph

Deaths from Lung Disease (UK)

3. leaflet() | Interactive map

library(leaflet)
fig_leaflet <- leaflet() %>% addTiles() %>% 
  setView(127.076, 37.631, zoom = 16) %>%
  addMarkers(127.076, 37.63148, label="Frontier bldg",
             labelOptions = labelOptions(noHide = TRUE, textsize = "15px"))
class(fig_leaflet)

## [1] "leaflet"    "htmlwidget"

• https://rstudio.github.io/leaflet/

fig_leaflet

4. DT (DataTables) 객체 | Interactive table

Zero configuration

library(DT)
tbl_DT1 <- datatable(iris)
class(tbl_DT1)

## [1] "datatables" "htmlwidget"

• https://rstudio.github.io/DT/

tbl_DT1

Some configuration

tbl_DT2 <- 
  datatable(iris, 
            caption = '(Caption) Table 1: This is iris dataset.',
            rownames = FALSE,
            fillContainer = FALSE, 
            options = list(pageLength = 8),
            class = 'cell-border stripe')

• caption 위치를 바꿀 수도 있음
• fillContainer = TRUE이면 크기를 자동 조정
• options = list(pageLength = 12)로 초기 행의 갯수 지정
• class = 'cell-border stripe'는 세로줄 추가

tbl_DT2

"The medium is the message - Marshall McLuhan"