지수 인디케이터 in R

사용데이터 : https://2stndard.tistory.com/68

인디케이터(indicator) trace : 지수 차트

인디케이터는 단일 수치에 대한 시각화 방법이다. plotly에서 단일 수치를 표현하는 방법으로 수치 표시, 증감치 표시, 게이지 사용의 세 가지 시각적 방법을 제공하고 이들을 서로 조합하여 사용할 수 있다. 이들을 사용하여 ‘단계’, ‘임계값’ 등의 컨텍스트 정보를 포함하는 수치를 시각화할 수 있다.

인디케이터 trace를 사용하기 위해서는 add_trace()의 속성을 ’indicator’로 설정함으로써 사용할 수 있다.

mode, value

인디케이터 trace에서 제공하는 표시 방법은 수치 표시, 증감량 표시, 게이지 표시의 세가지 방법을 제공한다. 이들을 설정하는 속성이 mode이다. 이 mode는 수치를 표현하는 ‘number’, 증감을 표현하는 ‘delta’, 게이지를 사용하는 ’gauge’의 세 가지를 설정할 수 있고 각각은 +를 사용하여 조합할 수 있다.

인디케이터에서 표시해야 할 수치는 value로 설정하고 단일 수치를 설정한다.

plot_ly() |>
  add_trace(type = 'indicator', mode = "gauge+number", value = 200)

gauge

gauge는 게이지 형태의 시각화를 통해서 단일 수치를 표현한다. 게이지의 형태는 둥근 반원 형태의 게이지를 사용하는 ’angler’와 막대 형태의 게이지를 사용하는 ’bullet’의 두가지가 제공된다. 이는 shape 속성을 사용하여 설정이 가능하다.

plot_ly() |>
  add_trace(type = 'indicator', mode = "gauge+number", 
            ## gauge의 shape를 angular로 설정
            gauge = list(shape = 'angular', 
                         bar = list(color = 'darkblue')), 
            value = 3.5)

plot_ly() |>
  add_trace(type = 'indicator', mode = "gauge+number", 
            ## gauge의 shape를 angular로 설정
            gauge = list(shape = 'bullet', 
                         bar = list(color = 'darkblue')), 
            value = 3.5)

인디케이터 trace의 게이지 모드에서 하나 중요하게 사용되는 속성이 steps 속성이다. steps 속성은 전체 게이지를 단계별로 구간을 설정하는 데 사용되는 속성이다. steps는 range, color, line 등의 세부 속성으로 구성된 리스트로 설정할 수 있다. 각 단계는 range로 시작점과 끝점이 포함된 벡터로 구분되며 이 구간들의 color, line 등의 속성을 설정할 수 있다.

step_colors <- RColorBrewer::brewer.pal(5, 'Blues')

plot_ly() |>
  add_trace(type = 'indicator', mode = "gauge+number",
            ## 인디케이터 제목 설정
            title = list(text = '조사 만족도', 
                         font = list(size = 15), 
                         align = 'right'), 
            ## gauge의 세부 속성 설정
            gauge = list(shape = 'bullet', 
                         bar = list(color = 'darkblue'), 
                         ## 전체 범위는 0~5로 설정
                         axis = list(range = c(0, 5)),
                         ## 각 단계별로 range, color, line의 속성 설정
                         steps = list(
                           list(range = c(0,1), color = step_colors[1], 
                                line = list(color = 'white', width = 5)),
                           list(range = c(1,2), color = step_colors[2], 
                                line = list(color = 'white', width = 5)),
                           list(range = c(2,3), color = step_colors[3], 
                                line = list(color = 'white', width = 5)),
                           list(range = c(3,4), color = step_colors[4], 
                                line = list(color = 'white', width = 5)),
                           list(range = c(4,5), color = step_colors[5], 
                                line = list(color = 'white', width = 5))
                           ),
                         ## threshhold(임계치) 세부 속성 설정
                         threshold = list(line = list(color = 'white', width = 3),
                                          value = 4.5)
                         ), 
            value = 3.5) |>
  ## 가로로 길게 시각화 크기 설정
  layout(height = 100, width = 800, margin = list(l= 120, r= 10))

delta

delta는 데이터의 증감량을 나타내는 인디케이터를 표시한다. 가장 흔히 보이는 곳이 주식관련 시각화인데 전일 대비 주가를 파란색, 빨간색 삼각형과 같이 나타내는 것이 delta이다. 증감량을 표시해야 하기 때문에 증감의 기준이 되는 수치인 reference가 설정되어야 하고 increasing과 decreasing을 통해 증감의 표시를 설정할 수 있다.

plot_ly() |>
  add_trace(type = 'indicator', mode = "gauge+delta+number", 
            ## 인디케이터의 제목 설정
            title = list(text = '<b>조사 만족도</b>', font = list(size = 30)), 
            ## angular 형태의 gauge 세부 속성 설정 
            gauge = list(shape = 'angular',
                         bar = list(color = 'darkblue'), 
                         ## steps 세부 속성 설정
                         steps = list(
                           list(range = c(0,1), color = step_colors[1], 
                                line = list(color = 'white', width = 5)),
                           list(range = c(1,2), color = step_colors[2], 
                                line = list(color = 'white', width = 5)),
                           list(range = c(2,3), color = step_colors[3], 
                                line = list(color = 'white', width = 5)),
                           list(range = c(3,4), color = step_colors[4], 
                                line = list(color = 'white', width = 5)),
                           list(range = c(4,5), color = step_colors[5], 
                                line = list(color = 'white', width = 5))
                           ),
                         ## threshold 세부 속성 설정
                         threshold = list(line = list(color = 'white', 
                                                      width = 3),
                                          value = 4.5)
                         ), 
            value = 3.5, 
            ## delta의 세부 속성 설정
            delta = list(reference = 4, position = "top", 
                         ## 증가치 표현을 위한 increasing 세부 속성 설정
                         increasing = list(color = 'darkred', symbol = '+'), 
                         ## 감소치 표현을 위한 decreasing 세부 속성 설정
                         decreasing = list(color = 'darkblue', symbol = ''), 
                         font = list(size = 35)
                         ), 
            ## 수치 표현을 위한 number 세부 속성 설정
            number = list(prefix = '만족도 :', font = list(size = 40))
  ) |> layout(margin = margins)