Lab_09: 인터랙티브 시각화

저자

이상일·김우형·박서우(서울대학교 지리교육과)

Modified

2026년 1월 10일

개요

여기서는 대시보드의 구성 요소로 활용할 수 있는 다양한 시각화 기법을 익힌다. 우리는 지금까지 도표(차트, 플롯, 그래프, 테이블)를 중심으로 데이터 시각화 기법을 다루었다. 특히 ggplot2 패키지는 이러한 과정에서 핵심적인 역할을 했다. 그런데 지금까지의 모든 도표는 정적(static) 이라는 특징이 있다. 많은 경우 도표는 정적으로 표현될 수 밖에 없으며, 또한 많은 경우 도표는 정적인 것으로 충분하며, 어떤 경우에는 동적인 것보다 더 낫다.

소통을 위한 시각화 재료로서 정적인 도표가 가지는 절대적인 중요성에도 불구하고, 상호작용성(interactivity)과 생동감(animatedness)이 부가된 도표는 어떤 상항에서는 소통의 본질적 가치를 고양하는데 많은 도움을 줄 수 있다.

먼저, Quarto Document를 만들고 YAML 해더를 작성한다.

---
title: "Interactive Visualizetion"
author: Your_Name
format: 
  dashboard:
    scrolling: true
theme: cosmo
editor: visual
editor_options: 
  chunk_output_type: console
---

gapminder 데이터를 실습의 여러 곳에서 활용할 것이다. 우선 tidyverse와 gapminder패키지를 불러온다.

library(tidyverse)
library(gapminder)

1 임베딩

동적, 반응형 시각화를 직접 제작하는 과정을 배우기 전에 대시보드에 동적, 반응형 시각화를 실현하는 가장 쉬운 방법은 동적, 반응형 시각화가 구현되어 있는 웹사이트를 대시보드에 불러오는 것일 것이다. 이것을 임베딩(embedding)이라고 하는데, HTML의 iframe 태그를 사용한다.

통계청의 통계놀이터는 다양한 주제에 대해 동적, 반응형 시각화를 제작하여 이용자들에게 제공하고 있다. 해당 홈페이지의 [비주얼 통계]에서 “우리나라 출생아 수와 합계 출산율의 변화”를 검색하면 동적, 반응형 시각화가 구현된 웹페이지를 볼 수 있다. [공유]를 눌러 URL을 복사하고, 아래와 같은 코드를 Quarto 문서에 삽입하면 해당 웹페이지를 임베딩할 수 있다. src="" 부분에 복사한 URL를 붙여 넣는다는 것을 쉽게 알 수 있을 것이다. 여기에 다른 URL을 교체해 넣으면 대부분의 웹사이트를 임베딩할 수 있는데, 임베딩이 불가능하게 막아 뒀거나 광고가 많이 붙어 있는 웹사이트는 잘 안된다. style="" 부분을 적절히 수정하면 임베딩된 웹사이트의 외견을 바꿔볼 수 있다.

<iframe src="https://kosis.kr/edu/share.do?shareID=S0500_16" 
loading="lazy" style="width: 100%; height: 600px; border: 
0px none;" allow="web-share; clipboard-write" data-external="1"></iframe>

Our World in Data는 아름다운 인터랙티브 시각화 자료를 제공하는 것으로 유명하다. 심지어 [공유] 버튼을 눌렀을 때 </> Embed 라는 옵션이 나타나는 데, 이것을 누르면 위와 같은 iframe 태그 내용이 그대로 나타나기 때문에 복사하여 붙이기만 하면 된다. Chart 탭 뿐만 아니라 Table 탭과 Map 탭도 있으니 눌러서 내용을 확인할 수 있다. 아마도 ECharts 자바스크립트 라이브러리를 사용한 것으로 보인다.

<iframe src="https://ourworldindata.org/grapher/child-mortality?time=earliest..latest&tab=chart" 
loading="lazy" style="width: 100%; height: 600px; border: 0px none;" allow="web-share; clipboard-write" data-external="1"></iframe>

그림 1: 임베딩 사례: Our World in Data

Our World in Data에서 제공하는 다양한 인터랙티브 시각화 자료를 임베딩하는 절차를 요약하면 다음과 같다.

