1. flexdashboar 에 대한 소개 및 특징
RStudio Team 이 당시 flexdashboard 에 대해 소개한 내용은 아래와 같다.
- flexdashboard 를 이용하면 R 로 유연하고(flexible), 매력적이며(attractive), 쌍방향의(Interactive) 대시보드를 쉽게(easily) 만들 수 있음
- 대시보드 작성 및 커스터마이제이션은 Rmarkdown 에 기반하여 이루어지며, Shiny 컴포넌트들도 덧붙일수도 있다.
- 이외에도 htmlwidgets, base/lattice/grid 그래픽, tabula(표) 데이터, 주석 같은 다양한 컴포넌트들까지도 지원하며, 열과 행 기반 레이아웃, 스토리보드 등이 제공된다는 장점도 가지고 있음
- flexdashboard 는 R 의 패키지이므로, 설치는 R 의 여타 패키지처럼 install.packages() 함수를 이용
패키지 설치 후, f
lexdashboard 생성을 위해서는 File > New File > R Markdown 메뉴로 들어가서, 팝업화면 좌측 아래의 'From Template'를 선택한다.
그리고 오른쪽에 보여지는 템플릿에서 'Flex Dashboard'를 고르고 OK 버튼을 누르면,
3. flexdashboard 의 기본 템플릿
위에서 생성된 flexdashboard 의 템플릿을 좀 더 자세히 살펴보자. 기본적인 형태는 우리가 알고 있는 markdown 또는 shiny 템플릿과 유사하다.
먼저 YAML 헤더 부분에 제목과 output 형식 등이 기재되어 있고, 이 후에는 백틱 3 개( ``` )로 감싸져 있는 r 코드청크가 보인다.
그 밑에는 열(column)과 행(row)이 구분되어 있고, 그 안에 다시 r 코드청크가 기재되어 있는데, 기본 템플릿은 2 개의 열(column)로 구분되어 있다
이 템플릿을 실행해보자.
flexdashboard 도 r markdown 문서이므로, 실행할 때는 '뜨개질 아이콘' 모양의 knit 버튼을 클릭하면 된다.
실행 결과는 아래와 같다.
- 가장 위에 파란색 부분으로 제목 부분이 구분되며,
- 하얀색 배경에,
- 기본적으로 두 개의 열로 나뉘어진 레이아웃이며, 1 열은 단일 행, 2 열은 2 개의 행으로 구성되어 있다.
4. flexdashboard 로 그래프 띄워보기
기본 템플릿에 ggplot 그래프를 추가해서 flexdashboard 가 어떻게 보여지는지에 대해서 살펴보도록 하자.
기본 템플릿에서 수정한 내용은 다음과 같다.
1) YAML 헤더의 title 부분에 제목을 명기 2) library() 함수 부분에 ggplot2 기재
2) 행과 열 부분의 r 코드청크에 ggplot 그래프 추가 (총 3 개)
---
title: "Dashbord Example"
output:
flexdashboard::flex_dashboard:
orientation: columns
vertical_layout: fill
---
```{r setup, include=FALSE}
library(flexdashboard)
library(ggplot2)
```
Column {data-width=650}
-----------------------------------------------------------------------
### Chart A
```{r}
ggplot(data = mtcars, aes(x=hp, y=mpg, color=as.factor(cyl))) + geom_point()
```
Column {data-width=350}
-----------------------------------------------------------------------
### Chart B
```{r}
ggplot(data = mtcars) + geom_bar(mapping=aes(x=cyl, fill=as.factor(am)))
```
### Chart C
```{r}
ggplot(data = mtcars) +
geom_bar(mapping = aes(x=cyl, fill=as.factor(cyl)), position = "dodge") + coord_polar()
```
default 로 설정되어 있는 레이아웃에서는,
output 창의 크기를 변경하면 자동으로 그래프의 크기가 조절된다.
가로 크기를 더 줄이면,
아예 설정되어 있는 행과 열 구분이 무시되고, 아래로 그래프들이 나열되기도 한다.
이건 모두 YAML 헤더의 설정 내용 때문.
flexdashboard 의 레이아웃
flexdashboard 의 레이아웃에 대해 알아보기 위해, flexdashboard 의 default 템플릿에 레이아웃에 ggplot2 차트들만 추가하였다.
1) title, output 등이 설정 되어 있는 YAML 헤더 부분이 먼저 나오는데, output 설정 부분에는 orientation : columns 와 vertical_layout: fill 이라는 부분이 보이고,
2) 이어 백틱 3 개( ``` )로 둘러싸인 r 코드청크가 나오며, * 아래의 예시에서는 이 부분에서 library() 함수로 flexdashboard 와 ggplot2 패키지를 불러왔음
3) 그 아래에는 Column 이라고 기재된 부분이 2 군데 나온다. 그리고 각각의 Column 부분은 ------로 구분되어 있고, 그 밑에는 ###로 표시된 chart 부분이 나온다
그리고 이 default 템플릿을 실행하면 다음과 같은 구조의 output 이 표시된다는 것도 이미 살펴보았다.
- 2 개의 열로 구분 - 1 열은 한 개의 행, 2 열은 두 개의 행으로 구성
- 그리고 열과 행의 내용들은 사용자의 브라우져 화면 크기에 맞게 자동으로 넓이와 높이가 조정됨
이를 실행하면 다음과 같이 대시보드가 생성되어 보여진다.
1. Orientation 레이아웃 : 행과 열의 방향(순서)
가. default 는 열 -> 행 flexdashboard 에서는 default 로 열 -> 행의 방향으로 설정이 이루어진다.
이를 YAML 헤더에서 확인할 수 있는데, output: 아래 부분의 orientation: columns 부분이다. 이 부분은 default 이기 때문에, 삭제해도 무관하다.
열과 행의 구분은 ---- 와 ### 를 이용하는데, 사실 이건 markdown 의 문법이다.
바로 markdown 헤더. default 인 orientation: columns 옵션 : 열은 ---, 행은 ###로 구분된다.
여기서 유의할 것은, 열은 항상 ----이고 행은 항상 ###로 구분되는 것이 아니라는 것이다.
orientation: columns 로 설정했기 때문이라는 것에 유의해야 한다.
* 아래에서 다시 살펴보겠지만, orientation: rows 로 하면, 행은 ----, 열은 ###로 구분되게 됨
나. 행 -> 열 방향으로 바꾸려면 orientation: rows 로 변경
만약 행 -> 열의 순서로 설정이 이루어지기를 원한다면, YAML 헤더의 orientation: 부분만 columns 를 rows 로 변경하면 된다.
그리고 knit 버튼을 눌러 실행해보면, 아래와 같이 2 개의 행이 먼저 구분되었으며 1 행은 1 개의 열, 2 행은 2 개의 행으로 구분되었음을 확인할 수 있다.
Scrolling 레이아웃
가. default 는 fill : 화면이 꽉 채워지도록 자동조정됨 flexdashboard 의 Scrolling 레이아웃은 생성되는 대시보드가 사용자의 화면에 맞게 리사이징되게 할지, 아니면 화면에 스크롤 기능을 넣을지를 설정하는 것이다.
이 역시 YAML 헤더에서 설정하며, vertical_layout 이다.
default 는 vertical_layout: fill 로 되어 있으며, 브라우저 크기를 조절하면 자동으로 화면 크기에 맞게 대시보드의 크기가 조정된다.
default 이니, vertical_layout:fill 은 삭제해도 무관, 역시 default 옵션인 orientation: columns 과 동시에 삭제하면 아래와 같이 error 가 뜨며 실행이 안됨에 유의
제대로 나오게 하려면, 아래와 처럼 flexdashboard::flex_dashboard 바로 뒤에 있는 콜론( : )까지 삭제해야 한다. 그러면 정상적으로 실행된다.
나. 스크롤바를 추가하려면 vertical_layout: scroll 로 변경
경우에 따라 브라우저 크기에 맞게 대시보드를 조정하지 않고, 스크롤바를 옆에 두고 위아래로 스크롤하며 대시보드를 보는 것을 원할 때도 있다.
이 경우에는 YAML 헤더의 vertical_layout 을 fill 에서 scroll 로 변경하면 된다. 이 때, YAML 헤더에서는 들여쓰기(indentation)에 유의하자.
vertical_layout 만 fill 에서 scoll 로 변경하여 실행해보면, 아래와 같이 대시보드의 오른쪽에 스크롤바가 생겼음을 확인할 수 있다.
이 옵션은 열이 2 개로 구분되어 있는 경우보다, 아래처럼 1 개의 열로 대시보드를 구성 후, 원래의 크기로 그래프 등을 나열하여 보여주고 싶을 때 유용.
3. tabset 레이아웃
대시보드의 한 행이나 열에 여러 개의 그래프 등의 자료를 보여주고 싶을 때에는, 한 화면에 모두 뿌려주는 것보다는 tabset 을 이용하는 것이 더 나을 수도 있다.
이는 특히, 어떤 컴포넌트는 메인 정보여서 모든 사용자에게 보여지길 원하고, 다른 컴포넌트는 부가적인 정보라서 관심 있는 사용자들만 볼 수 있게 하기를 원하는 경우에 유용할 수 있는데,
flexdashboard 홈페이지의 설명에 따르면, 많은 경우에 이 화면에서 정보를 찾아 들어가기 편한 tabset 이 그래프 등의 컴포넌트들을 상하로 나열하는 vertical_layout: scroll 옵션보다도 정보 전달 입장에서는 훨씬 더 효율적인 것이라고 제시한다.
flexdashboard 에서의 tabset 적용을 위해서는, 아래와 같이 {.tabset} 속성을 열 또는 행 구분할 때 기재하면 된다.
아울러, .tabset-fade 를 {.tabset} 안에 기재하면, 탭 전환 시, 부드럽게 처리되는 효과까지 넣을 수 있다.
---
title: "Dashbord Example"
output:
flexdashboard::flex_dashboard:
orientation: columns
vertical_layout: fill
---
```{r setup, include=FALSE}
library(flexdashboard)
library(ggplot2)
```
Column
-----------------------------------------------------------------------
### Chart A
```{r}
ggplot(data = mtcars, aes(x=hp, y=mpg, color=as.factor(cyl))) + geom_point()
```
Column {.tabset .tabset-fade}
-----------------------------------------------------------------------
### Chart B
```{r}
ggplot(data = mtcars) + geom_bar(mapping=aes(x=cyl, fill=as.factor(am)))
```
### Chart C
```{r}
ggplot(data = mtcars) +
geom_bar(mapping = aes(x=cyl, fill=as.factor(cyl)), position = "dodge") + coord_polar()
```
- YAML 헤더에서는 orientation 과 vertical_layout 부분을 삭제. default 로 column(열) 방향 순서로 그려지며, 대시보드의 크기는 화면의 크기게 맞게 자동조정(fill)된다.
- 열의 크기는 별도로 설정하지 않았으므로 같은 크기가 되며, 두 번째 열에 {.tabset .tabset-fade}을 기재하여 tab 으로 구분될 수 있게 하였다.
가. dygraphs dygraphs 패키지는 시계열 자료에 대한 시각화 그래프 구현 할 때, 하이라이트, 줌 등의 기능을 제공한다.
아래가 flexdashboard 에서 예시로 든 코드인데, library() 함수를 쓰는 것을 보아 dygraphs 가 R 의 패키지임을 확인할 수 있음
위의 코드를 knit 한 결과는 아래와 같다. 시계열 그래프들이 그려지는데,
가장 위의 그래프에서 왼쪽 일부분만 마우스 좌 클릭하여 드래그 하면 아래와 같이 회색으로 음영 처리 되어 선택되며,
마우스를 놓으면, 줌 인 되었음. 다시 원래 그래프로 돌아가려면, 그래프의 다른 부분을 더블 클릭하면 된다.
나. plotly 이름만 언급된 plotly 패키지는,
R 의 ggplot2 그래픽을 인터렉티브한 웹 버전으로 쉽게 변환해 준다. 정말 보기 좋고 인터렉티브한 그래프를 간단히 그릴 수 있는 기능들이 훌륭하다.
홈페이지가 별도로 있고 설명도 잘 되어 있다.
홈페이지의 내용을 통해 산점도(scatter plot)를 간단히 그려 ggplot2 그래프와 비교. plotly 패키지는 plot_ly() 함수를 이용하는데, 사용방법이 지금까지 사용한 그래프 함수들과는 약간 다르다.
다. highcharter
flexdashboard 홈페이지에서 설명만 되었던 highcharter 는
자바스크립트의 그래픽 라이브러리로 유명한 highcharts 에 대한 R 인터페이스.
이 패키지도 plotly 처럼 간단하면서도 깔끔하게 인터렉티브한 그래프를 그려준다.
이 패키지는 hchart() 함수를 이용하는데, 사용방법은 ggplot2 의 qplot()와 유사하다.
그려지는 그래프는 위의 dygraphs 에서 본 것과 동일하게, 그래프의 일부분을 마우스로 드래그하면 줌인 기능이 지원된다.
flexdashboard 의 그래프 크기 설정 및 표 처리
htmlwidgets 은 한가지 단점을 가지고 있는데, 그래프에서 쓰는 데이터를 웹 페이지에 내장(embed)한다는 것이다.
그래서 대용량의 데이터 셋을 가지고 작업할 때는 성능 문제가 있을 수 있고, 이런 경우에는 통상의 R 그래픽을 이용하는 것이 낫다. 이 R Graphic 을 포함한 flexdashboard 의 나머지 컴포넌트들에 대해 알아보도록 하자.
1. R Graphics flexdashboard 에서는 R 에서 제공하는 모든 그래프(base, lattice, ggplot2 등)들을 이용할 수 있다. - 동적인(Shiny) 대시보드에서는 renderPlot() 함수를 이용할 경우, 그래프들이 자동으로 대시보드 컨테이너에 맞도록 자동으로 사이즈가 조절된다. - 정적인 대시보드에서도 R 의 표준 그래프들은 사이즈 늘리기나 왜곡이 없도록 스케일 처리되는데, 그래프가 PNG 이미지 파일로 처리되기 때문에 컨테이너의 경계 부분까지 이음새 없이 딱 들어맞지는 않는다. 그래서 flexdashboard 홈페이지에서는 주어진 그래프를 가능한 가장 좋은 fit 을 위한 팁을 제공하고 있는데, 이게 바로 fig.height 와 fig.width 속성이다. 이는 flexdashboard 의 행/열 부분을 정의하는 R 코드청크 안의 'r' 뒤에 기재하는데, 이를 통해 R 의 그래프가 flexdashboar 의 컨테이너에 가능한 잘 맞도록 해준다. 다만, 적당한 값이 무엇인지는 trial & error 방법으로 실험(experimentation)을 통해 알아내야 한다는 것.
먼저, 2 개 열 (1 열은 1 개 행, 2 열은 2 개 행) 구조로 R 의 base 그래프를 그리기.
아래의 코드를 보면, 그래프의 너비나 높이에 대한 설정을 하지 않았음을 알 수 있다.
이번에는, 그래프의 크기를 fig.width 와 fig.height 를 이용하여 아래처럼 조정. - 1 열 : fig.width = 12, fig.height = 7 - 2 열 1 행 : fig.width = 5, fig.height = 5 - 2 열 2 행 : fig.width = 10, fig.height = 7
2. Tabular Data (표) flexdashboard 에서의 표 처리시에는 이미 살펴본 적 있는 R Markdown 에서의 표 그리는 방법들을 이용한다.
1) 일반적인 심플한 표 정적인 표를 가장 간단히 그리는 방법은 knitr 패키지의 kable() 함수를 이용하는 것이다.
2) 정렬, 필터링, 페이지 번호 매기기 등이 포함된 DataTable
DT 패키지를 이용하면 R 의 행렬이나 데이터프레임을 필터링, 소팅, 페이징 등을 지원하는 인터렉티브한 HTML 표로 쉽게 변환할 수 있다.
이 DT 패키지도 DataTables JavaScript 라이브러리 인터페이스. * 호환성 문제 때문에, flexdashboard 에서 DT 패키지를 이용할 때는, 가장 최신 버전 설치 여부를 확인해야 하니 유의 DT 패키지는 datatable() 함수로 그래프를 그리는데, 아래 코드를 살펴보면 한 페이지에 25 개 행씩 데이터가 표시되도록 하였으며(pageLength = 25), 페이지 처리를 하였고(bPaginate = T), 필터는 테이블의 윗부분에 위치시켰다(filter = 'top')
knitr 패키지의 kable() 함수로 그린 그래프와의 비교.
DT 패키지의 datatable() 함수로 그린 표가 기능도 많고, 행의 색도 구분되고.. 훨씬 더 가독성도 높다.
Shiny flexdashboard
에 DT 패키지로 그린 표를 추가하기 위해서는 datatable()의 아웃풋을 DT 패키지의 renderDataTable() 함수로 wrap 해야 한다.
flexdashboard 의 valueBox()로 아이콘 설정
대시보드를 구성할 때, 한 개 또는 두 개의 값을 강조해서 그림 또는 아이콘과 같이 보여주고 싶을 때가 있는데,
이 경우 flexdashboard 에서는 valueBox() 함수를 이용해서 제목, 아이콘(옵션)과 함께 보여주고 싶은 값을 아래와 같이 표시해 줄 수 있다
R 의 flexdashboard 패키지에 내재되어 있는 valueBox() 함수
valueBox(value, caption = NULL, icon = NULL, color = NULL, href = NULL)
3. valuebox 구성 예시 코드
1. 먼저, YAML 헤더에서 orientation 을 rows 로 설정하여 행 순서로 대시보드가 구성되도록 하였으며,
2. 패키지는 flexdashboard, ggplot2, knitr 를 불러왔다. 여기서 knitr 패키지는 kable() 함수로 표를 만들 때 필요
3. 첫 번째 행(Row 1)에서는 flexdashboard 의 valueBox() 함수를 이용하여 4 개의 valuebox 를 구성하였으며, 각각의 설정은 아래와 같다
3-1. 첫 번째 valuebox
- 숫자 42 를 valueBox() 함수 내에 바로 입력
- 아이콘은 fa-pencil
- 제목은 level 3 마크다운 헤더 뒤에 "valuebox Example1" 기재
- 색깔을 미설정 : default 로 "primary"(파란색)가 적용됨
3-2. 두 번째 valuebox
- num 객체에 8 입력 후, valueBox() 함수에서 num 을 참조
- 아이콘은 fa-angry
- 제목은 level3 마크다운 헤더 뒤에 "# of Bit Coin" 기재
- 색깔은 "info"(보라색)
3-3. 세 번째 valuebox
- num 객체에 50 입력 후, valueBox() 함수에서 num 을 참조
- 아이콘은 ion-social-twitter
- 제목은 level3 마크다운 헤더 뒤에 "valuebox Example3"을 기재하였으나, valueBox() 함수 안의 caption = "New"가 오버라이드
- 색깔은 num 객체가 10 초과면 "warning"(주황색), 10 이하면 "danger"(빨간색)이 적용되도록 ifelse() 함수 적용
3-4. 네 번째 valuebox
- 숫자 107 을 valueBox() 함수내에 바로 입력
- 아이콘은 glyphicon-time
- 제목은 level3 마크다운 헤더 뒤에 "valuebox Example4"를 기재하였으나, valueBox() 함수 안의 caption = "Minutes"가 오버라이드
- 색깔은 "Success"(초록색)
4. 두 번째 행(Row 2)는 2 개의 열로 나눴으며,
1 열은 ggplot2 의 막대그래프(bar graph)를
2 열은 knitr 패키지의 kable() 함수로 표를 구성하였다.
'경기도 인공지능 개발 과정 > R' 카테고리의 다른 글
| R 멤버십 프로젝트 기획 (RFM 분석과 의사결정나무 이용) (0) | 2022.05.06 |
|---|---|
| R Shiny (0) | 2022.05.03 |
| R 군집분석 & 연관분석 (0) | 2022.05.03 |
| R R 마크다운(Rpubs) (0) | 2022.05.02 |
| R 크롤링 - 2 (0) | 2022.04.27 |