[ADP 필기 요약]_5과목 데이터 시각화_④

1. 시각화 구현 개요

구분	설명	예시
전문 시각화 플랫폼	시각화 기능을 제공하는 전문 도구 활용	Tableau, Gephi
시각적 분석 플랫폼	BI, 분석 보고서, 대시보드 중심 도구 활용	Power BI, Tableau
시각화 라이브러리	프로그래밍 기반으로 직접 시각화 구현	D3.js, Google Charts
인포그래픽	데이터 표현에 디자인 요소를 강화	Visual.ly 등

 

---

2. 시각화 플랫폼

• 시각화 플랫폼은 데이터 분석 결과를 시각적으로 표현하고, 보고서나 대시보드 형태로 제공하는 도구
• 주로 BI 분야에서 많이 활용되며, 다차원 데이터 분석 결과를 시각화하거나 보고서로 생성하는 기능을 지원

① Gephi

• Gephi는 복잡한 네트워크 데이터를 시각화할 때 유용한 오픈소스 그래프 소프트웨어
• 특히 수많은 Node와 Edge로 구성된 네트워크 구조를 표현하는 데 적합함

예를 들어 다음과 같은 데이터를 시각화할 때 활용할 수 있다.

• 사회연결망 분석
• 관계망 분석
• 네트워크 구조 분석
• 링크 분석

② Tableau

• Tableau는 대표적인 시각적 분석 플랫폼
• Tableau의 핵심은 사용자가 데이터를 직접 탐색하면서 그래프와 대시보드를 쉽게 만들 수 있다는 점
  데이터 소스에 연결하면 필드를 차원과 측정값으로 나누고, 사용자는 필드를 선반에 끌어다 놓는 방식으로 시각화를 구성할 수 있음

Tableau의 특징은 다음과 같다.

• 다양한 데이터 소스 연결
• 실시간 데이터 분석 및 시각화
• 크로스탭, 피벗테이블, 대시보드 생성
• 비주얼 쿼리 언어인 VizQL을 통한 시각적 질의 지원

---

3. 시각화 라이브러리

• 시각화 라이브러리는 프로그래밍을 통해 직접 시각화를 구현할 수 있도록 지원하는 도구
• 최근에는 웹 브라우저 성능이 좋아지면서 JavaScript, HTML5, SVG, Canvas 기반 시각화 기술이 많이 활용

구분	핵심
시각화 플랫폼	설치된 도구나 플랫폼의 기능을 활용
시각화 라이브러리	API와 코드를 이용해 직접 구현
인포그래픽 도구	템플릿이나 디자인 중심으로 결과물 제작

 

도구	구분
Gephi	시각화 플랫폼
Tableau	시각화 플랫폼 / 시각적 분석 플랫폼
D3.js	시각화 라이브러리
Google Charts	시각화 라이브러리
Tangle	시각화 라이브러리
Visual.ly	인포그래픽 도구

 

---

4. 분석 도구를 이용한 시각화 구현: R

• ADP 시각화 구현 파트에서 가장 많이 등장하는 분석 도구는 R
• R은 통계 분석과 데이터 시각화에 강점이 있는 언어이며, 다양한 패키지를 통해 정적 그래프와 인터랙티브 그래프를 만들 수 있음

R을 활용한 시각화의 장점은 다음과 같다.

• 분석 결과를 바로 그래프로 표현할 수 있다.
• 대용량 데이터를 엑셀로 옮기지 않고 분석 서버에서 처리할 수 있다.
• 보고서, 대시보드, 웹 애플리케이션과 연동할 수 있다.
• ggplot2, Shiny, googleVis 등 다양한 시각화 도구를 사용할 수 있다.

4-1. ggplot2 기본 개념

• R 시각화에서 가장 중요한 패키지 중 하나가 ggplot2임
• ggplot2는 Grammar of Graphics에 기반한 시각화 시스템이다. 데이터를 지정하고, 변수를 시각적 속성에 매핑한 뒤, 어떤 그래픽 요소를 사용할지 정하면 그래프가 생성된다. ggplot2 공식 문서에서도 “데이터를 제공하고, 변수를 aesthetics에 매핑하고, 그래픽 primitive를 지정하면 나머지를 처리한다”고 설명한다.
• 기본 구조

ggplot(data, aex(x = 변수1, y = 변수2)) +
  geom_그래프유형()

• 핵심 함수