Our World in Data에 접속한다.
첫 화면의 하단에 있는 ’Data explorers’의 네 개 박스로 이동한다. 인구 관련 데이터에 관심이 있다면 ’Population & Demography’를 선택한다.
’Population & Demography Data Explorer’에서 제공된 다양한 옵션을 이용해 원하는 인터랙티브 시각화 자료를 완성한다.
‘Share’를 클릭하고’</> Embed’를 선택한 후 URL을 복사한다. 흥미로운 점은 위에서 어떤 옵션을 어떻게 설정했느냐에 따라 URL이 달라진다는 사실이다.
iframe 태그의 “src=”에 붙여 넣어 임베딩을 완수한다.

2 테이블

우리는 지금까지 테이블(table)의 중요성에 대해 거의 다루지 않았다. 그러나 상호작용형 테이블 혹은 대화형 테이블이 되었을 때, 많은 경우, 테이블은 가장 효과적인 정보 전달 도구가 된다. 특히, 데이터 변형하기를 통해 새로운 요약 테이블을 생성하고, 그것을 대화형으로 제시하는 것은 매우 중요한 데이터사이언스의 과정이다. 여기서는 DT 패키지를 활용하여 간단한 인터랙티브 테이블을 만들어 본다. 웹에서 인터렉티브 테이블을 생성할 수 있게 해주는 다양한 종류의 JavaScript 라이브러리가 존재한다. 예를 들어 DataTables, FlexTable, React Table 등이 있는데, DT 패키지는 DataTables를 쓸 수 있게 해주는 래퍼 패키지이다.

library(DT)

그리고 gapminder 데이터를 datatable() 함수를 통해 불러온다. R 코드를 실행하려면 반드시 코드 청크 안에 코드를 넣어야 한다. 청크 안의 코드는 R이 인식하여 실행하고, 결과를 문서에 출력한다.

datatable(gapminder)

결과를 좀 더 크게 보기 위해, ‘Render’ 버튼 바로 오른편에 있는 아이콘을 클릭해 ’Chunk Output in Console’를 선택할 수 있다. 결과 테이블을 이리저리 살펴본다. 언뚯 보면 View() 함수를 활용해 데이터프레임을 살펴보는 것과 유사한 것처럼 보이지만, 부가적인 기능이 제공된다.

DT 패키지는 테이블의 상호작용성과 관련하여 몇 가지 기능을 제공한다.

Pagination: 페이지를 이동할 수 있는 기능
Instant search: 즉각적인 찾기 기능(Search에 타이핑하기 시작하면 즉각적으로 검색 결과 보여줌)
Multi-column ordering: 다중 컬럼 정렬 기능(컬럼 하나를 선택한 후 ctrl을 누른 상태에서 다른 컬럼을 선택)
Filtering: 값을 정렬할 수 있는 기능
Editable: 셀 값을 수정할 수 있는 기능
Buttons: 셀 숨기기, CSV, PDF, XLSX 등의 확장자로 내보내기 등을 수행하는 버튼 생성 기능

그 중 몇 가지 기능을 여기에서 살펴본다. 자세한 사항은 DT 패키지 홈페이지에 잘 정리되어 있다.

2.1 테이블 CSS 클래스

datatable() 함수의 class 인수를 통해 테이블의 외관을 바꿀 수 있다. 다음과 같은 옵션이 가능하다.

Class name	Description
`display`	`stripe`, `hover`, `row-border`, `order-column`을 동시 적용한 디폴트
`cell-border`	모든 셀의 상하좌우에 경계선 표시
`compact`	여백 축소
`hover`	마우스의 위치에 따라 점멸 효과
`nowrap`	줄바꿈 없이 텍스트 표시
`order-column`	정렬의 키가 되는 컬럼에 하이라이트 표시
`row-border`	행별 경계선 표시
`stripe`	행을 스트라이프로 표시

아래와 같이 cell-border과 compact를 함께 실행해 보고 테이블의 변화를 확인한다.

datatable(head(gapminder), class = "cell-border compact")

또한 특정 컬럼의 정렬 방식(왼편, 오른편, 중앙)을 변경할 수 있다. 사용가능한 옵션은 다음과 같다.

