R flexdashboard
flexdashboard를 이용하면 R로 유연하고(flexible), 매력적이며(attractive), 쌍방향의(Interactive) 대시보드를 쉽게(easily) 만들 수 있다.
대시보드 작성 및 커스터마이제이션은 Rmarkdown에 기반하여 이루어지며, Shiny 컴포넌트들도 덧붙일수도 있다.
이외에도 htmlwidgets, base/lattice/grid 그래픽, tabula(표) 데이터, 주석 같은 다양한 컴포넌트들까지도 지원하며, 열과 행 기반 레이아웃, 스토리보드 등이 제공된다는 장점도 가지고 있다.
flexdashboard는 install.package()함수를 이용해서 설치 한 후 File > New File > R Markdown 메뉴로 들어가서 팝업화면 좌측 아래의 From Template 를 선택한다.
그리고 오른쪽에 보여지는 템플릿에서 Flex Dashboard를 고르고 OK버튼을 누르면 기본 템플릿이 불러와진다.
기본적인 형태는 우리가 알고 있는 markdown 또는 shiny 템플릿과 유사하다.
먼저 YAML 헤더 부분에 제목과 output 형식 등이 기재되어 있고, 이 후에는 백틱 3개( ``` )로 감싸져 있는 r 코드청크가 보인다.
그 밑에는 열(column)과 행(row)이 구분되어 있고, 그 안에 다시 r 코드청크가 기재되어 있는데, 기본 템플릿은 2개의 열(column)로 구분되어 있다.
flexdashboard의 레이아웃
title, output 등이 설정 되어 있는 YAML 헤더 부분이 먼저 나오는데, output 설정 부분에는 orientation : columns와 vertical_layout: fill이라는 부분이 보이고, 이어 백틱 3개( ``` )로 둘러싸인 r 코드청크가 나온다.
그 아래에는 Column이라고 기재된 부분이 2군데 나온다. 그리고 각각의 Column 부분은 ------로 구분되어 있고, 그 밑에는 ###로 표시된 chart 부분이 나온다.
그리고 이 default 템플릿을 실행하면
2개의 열로 구분
1열은 한 개의 행, 2열은 두 개의 행으로 구성
그리고 열과 행의 내용들은 사용자의 브라우져 화면 크기에 맞게 자동으로 넓이와 높이가 조정됨을 알 수 있다.
flexdashboard에서는 default로 열 -> 행의 방향으로 설정이 이루어진다.
이를 YAML 헤더에서 확인할 수 있는데, output: 아래 부분의 orientation: columns 부분이다. 이 부분은 default이기 때문에, 삭제해도 무관하다.
열과 행의 구분은 ---- 와 ### 를 이용하는데, 사실 이건 markdown의 문법이다.
바로 markdown 헤더.
default인 orientation: columns 옵션 : 열은 ---, 행은 ###로 구분된다.
여기서 유의할 것은, 열은 항상 ----이고 행은 항상 ###로 구분되는 것이 아니라는 것이다.
orientation: columns 로 설정했기 때문이라는 것에 유의해야 한다.
- 열(column) level 2 makdown 헤더인 -----(개수 무관)로 구분
- 행(row) level 3 markdown 헤더인 ###(개수 3개)로 구분
만약 행 -> 열의 순서로 설정이 이루어지기를 원한다면, YAML 헤더의 orientation: 부분만 columns를 rows로 변경하면 된다.
그리고 knit 버튼을 눌러 실행해보면, 아래와 같이 2개의 행이 먼저 구분되었으며 1행은 1개의 열, 2행은 2개의 행으로 구분되었음을 확인할 수 있다.
Scrolling 레이아웃
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개의 열로 대시보드를 구성 후, 원래의 크기로 그래프 등을 나열하여 보여주고 싶을 때 유용하다.
tabset 레이아웃
대시보드의 한 행이나 열에 여러 개의 그래프 등의 자료를 보여주고 싶을 때에는,
한 화면에 모두 뿌려주는 것보다는 tabset을 이용하는 것이 더 나을 수도 있다.
이는 특히, 어떤 컴포넌트는 메인 정보여서 모든 사용자에게 보여지길 원하고, 다른 컴포넌트는 부가적인 정보라서 관심 있는 사용자들만 볼 수 있게 하기를 원하는 경우에 유용할 수 있는데,
flexdashboard 홈페이지의 설명에 따르면, 많은 경우에 이 화면에서 정보를 찾아 들어가기 편한 tabset이 그래프 등의 컴포넌트들을 상하로 나열하는 vertical_layout: scroll 옵션보다도 정보 전달 입장에서는 훨씬 더 효율적인 것이라고 제시한다.
flexdashboard에서의 tabset 적용을 위해서는, 아래와 같이 {.tabset} 속성을 열 또는 행 구분할 때 기재하면 된다.
아울러, .tabset-fade를 {.tabset} 안에 기재하면, 탭 전환 시, 부드럽게 처리되는 효과까지 넣을 수 있다.
flexdashboard의 그래프
dygraphs 패키지는 시계열 자료에 대한 시각화 그래프 구현 할 때, 하이라이트, 줌 등의 기능을 제공한다.
plotly 패키지는, R의 ggplot2 그래픽을 인터렉티브한 웹 버전으로 쉽게 변환해 준다. 정말 보기 좋고 인터렉티브한 그래프를 간단히 그릴 수 있는 기능들이 훌륭하다.
highcharter는 자바스크립트의 그래픽 라이브러리로 유명한 highcharts에 대한 R 인터페이스. 이 패키지도 plotly 처럼 간단하면서도 깔끔하게 인터렉티브한 그래프를 그려준다.