데이터 시각화

수많은 데이터를 유의미한 정보를 통해 시각화 하는 것
ex) 대시보드 , 스크롤링 시각화(스크롤 하면서 시각적으로 변하는 것을 볼 수 있다. )

데이터 시각화의 장점

데이터 형태를 부여하여 데이터를 한눈에 파악하며
패턴/비교/포인트 파악이 가능하다

데이터 시각화 기획

1. 데이터 ( 풍부하고 유용한 DATA )
2. 독자 ( 독자의 니즈 파악 )
3. 구성 ( 내용의 구성 )
   1) 데이터에서 출발 ( 데이터로만 내용을 구성 )
   2) 분석에서 출발 ( 분석 + 증명의 반복을 통한 스토리텔링 방식 )

좋은 데이터 시각화란?

풍부하고 유용한 데이터를 이용해
명료하고 보기좋게 ( 심미성과 명료함을 포함 )
한눈에 내용이 잘 전달된다

• 때론 오히려 단순한 막대차트가 보기 좋다.

데이터 시각화 구성요소

1. 데이터 측면 : Dataset 마치 table (데이터 변수와 데이터 값으로 구성)
2. 시각화 측면

데이터 변수

1. 정량적 (숫자형)
   1) 연속형 => 정밀한 중간값 존재
   2) 이산형 => 이산적인 단위의 숫자들
2. 정성적 (범주형)
   1) 순위형 => 순서 존재 O
   2) 명목형 => 순서 존재 X

시각적 측면에 영향요소

1. 색
2. 선 굵기
3. 선 유형
4. 위치
5. 형태
6. 크기

Scale 척도

데이터 측면과 시각적 측면을 합친 요소

1. 위치스케일
2. 색상스케일
   1) 정성적 색상 : 순서가 없는 범주형 데이터
   2) 순차적 색상 : 순서를 부여한 데이터
   3) 발산형 색상 : 순차적 스케일 두개를 중간점에서 연결
   4) 강조 색상 : 주제애 대한 핵심 정보를 강조한 색으로 표현

1) 정성적 색상

막대차트에서 순서는 관계없이 지역에 따라 색상을 구분

2) 순차적 색상

어떤 단색을 기준으로 색상의 옅으냐 강조되냐에 따라 의미를 부여

3) 발산형 색상

마이너스 맨끝을 강조된 색으로
중간을 옅은 색으로
플러스 맨끝을 강조된 색으로 처리

4) 강조 색상

기본색과 강조색을 구분하여 처리

시각화 종류

1. 단일 수량 : 막대차트 / 표
2. 여러범주의 수량 : 색/위치를 추가로 사용
3. 비율 : 파이차트 / 누적 막대 도표
4. 시계열 & 추세 : 선 그래프 (주식그래프같이)
5. 지리공간 시각화

효과적인 시각화

1. 선형스케일 차트는 항상 0에서 출발해야한다.
2. 무분별한 색 지양( 오히려 혼란)
3. 제목을 적당히 활용 (과하게는 하지않게)
4. 테두리와 격자를 적당히 활용
5. 3D시각화는 추천하지 않음

SVG

SVG 종류

1. 원 circle태그
2. 타원 ellipse태그
3. 직사각형 rect 태그
4. 다각형 rect 태그
5. 선 polygon 태그
6. Path path 태그
7. 문자 text 태그

원 (기본단위 픽셀)

cx : 중심점 x축
cy : 중심점 y축
r : 반지름

타원

cx
cy
rx
ry

직사각형

x
y
width
height
rx : 둥글게
ry : 둥글게

다각형

points 로 2개씩 좌표를 지정할 수 있고 해당 좌표를 직선으로 연결하여 생성

선

x1
y1
x2
y2
stroke : 색깔 필수

Path

d 를 사용하여 가장 다양하게 만들어 낸다.

문자

x
y
font-size
거의 사용하지 않는다.

그룹 태그 ( <g></g>)

요소를 그룹화하여 클래스 이름을 추가하고 애니메이션, 필터, 패턴 및 효과를 요소 그룹에 적용 할 수있게합니다.

• transform / translate 동작 가능

D3.js (Data-Driven Documents)

데이터 기반으로 Dom을 다루는 라이브러리 (SVG를 다루기 쉽게 한다.)

SVG (Scalable vector Graphics)

크기를 축소 / 확대하면 해상도를 조절
각각의 데이터 포인트를 SVG element와 결합

Selection

Dom element를 조작하는 D3.js객체

d3 관련 메소드

1. d3.select(selector) : 가장 첫번째 요소 Dom element를 찾는다
2. d3.selectAll(selector) : 인자와 일치한 모든 요소를 Selection 객체로 구성
3. selection.text(value) : 해당하는 element의 텍스트를 가져옴
4. selection.attr(name,value) : selection이 가리키는 element의 속성을 가져오거나 설정
5. selection.style(node, name) : selection이 가리키는 스타일 설정
6. selection.classed(node,value) : value에 따라 결과가 달라짐
7. selection.append(type) : element의 자식으로 요소 추가
8. selection.remove() : Selection이 가리키는 element 삭제