Class name	Description
`dt[-head\|-body]-left`	왼편 정렬
`dt[-head\|-body]-center`	가운데 정렬
`dt[-head\|-body]-right`	오른편 정렬
`dt[-head\|-body]-justify`	양쪽 맞춤
`dt[-head\|-body]-nowrap`	줄바꿈 없는 맞춤

아래는 첫 번째와 두 번째 컬럼(country, continent)의 내용(body)을 가운데 정렬로 나타낸다.

datatable(head(gapminder),
          options = list(
            columnDefs = list(list(className = "dt-body-center", targets = 1:2))
          ))

2.2 테이블 에디팅

editable 인수를 통해 테이블의 값을 수정할 수 있게 만들 수 있다. 테이블의 특정 셀에 더블클릭하면 수정할 수 있다.

datatable(head(gapminder), editable = "cell")

2.3 컬럼 필터

다음과 같은 방식으로 필터를 설정할 수 있다.

datatable(gapminder, filter = "top", 
          options = list(
            pageLength = 5, 
            autoWidth = TRUE
          ))

2.4 버튼 기능

extenstion에 Buttons, dom에 Bftip, buttons에 c("copy", "excel", "pdf", "print")를 입력하면 버튼 기능을 활성화할 수 있다. 각 인수가 무엇을 의미하는지는 다음의 웹사이트를 참고할 수 있다.

datatable(gapminder, filter = "top",
          extensions = "Buttons",
          options = list(
            pageLength = 5,
            autoWidth = TRUE,
            dom = "Bfrtip",
            buttons = c("copy", "excel", "pdf", "print")
          ))

3 그래프

3.1 인터랙티브 그래프

인터랙티브 시각화 도구로 최근 널리 각광을 받고 있는 Plotly이다. Plotly는 사실 캐나다 퀘백에 본사를 두고 있는 데이터 시각화 전문 회사 이름이다. 그러나 보통 데이터 시각화용 JavaScript 라이브러리를 일컽는다. 이 라이브러리는 다양한 오픈소스 프로그래밍 언어에서 사용가능하며, R의 래퍼 프로그램이 plotly 패키지이다.

library(plotly)

gapminder 데이터를 이용하여 간단한 그래프를 그려보자. 문법이 ggplot2와 크게 다르지 않음을 알 수 있다.

gapminder |> 
  filter(year == 2007) |> 
  plot_ly(x = ~gdpPercap, y = ~lifeExp, color = ~continent,
          text = ~paste("Country: ", country, 
                        "<br>GDP per capita: ", gdpPercap, 
                        "$<br>Life Expectancy at Birth:", lifeExp))

줌(zoom), 팬(pan), 박스 선택(box select), 라소 선택(Lasso select), 줌인(zome in), 줌 아웃(zoom out) 등과 같은 상호작용 기능을 확인할 수 있다. 또 그래프 상의 데이터 포인트 위에 마우스를 올리면 text 인수를 통해 설정한 내용을 볼 수 있다. 그리고 범례를 클릭하면 특정 continent의 국가를 나타나지 않게 할 수 있다.

이와 같이 plotly 패키지를 직접 사용하면 다양한 기능을 활용할 수 있겠지만, plotly 패키지가 제공하는 ggplotly() 함수를 활용하면 ggplot2로 만들어진 그래프를 단숨에 plotly 그래프로 바꿀 수 있다. 물론 정확히 같지는 않다.

P <- gapminder |> 
  filter(year == 2007) |> 
  ggplot(aes(x = gdpPercap, y = lifeExp, color = continent)) +
  geom_point() + 
  scale_color_brewer(palette = "Set2") +
  theme_minimal()
ggplotly(P)

다음 예제 역시 반응형이지만 바로 다음에서 다룰 동적인 특성도 동시에 가지고 있는 그래프를 만드는 것이다. 역시 plotly 패키지를 이용한다.

gapminder |> 
  plot_ly(x = ~log10(gdpPercap), y = ~lifeExp,
          text = ~paste("Country: ", country)) |> 
  add_markers(color = ~continent, size = ~pop, frame = ~year, 
              marker = list(sizeref = 0.2, sizemode = "area"))

하단에 있는 ‘Play’ 버튼을 누르면 연도에 따라 그래프가 바뀌면서 동적인 효과가 나타나게 된다.