데이터 시각화란?
수많은 데이터 속에서 유의미한 정보를 찾고 시각화한다.
- 이점
- 데이터에 형태를 부여하여 한 눈에 파악할 수 있다.
- 시각화를 통해 인사이트를 얻을 수 있다.
- 스크롤링 시각화
스크롤하면서 시각적으로 변하는 것. 스토리텔링과 함께 사용될 수 있다.
데이터 시각화 만드는 법
데이터 시각화를 어떻게 만들까?
무엇이 좋은 데이터 시각화일까?
데이터 시각화 기획
- 데이터 확보
- 독자의 니즈 파악하기
- 내용의 구성
좋은 데이터 시각화
- 풍부하고 유용한 데이터
- 명료하고 보기 좋은 시각화 (심미성 + 명료성. 명료성이 더 중요)
- 한 눈에 내용이 잘 전달되는 구성 (군더더기 없는 부가 설명)
데이터 시각화를 구성하는 요소들
- 차트, 그래프
- 데이터셋: 모든 데이터
- 데이터 변수(column), 데이터 값
- 데이터 변수 속성: 정량적, 정성적
- 시각적 속성: 위치, 형태, 크기, 색, 선 굵기, 선 유형
- 척도(Scale): 데이터와 시각적 속성 간 연결 방식
데이터 값과 시각적 속성은 일대일로 대응되어야 한다.
위치 스케일, 색상 스케일
- 색상 스케일
- 데이터 군을 서로 구분하기 위해
- 데이터 값을 나타내기 위해
- 데이터 값을 강조하기 위해
- 정성적 색상 스케일: 순서가 없는 범주형 데이터
- 순차적 색상 스케일: 순서를 부여하여 값의 크기 차이를 보여줌
- 발산형 색상 스케일: 순차적 스케일 두 개를 중간점에서 연결
- 강조 색상 스케일: 주제에 대한 핵심 정보를 강조
※ 색상 사이트: https://colorbrewer2.org
- 그 외 요소들
- 범례(Legend)
- 툴팁(Tooltip) - 말풍선
- 라벨(Label)
데이터 시각화 종류들
- 수량: 표, 막대 차트
- 여러 범주의 수량: 묶은 막대, 누적 막대, 멀티 차트
- 비율: 파이 차트, 누적 막대
- 여러 범주의 비율: 멀티 차트, 모자이크 도표, 트리맵
- 시계열 & 추세: 선 그래프
- 여러 범주의 시계열 & 추세: 선 그래프 (구분을 위해 색, 라벨, 범주 추가)
- 지리 공간: 단계구분도, 카토그램, 카토그램 히트맵
- 기타: 평행 집합, Word cloud
※ 차트 명칭을 몰라서 헤매는 경우가 많다.
효과적인 시각화를 위해
- 선형 스케일 차트는 항상 0에서 출발해야 한다.
- 무분별한 색 사용은 시각적인 혼란을 불러 일으킨다. (3 ~ 5개 적당)
- 색각 이상자를 배려해야 한다.
- 제목을 적당히 활용한다. (너무 과하지도 않게)
- 테두리와 격자를 적당히 활용한다.
- 3D는 사용하지 말자
※ 색맹: https://color.adobe.com/ko/create/color-accessibility
D3란?
- 자바스크립트 라이브러리
- Data-Driven Documents: 데이터와 DOM element를 결합한다.
- 다양한 데이터 포맷 처리 & import 제공
- HTML, SVG 웹 표준 기술을 다양하게 사용
- 데이터 분석 툴이 아니다.
SVG
Scalable Vector Graphics
- 크기를 축소/확대하면 해상도를 조절
- <svg> 내부에 <circle>, <rect> 등 태그가 존재
- D3는 각각의 데이터 포인트를 SVG element와 결합
- 시각적인 형태와 위치를 조절
실습: 다양한 도형 만들기
- 기본 단위는 px이다.
- SVG는 선언되는 순서에 따라 그려진다.
- <g> 태그를 통해 요소를 그룹화 할 수 있다.
- transform 속성으로 SVG 요소를 변형시키고, 움직이거나 회전시킬 수 있다.
