Reporting Date: April. 06, 2025
데이터 시각화 중 시각화 구현에 대해 다루고자 한다.
목차
01 시각화 구현 방식
시각화 구현의 방식은 크게 세 가지로 나눌 수 있다.
| 시각화 플랫폼 | IBM사 : cognos insight, information builders Sas: SAS 엔터프라이즈 비즈니스 인텔리전스 Microsoft : PowerPivot, PowerView Oracle : OBIEE / 클릭테크 : Qlikview SAP : visual Intelligence |
| 시각화 라이브러리 사용 | D3.js, infoVis, Toolkit, jQuery, Visualize, Google Chart, Tangle, NodeBox |
| 인포그래픽스 | iCharts, Visualize, Visual.ly |
1 . 시각화 플랫폼
이 방법은 로컬 컴퓨터에 별도의 설치나 시스템 구축이 필요한 경우가 많으며,
플랫폼에서 제공하는 다양한 기능과 명령어를 통해 시각화를 구현할 수 있다.
대표적인 예로는 IBM사의 Cognos Insight나
마이크로소프트사의 Power BI와 같은 상용 시각화 도구가 있다.
이들 플랫폼은 그래픽 사용자 인터페이스(GUI)를 기반으로 하여,
사용자가 비교적 손쉽게 다양한 형태의 시각화를 구성할 수 있도록 지원한다.
2 . 시각화 구현 방법
이 방식은 개발 환경에 라이브러리를 설치한 후,
해당 라이브러리에서 제공하는 API를 통해
직접 코드를 작성하여 시각화를 구현하는 방식이다.
예를 들어 JavaScript 기반의 D3.js,
Python의 Matplotlib, Seaborn, Plotly 등은
대표적인 시각화 라이브러리로,
개발자에게 높은 자유도와 유연성을 제공한다.
3 . 인포그래픽스
이는 주로 웹 기반의 서비스 형태로 제공되며,
일반적으로 회원가입을 통해 이용할 수 있다.
사용자는 서비스에서 제공하는 다양한 템플릿과
도구를 활용하여 시각 자료를 제작할 수 있다.
대표적인 플랫폼으로는
Infogram, Visme, Piktochart, Visual.ly 등이 있으며,
비전문가도 쉽게 인포그래픽을 만들 수 있도록
직관적인 인터페이스를 제공하는 것이 특징이다.
02 다양한 그래프
1 . 줄기잎 그림
(Stem-and-Leaf Plot)
데이터를 줄기(stem)와
잎(leaf)으로 나누어 표현하는 통계적 그래프.
일반적으로 숫자의 가장 큰 자릿수를 줄기,
나머지 자릿수를 잎으로 표시한다.
얼핏 보면 단순히 숫자만 나열된 표처럼 보일 수 있지만,
실제로는 데이터의 분포와 빈도를 직관적으로 보여주는 일종의 그래프이다.
# 예를 들어, "12, 13, 22, 25"라는 데이터가 있을 때,
# 줄기-잎 그림에서는 다음과 같이 표현된다.
1 | 2 3
2 | 2 5여기서 줄기 "1"은 10단위를, "2"는 20단위를 의미하며,
각 줄기 옆의 숫자는 잎으로 실제 값의 일의 자리수를 나타낸다.
따라서 "1 | 2"는 12, "2 | 5"는 25를 의미한다.
이러한 방식으로 데이터를 정렬된 형태로 시각화할 수 있어,
데이터의 중심 경향, 분포, 이상치 등을 쉽게 파악할 수 있다.
2 . 얼굴 그래프
(Chernoff Faces)
체르노프 페이스라고 불리며,
다변량 데이터를 시각화하기 위해 고안된 방법이다.
각 변수의 값을 얼굴의 특정 요소로 나타낸 것으로,
예를 들면 눈의 크기, 입의 굴곡, 코의 길이 등로
나타내어 시각적으로 비교할 수 있게 한다.
이 방식의 핵심은 인간이 얼굴 표정을
빠르게 인식하고 비교할 수 있다는 점을 활용한 것이다.
비슷한 데이터는 비슷한 얼굴 형태로 표현되며, 그에 따라 사용자는
직관적으로 데이터 간의 유사성이나 차이점을 빠르게 파악할 수 있다.
통계나 군집 분석 등에서 패턴 인식에 유용하게 쓰인다.
3 . 스타 차트
(Star Chart / Radar Chart)
방사형 그래프로도 불리며, 여러 항목을 동일한 척도로
측정하고 비교할 때 효과적인 시각화 도구이다.
특히 개인이나 대상의 여러 특성(예: 능력, 성과 등)을
하나의 그래프 안에서 비교할 수 있어, 강점과 약점을 시각적으로 분석하기에 좋다.
그래프는 중심에서 여러 축이 방사형으로 뻗어나가며,
각 축은 하나의 변수(특성)를 나타낸다.
측정값이 클수록 축 방향으로 멀리 표시되고,
이 점들을 연결하면 별 모양이 형성된다.
이를 통해 사용자는 어떤 항목에서 두드러지는지,
어디가 부족한지를 한눈에 파악할 수 있다.
팀 평가, 자기 진단, 제품 비교 등에서 널리 사용된다.
03 공간 분석
공간 분석을 시각화하는 데에는 크게 세 가지 방법을 활용할 수 있다.
1 . 구글 비즈
(Google Viz)
다양한 시각화 도구를 제공하는 플랫폼으로,
대표적인 예로 모션 차트와 지오 차트를 들 수 있다.
모션 차트는 시간의 흐름에 따른
데이터의 변화를 시각적으로 표현하는 데 유용하며,
예를 들어 인구수처럼 연속적인 수치 데이터를
시각화할 때는 색상이나 크기를 조절하여 구분할 수 있다.
인구수가 많은 지역을 더 짙은 색으로 표현하는 방식이 그 예이다.
2 . 샤이니
(Shiny)
R 언어 기반의 웹 애플리케이션 프레임워크.
사용자가 웹 프로그래밍 지식 없이도
인터랙티브한 시각화를 구현할 수 있다는 장점을 가지고 있다.
HTML, CSS 같은 웹 언어와도 호환이 잘 되어,
데이터 시각화를 웹 기반으로 확장할 때 매우 유용한다.
사용자는 코드 몇 줄만으로도 마우스 조작이
가능한 인터페이스를 손쉽게 만들 수 있다.
3 . 모자이크 플롯
(Mosaic Plot)
이는 범주형 데이터를 시각화하는 데 적합한 그래프로,
각 사각형의 크기로 해당 범주의 빈도수를 표현한다.
예를 들어, '성별'과 '흡연 여부'를 기준으로 데이터를 분류했을 때,
'남성 흡연자'에 해당하는 사각형이 '남성 비흡연자'보다 크다면
이는 흡연 남성의 수가 더 많다는 것을 의미합니다.
마찬가지로 여성의 경우도 흡연자의 사각형이 더 크다면,
해당 데이터셋에서는 여성 흡연자가 비흡연자보다 더 많다는 해석이 가능하다.
전체적으로 볼 때, 모자이크 플롯은 그룹 간 비율과
빈도 차이를 직관적으로 파악할 수 있게 해주는 유용한 시각화 도구이다.
04 D3.js
1 . D3.js와 SVG, 캔버스 비교
시각화 라이브러리 중 하나인 D3.js는
이름에서 알 수 있듯 JavaScript 기반의 라이브러리이다.
HTML, CSS와 함께 사용되며,
데이터를 시각화된 형태로 표현하는 데 특화되어 있다.
① SVG
주로 SVG 기반으로 시각화를 수행한다.
(Scalable Vector Graphics)
각 그래픽 요소를 객체로 저장할 수 있으며,
벡터 기반이므로 확대하거나 축소해도 품질 저하가 없다.
또한, DOM(Document Object Model)과 통합되어 있기에
개별 요소에 접근하고 스타일을 적용하기에 용이하다.
이러한 점에서 데이터 바인딩, 상호작용 구현에 매우 적합하다.
② Canvas(캔버스)
SVG와 함께 자주 비교되는 방식이 Canvas(캔버스)이다.
캔버스는 픽셀 기반이며, 한 번 그려진 후에는 개별 요소의 정보가
저장되지 않아 객체 단위 조작이 어렵고, 다시 그리기가 까다롭다.
③ 성능 차이
SVG는 요소 수가 적을 경우 유리하지만, 시각화해야 할 요소가
수천 개 이상으로 많아질 경우 렌더링 오버헤드가 발생한다.
Canvas는 대량의 데이터를 빠르게 처리할 수 있어,
복잡한 애니메이션, 고밀도 데이터 시각화에 적합하다.
따라서 사용 목적에 따라 SVG와 Canvas 중
적절한 방식을 선택하는 것이 중요하다.
2 . 시각화 구현 프로세스
시각화를 구현하는 과정은 크게 4 단계로 나눌 수 있다.
① 데이터 획득
어떤 데이터를 사용할 것인지 결정하는 단계.
데이터베이스나 공공데이터 포털 등에서
공개된 데이터 원천을 통해 필요한 데이터를 확보한다.
② 파싱
확보한 데이터의 형식(CSV, JSON, XML 등)에 따라
이를 컴퓨터가 처리할 수 있는 구조로 변환하고,
필요한 경우 가공 작업도 함께 이루어진다.
③ 필터링
전체 데이터 중 분석과 시각화에 필요한 데이터만을
선별하고, 불필요한 값이나 오류 데이터를 제거한다.
이 과정을 통해 보다 명확하고 효율적인 데이터 구조를 만들 수 있다.
④ 표현 및 상호작용
정제된 데이터를 시각적으로 어떻게 보여줄지 결정하고,
사용자가 데이터를 탐색하고 이해할 수 있도록
다양한 상호작용 요소를 설계한다.
이 단계에서는 그래프, 차트, 인터페이스 요소 등을 적용하여
사용자가 데이터를 직관적으로 해석할 수 있도록 돕는다.
05 주요 함수
D3.js를 활용한 시각화 구현 방법
먼저, scale을 사용하면 데이터 값을 시각화 영역에 맞춰 변환할 수 있으며,
range() 함수는 이 변환된 값의 출력 범위를 설정한다.
예를 들어, 0에서 1100까지의 픽셀 범위로 데이터를 매핑할 수 있다.
ticks() 함수는 축의 눈금 개수를 지정할 수 있는 기능으로,
데이터의 세부 표현 정도를 조절할 수 있다.
orient()는 눈금의 위치를 지정하는 데 사용되며,
예를 들어 축이 상단인지 하단인지, 또는 좌측인지 우측인지 결정할 수 있다.
또한 transition() 함수는 요소의 변화를
부드럽게 만들어 애니메이션 효과를 줄 수 있고,
요소의 위치를 이동하거나 회전, 크기 조정 등을 통해
시각적 배치를 조정할 때 사용된다.
[출처] [HD]데이터분석전문가(ADP) 필기 - 데이터시각화
