plotly trace의 공통 속성(Attribute) - text, textposition, texttemplate, textfont

trace의 공통 속성(Attribute) - text 관련 속성

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

text, textposition, texttemplate, textfont

데이터 시각화에서 데이터는 다양한 도형으로 표현되기 때문에 데이터의 정확한 값을 알아보기는 어렵다. 이를 보완하기 위해 데이터 시각화에 데이터 값을 표기하는 경우가 많다. plotly의 많은 trace에서 데이터 값을 표현하기 위해서는 text 속성을 사용하면 간단히 표시할 수 있다. 표시되기를 원하는 변수를 text에 매핑함으로써 X, Y축의 위치나 trace의 type에 적합한 위치에 데이터 값을 표시할 수 있으며 textposition과 texttemplate를 사용하여 표시되는 값의 세부 설정을 변경할 수 있다.

text 속성은 데이터로 표시되어야 하는 문자열을 매핑하거나 설정하는 속성이다. text에 단일 문자열을 설정하면 모든 막대에 설정된 문자열이 표시되고 문자열 벡터가 설정되면 문자열 벡터의 순서에 따라 막대 위에 문자열이 표시된다.

## 긴 형태의 100일간 코로나19 데이터 중에
df_covid19_100 |>
  ## 국가명으로 그룹화
  group_by(location) |>
  ## 확진자수의 합계를 new_cases로 산출
  summarise(new_cases = sum(new_cases)) |>
  ## X축을 location, Y축과 text를 new_case로 매핑
  plot_ly(x = ~location, y = ~new_cases, text = ~new_cases) |> 
  layout(title = list(text = "지역별 코로나19 확진자수"),
         xaxis = list(title = '지역'),
         yaxis = list(title = '확진자수'), 
         margin = margins)

textposition는 text의 위치를 설정하는 속성이다. textposition에는 ‘inside’, ‘outside’, ‘auto’, ‘none’의 네 가지를 설정할 수 있다. ’inside’는 막대의 안쪽에 텍스트를 위치시킨다. 이 경우 막대의 너비에 따라 가로로 표시될 수도 있고 세로로 표시될 수도 있다. ’outside’는 막대 끝의 바깥에 텍스트를 위치시키는데 마찬가지로 막대의 너비에 따라 가로 혹은 세로로 표기될 수 있다. 또 ’outside’는 막대가 쌓이는 ’stack’ 형의 막대 그래프에서는 ’inside’와 동일하게 표시된다. ’auto’는 plotly에서 자동적으로 계산된 형태로 텍스트가 표시된다. ’none’은 텍스트가 표시되지 않는다.

## 긴 형태의 100일간 코로나19 데이터 중에
df_covid19_100 |>
  ## 국가명으로 그룹화
  group_by(location) |>
  ## 확진자수의 합계를 new_cases로 산출
  summarise(new_cases = sum(new_cases)) |>
  ## X축을 location, Y축과 text를 new_case로 매핑
  plot_ly(x = ~location, y = ~new_cases, text = ~new_cases,
          ## textposition을 'inside'로 설정
          textposition = 'inside') |> 
  layout(title = list(text = "지역별 코로나19 확진자수 - textposition = 'inside'"),
         xaxis = list(title = '지역'),
         yaxis = list(title = '확진자수'), 
         margin = margins)

df_covid19_100 |>
  group_by(location) |>
  summarise(new_cases = sum(new_cases)) |>
  plot_ly(x = ~location, y = ~new_cases, text = ~new_cases, 
          ## textposition을 'outside'로 설정
          textposition = 'outside') |> 
  layout(title = list(text = "지역별 코로나19 확진자수 - textposition = 'outside'"),
         xaxis = list(title = '지역'),
         yaxis = list(title = '확진자수'), 
         margin = margins)

df_covid19_100 |>
  group_by(location) |>
  summarise(new_cases = sum(new_cases)) |>
  plot_ly(x = ~location, y = ~new_cases, text = ~new_cases, 
          ## textposition을 'auto'로 설정
          textposition = 'auto') |> 
  layout(title = list(text = "지역별 코로나19 확진자수 - textposition = 'auto'"),
         xaxis = list(title = '지역'),
         yaxis = list(title = '확진자수'), 
         margin = margins)

df_covid19_100 |>
  group_by(location) |>
  summarise(new_cases = sum(new_cases)) |>
  plot_ly(x = ~location, y = ~new_cases, text = ~new_cases, 
          ## textposition을 'none'으로 설정
          textposition = 'none') |> 
  layout(title = list(text = "지역별 코로나19 확진자수 - textposition = 'none'"),
         xaxis = list(title = '지역'),
         yaxis = list(title = '확진자수'), 
         margin = margins)

texttemplate은 텍스트가 표시되는 형태를 설정하는 type이다. texttemplate는 hovertemplate의 정의와 같이 사용되는데 ‘%{변수:변수포맷}’의 형태로 사용된다. 변수 포맷에서 사용하는 포맷은 자바 스크립트의 d3 format을 사용한다. 앞의 예에서 일반대학의 입학생수의 포맷에 천단위 콤마를 넣는다면’%{text:,}‘로 설정하고 소수점 아래 두째 자리까지 표기한다면’%{text:2f}’로 설정한다.

df_covid19_100 |>
  group_by(location) |>
  summarise(new_cases = sum(new_cases)) |>
  plot_ly(x = ~location, y = ~new_cases, text = ~new_cases, 
          textposition = 'auto',
          ## texttemplate를 설정
          texttemplate = '%{text:,}'
          ) |> 
  ## 제목, 축제목, 여백 설정
  layout(title = list(text = "지역별 코로나19 확진자수 - texttemplate = '%{text:,}'"),
         xaxis = list(title = '지역'),
         yaxis = list(title = '확진자수'), 
         margin = margins)