R ggplot을 interaction plot 으로 변경하는 방법(ggiraph, htmltools 활용)

R ggplot을 ggiraph을 사용하여 html과 java script를 활용한 interaction plot. html 리소스 만들기

- 웹에서 java script 통해 상호작용이 가능한 plot으로 변경 

 

<ggplot interaction plot 결과(마우스 타게팅시 plot, point 별 강조 및 tooltip 출력>

1. 데이터 준비

ggplot에서 기존에 사용하던 데이터 컬럼 구성(위의 데이터는 시계열 데이터)

추후에 각 선과 점에 마우스를 올렸을때 동작하는 tooltip과 interaction을 위해서 tooltip용 컬럼을 추가해준다.

 

 

2. 기본 ggplot grid 생성

library(ggplot2)
library(ggthemes)
library(ggiraph)

gg <- ggplot(Sim_data, aes(x = Seq, y = Data, 
                           colour = group, group = group , label = group))
                           +ggtitle("APPLE")

위와 같은 기본 ggplot 화면을 생성한다, ggline, geom 등의 기존의 plot 구성요소는 생성하지 않는다.

 

3. line과 점을 생성

마우스를 올려놓았을 시에 추가해 놓았던 tooltip 표시와 선택 line을 강조한다.

gg <- ggplot(Sim_data, aes(x = Seq, y = Data, 
                           colour = group, group = group , label = group))
  + ggtitle("AAPL")
  + geom_line_interactive(aes(tooltip = tooltip, data_id = group))

data_id는 그룹핑되는 기준 컬럼이며 tooltip은 표시되는 선마다 표시되는 tooltip의 내용

기존의 ggplot의 설정도 추가 가능하다.

 

4. CSS 적용후 저장

x <- girafe(ggobj = gg, width_svg = 10, height_svg = 4,
            options = list(
              opts_hover_inv(css = "opacity:0.1;"),
              opts_hover(css = "stroke-width:2;")
            ))

url = paste0("저장위치/이름",".html")
htmltools::save_html(x,url)

만들어 둔 ggplot에 girafe함수를 활용하여 css style을 적용한다.

다른 곳에서 해당 plot을 사용하기 위하여 R 내부에서 사용하는 ggplot 객체를 html형태로 변경하여 저장한다.

저장한 HTML 파일을 열어 plot을 확인할 수 있다.

 

<생성된 interaction plot>

5. 추가적인 Point, ggplot 기존 설정 활용 가능

gg <- ggplot(Sim_data, aes(x = Seq, y = Data, 
                           colour = group, group = group , label = group))
  +ggtitle("AAPL")
  + geom_line_interactive(aes(tooltip = tooltip, data_id = group))
  + scale_color_viridis_d()
  + geom_point_interactive(aes(tooltip = TargetDate, data_id = group),size=1)

Plot을 생성 할 시에 Point와 같은 ggplot에서 활용 가능한 요소들을 추가하여 서로 다른 interaction을 적용할 수 있다.(위의 소스에서는 line과 point가 다른 tooltip을 가짐)

- geom_map_interactive
- geom_polygon_interactive
- geom_bar_interactive
- geom_point_interactive
- geom_line_interactive

또한 ggplot 설정을 적용하여 plot을 기존에 스타일로 구성할 수 있다.