함수	의미
ggplot()	그래프의 기본 틀 생성
aex()	x축, y축, 색, 크기 등 시각적 매핑 지정
geom_point()	산점도
geom_line()	선그래프
geom_bar()	막대그래프
geom_histogram()	히스토그램
geom_smooth()	추세선 또는 스무딩 곡선
facet_grid()	조건별 그래프 분할
coord_cartesian()	좌표 범위 조정
scale_colour_continuous()	연속형 색상 스케일 조정

 

4-2. XY 그래프와 산점도

• XY 그래프는 두 변수의 관계를 확인할 때 사용한다.
• 예시 : ChickWeight 데이터에서 시간(Time)에 따른 체중(weight) 변화를 보고 싶다면 x축에 Time, y축에 weight를 지정
  식이 유형(Diet)에 따라 색을 다르게 표현하면 그룹별 차이도 확인할 수 있음

ggplot(ChickWeight, aex(x = Time, y = weight, colour = Diet, group = Chick)) +
  geom_line()

 

코드	의미
aes(x = Time, y = weight)	x축과 y축 지정
colour = Diet	Diet별 색상 구분
group = Chick	개체별 선을 따로 그림
geom_line()	선그래프 출력

• 산점도를 그릴 때는 geom_point()를 사용

ggplot(ChickWeight, aex(x = Time, y = weight, colour = Diet)) +
  geom_point(alpha = 0.3)

• alpha는 투명도를 조절하는 옵션 / 데이터 포인트가 많을 때 alpha 값을 낮추면 점이 겹치는 부분을 확인하기 쉬워짐

4-3. 히스토그램

• 히스토그램은 연속형 데이터의 분포를 확인할 때 사용
• 도수분포표를 그래프로 나타낸 것으로, 특정 구간에 데이터가 얼마나 많이 분포하는지 확인할 수 있음

ggplot(data, aex(x = weight, fill = Diet)) +
  geom_histogram(binwidth = 50)

 

옵션	의미
fill	막대 내부 색상
colour	막대 테두리 색상
binwidth	계급 구간의 너비
facet_grid()	그룹별 그래프 분할

히스토그램은 다음 상황에서 유용하다.

• 데이터 분포 확인
• 특정 구간에 값이 몰려 있는지 확인
• 이상값 확인
• 그룹별 분포 비교

4-4. 막대그래프

• 막대그래프는 범주형 데이터의 빈도나 값을 비교할 때 사용

ggplot(mtcars, aes(factor(cyl))) +
  geom_bar()

• factor(cyl)은 cyl 변수를 범주형으로 변환한다는 의미
• 막대그래프에서는 범주형 변수를 기준으로 빈도나 값을 비교하는 경우가 많으므로, 숫자형 변수라도 범주로 다룰 필요가 있으면 factor로 변환

옵션	의미
fill	막대 내부 색상
colour	막대 테두리 색상
width	막대 너비
position	누적, 나란히 배치 등 위치 조정

 

4-5. 선그래프

• 선그래프는 시간의 흐름에 따른 변화를 보기 좋기 때문에 시계열 데이터에서 많이 사용

ggplot(economics, aes(x = date, y = unemploy)) +
  geom_line()

선그래프의 주요 옵션은 다음과 같다.

옵션	의미
colour	선 색상
linewidth 또는 size	선 굵기
linetype	선 종류

 

4-6. facet_grid()

• facet_grid()는 조건별로 그래프를 나누어 보여주는 함수
• 예를 들어 다이아몬드 데이터에서 cut 등급별로 캐럿 분포를 나누어 보고 싶을 때 사용

ggplot(diamonds, aes(carat, ..density..)) +
  geom_histogram(binwidth = 0.2) +
  facet_grid(. ~ cut)

• facet_grid(. ~ cut)은 cut 값에 따라 그래프를 가로 방향으로 나누어 보여줌
  반대로 facet_grid(cut ~ .)은 세로 방향으로 나누는 방식

코드	의미
facet_grid(. ~ 변수)	변수별로 가로 방향 분할
facet_grid(변수 ~ .)	변수별로 세로 방향 분할

 

4-7. 포인트 그래프 효과

포인트 그래프는 산점도에서 데이터 포인트를 표현하는 방식이다.
포인트의 색, 모양, 크기, 투명도를 조정하면 데이터의 패턴을 더 잘 볼 수 있다.

 

투명도 조절

geom_point(alpha = 1/10)

 

색상 할당(범주별로 색상을 다르게 표현)

geom_point(aes(colour = factor(cyl)))

 

 

모양 할당(범주별로 점의 모양을 다르게 표현)

geom_point(aes(shape = factor(cyl)))

 

크기 할당(변수 값에 따라 점의 크기를 다르게 표현)

geom_point(aes(size = qsec))

옵션	의미
alpha	투명도
colour	색상
shape	점 모양
size	점 크기

---

4-8. Boxplot

• Boxplot은 데이터의 분포와 이상값을 확인할 때 자주 사용

qplot(cut, price, data = diamonds, geom = "boxplot")

 

요소	의미
중앙선	중앙값
박스 하단	제1사분위수
박스 상단	제3사분위수
수염	일반적인 데이터 범위
점	이상값

 

4-9. 다축 그래프

• 다축 그래프는 하나의 그래프에서 여러 축을 사용해 서로 다른 스케일의 데이터를 함께 표현하는 방식
• 다만 다축 그래프는 해석을 어렵게 만들 수 있으므로 주의가 필요 / ADP 시각화 디자인 원칙 관점에서는 그래프가 복잡해질수록 사용자가 값을 오해할 가능성이 커짐

---

5. 공간분석과 인터랙티브 시각화

5-1. googleVis

• googleVis는 R에서 Google Charts를 사용할 수 있도록 해 주는 패키지
• CRAN 문서 기준으로 googleVis는 R 데이터프레임을 기반으로 인터랙티브 차트를 만들 수 있게 하며, 차트는 로컬 R HTTP help server를 통해 표시되고 최신 브라우저와 인터넷 연결이 필요

대표적으로 다음과 같은 차트를 만들 수 있다.

• Motion Chart
• Geo Chart
• Scatter Chart
• Line Chart
• Map Chart

모션차트

• 모션차트는 시간에 따른 다차원 데이터의 변화를 직관적으로 보여주는 시각화

지오차트

• 지오차트는 위치 정보를 지도 위에 표현하는 시각화

인자	의미
locationvar	위치 변수
colorvar	색상으로 표현할 변수
sizevar	크기로 표현할 변수
hovervar	마우스 오버 시 표시할 변수

 

5-2. Shiny

• Shiny는 R에서 인터랙티브 웹 애플리케이션을 만들 수 있게 해 주는 패키지
• Shiny를 사용하면 R 분석 결과를 웹 페이지, 독립형 앱, R Markdown 문서, 대시보드 등에 포함할 수 있음
• Shiny의 기본 구조

구성	역할
UI	화면 구성
Server	실제 R 코드 실행 및 결과 생성

• ui.R과 server.R 두 파일을 같은 디렉터리에 두는 구조
• Shiny 화면 구성 요소

요소	설명
headerPanel	제목이나 주제 표시
sidebarPanel	입력 컨트롤 배치
mainPanel	결과 그래프나 테이블 표시

 

5-3. 모자이크 플롯

• 모자이크 플롯은 복수의 범주형 변수 간 관계를 파악하는 데 유용한 시각화 방법
• 특히 두 개 이상의 categorical variable이 있을 때 각 범주의 비율과 구조를 사각형의 면적으로 표현

모자이크 플롯의 특징은 다음과 같다.

• 범주형 변수 간 관계를 시각화한다.
• 각 범주의 크기를 면적으로 비교할 수 있다.
• EDA 과정에서 변수 간 구조적 특징을 파악하는 데 도움이 된다.
• 핵심 내용을 간단히 전달할 수 있다.

---

6. 라이브러리 기반 시각화 구현: D3.js

• ADP 시각화 구현 파트에서 가장 중요한 라이브러리는 D3.js
• D3.js는 JavaScript 기반 데이터 시각화 라이브러리로, HTML, SVG, CSS 등을 활용해 동적이고 인터랙티브한 시각화를 구현

6-1. D3.js의 특징

• JavaScript 기반 시각화 라이브러리
• HTML, SVG, CSS 활용
• SVG와 Canvas 기반 시각화 구현 가능
• CSS를 통해 레이아웃과 스타일 조정 가능
• 데이터와 문서 객체를 연결해 동적 시각화 구현
• 상호작용이 필요한 웹 기반 시각화에 적합

D3.js는 항상 SVG 객체만 기반으로 동작하는 것은 아니다.

공개 기출복원 자료에서도 “모든 시각화 요소들이 항상 HTML 문서의 SVG 객체 기반으로 동작한다”는 설명은 틀린 보기로 정리되어 있으며, 히트맵 등에서는 Canvas 객체가 사용될 수 있다고 설명한다.

 

6-2. D3.js 구현 절차

데이터 획득 → 데이터 파싱 → 데이터 필터링 → 데이터 표현 → 상호작용 추가

단계	설명
데이터 획득	외부 또는 내부 데이터 불러오기
데이터 파싱	데이터를 사용 가능한 형태로 변환
데이터 필터링	필요한 데이터만 추출
데이터 표현	SVG, Canvas 등을 이용해 시각화
상호작용 추가	이벤트, 툴팁, 확대, 필터링 등 적용

 

6-3. SVG

• SVG는 Scalable Vector Graphics의 약자로, 웹에서 벡터 그래픽을 표현하기 위한 방식
• SVG는 해상도와 독립적이며, 개별 요소를 객체로 다룰 수 있어 상호작용 시각화에 적합

SVG의 특징은 다음과 같다.

• 해상도에 독립적이다.
• 확대해도 깨지지 않는다.
• 개별 요소를 객체로 다룰 수 있다.
• 이벤트 핸들링이 가능하다.
• 사용자와 상호작용이 필요한 시각화에 적합하다.

6-4. Canvas

• Canvas는 픽셀 기반으로 그래픽을 그리는 방식

구분	SVG	Canvas
방식	객체 기반	픽셀 기반
개별 요소 정보 저장	가능	상대적으로 어려움
이벤트 처리	개별 객체별 처리 용이	직접 좌표 계산 필요
다시 그리기	객체 수정이 쉬움	다시 그려야 함
대량 데이터 성능	상대적으로 불리	상대적으로 유리

• 히트맵처럼 많은 셀을 빠르게 그려야 하는 경우 Canvas가 유리할 수 있음
• 반면 개별 요소에 이벤트를 걸고 세밀하게 조작해야 하는 경우 SVG가 유리

6-5. Scale

• D3.js에서 Scale은 데이터 값을 화면 좌표나 색상, 크기 등으로 변환하는 역할
• 예를 들어 실제 데이터 값은 0부터 10,000까지일 수 있지만, 화면의 가로축은 0부터 600px까지만 사용할 수 있음
  이때 데이터 범위를 화면 범위로 바꿔 주는 것이 Scale임

함수	의미
domain()	입력값의 범위 지정
range()	출력값의 범위 지정

scale.domain([0, 100])
     .range([0, 500])

 

6-6. Axis와 ticks()

함수·속성	의미
ticks()	축 눈금 수 또는 눈금 단위 지정
attr()	문서 요소의 속성 설정
transform	요소 위치나 회전 등 변환
translate(a, b)	x축, y축 방향 이동
rotate(c)	요소 회전

 

7. 시험 직전 암기 정리

 

시각화 구현 방법

플랫폼 이용
시각적 분석 플랫폼 이용
시각화 라이브러리 직접 개발
인포그래픽 표현

 

도구 구분

구분	예시
시각화 플랫폼	Gephi, Tableau
시각화 라이브러리	D3.js, Google Charts, Tangle
인포그래픽	Visual.ly

 

ggplot2 핵심

ggplot() + aes() + geom_*()

함수	의미
aes()	x축, y축, 색, 크기 등 매핑
geom_point()	산점도
geom_line()	선그래프
geom_bar()	막대그래프
geom_histogram()	히스토그램
geom_smooth()	추세선
facet_grid()	조건별 분할
fill	내부 색상
colour	선 또는 테두리 색상
alpha	투명도

 

Shiny 핵심

R 분석 결과를 인터랙티브 웹 애플리케이션으로 구현하는 패키지

구성	역할
UI	화면 구성
Server	R 코드 실행 및 결과 생성
input	사용자 입력값
output	결과 출력값

 

D3.js 핵심

JavaScript 기반 데이터 시각화 라이브러리

 

구현 절차

데이터 획득 → 데이터 파싱 → 데이터 필터링 → 데이터 표현 → 상호작용 추가

 

주요 개념

개념	의미
SVG	객체 기반 벡터 그래픽
Canvas	픽셀 기반 그래픽
domain()	입력값 범위
range()	출력값 범위
ticks()	축 눈금
attr()	속성 설정
translate()	위치 이동
rotate()	회전