데이터 시각화
수많은 데이터 속에서 유의미한 정보를 찾아 시각화 한다!
ex) 미세먼지 농도, 코로나 감염 국내현황, 대시보드 등...
데이터에 형태를 부여해서 한눈에 파악하기 위함.
기획
- 유용한 정보 수집
- 독자의 니즈 파악
- 내용의 구성(데이터에서 출발하여 수치값 시각화 or 분석에서 출발하여 증명 및 결론도출)
좋은 시각화
- 풍부하고 유용한 데이터
- 명료하고 보기 좋아야함
- 한눈에 내용이 잘 전달된다
- 심미성 2 명료성 3의 비율로 (40%:60%)
데이터 측면
- 정량적quantitative(통계 및 계산가능)
- 정성적qualitative(숫자로 환산 불가능)
시각적 측면
위치, 형태, 크기, 색, 두께(선 굵기), 유형(선 유형 등)등이 기준이다.
데이터를 시각적으로 나타내기위해선 척도로 연결되어야함.
척도를 이용하여 높낮이 or 구분을 줄 수 있음.
- 위치(데카르트 좌표계, 극 좌표계, 지도 등...)
- 색상
- 정성적, 순차적(계단식), 발산형(평균값으로 갈수록 희미함), 강조형(기본색, 강조색을 나눔) 등으로 구분됨.
여기서여러 색상 척도의 예시를 볼 수있다.
다양한 시각화 종류들
수량
막대차트, 표 등을 사용. 범주가 여러개일땐 묶은막대, 멀티차트 등 활용.
비율
파이 차트(의견이 분분하다..!), 누적 막대 도표, 모자이크 도표, 트리 맵등 활용
시계열, 추세
선 그래프가 주로 활용된다(주식 선 그래프 등)
지리 공간
지도, 카토그램 히트맵, word cloud등을 사용한다.
https://ko.wikipedia.org/wiki/%EC%B9%B4%ED%86%A0%EA%B7%B8%EB%9E%A8
참고로 이게 카토그램 히트맵!
효율적인 시각화 팁
- 선형 스케일(y = ax)차트는 항상 0에서 출발해야한다. => y축을 0부터 시작하여라~
- 무분별한 색 사용 자제(정성적 색상은 3~5개정도가 좋다)
- 색각 이상자를 배려하기 여기서색각 이상자분들도 구분 가능한 색상인지 체크 가능
- 제목, 테두리 격자를 적당히 활용
- 3D시각화는 자제하자..!
D3
Data-driven Documents. 데이터를 기반으로 DOM조작을 하는 라이브러리다.
특히 svg를 활용해서 만든다. => svg는 확대-축소하여도 픽셀이 깨지지 않음
<svg width="200px" height="200px">
<circle cx="50%" cy="50%" r="20"/>
</svg>이렇게 동그라미를 그리거나
<svg width="200px" height="200px">
<rect x="50%" y="50%" width="100" height="50" rx="10" ry="10"/>
</svg>이렇게 둥근 사각형을 그릴 수 도 있다!
결국 각각의 데이터 포인트를 svg의 속성과 결합하여 사용하면 된다 ㅎㅎ
클릭 몇번으로 만들 수 있는 데이터 시각화도 많은데, 왜 D3를 사용하는걸까? 아직 감이 안온다!
SVG
D3는 SVG로 이루어져있다. 따라서 D3를 제대로 활용하려면 SVG부터 잘 다뤄야 함.
타원, 둥근 직사각형은 위에서 만들었으니 넘어가본다 ㅎㅎ
<svg>
<ellipse cx="50" cy="100" rx="40" ry="20"/>
<rect x="100" y="100" width="100" height="20" />
<polygon points="100,0 100,50 150,50"/> <!-- 폴리곤 다각형 -->
<line x1="0" y1="200" y2="60" stroke="black"/>
<path d="M 0 50 q 50 -50 100 0 l 100 0"/> <!-- path반원 --->
<text x="10" y="140" font-size="20">글자!</text>
</svg>참고로 svg는 작성한 순서대로 출력된다(나중에 작성된 요소가 맨 앞에 위치함)
<g>태그를 사용해 요소를 그룹화 할 수 도 있다.
path에 대한 자세한 설명은 여기서...!
SVG 스타일 속성
- fill : 도형 내부 색상 채우기
- stroke : 선 색상, 너비, 투명도, 끝 모양, 점선 형태 등 지정 가능
- opacity : 투명도
- transfor : css에서 사용하던 변형!
selection
DOM 요소를 조작할수 있는 D3의 객체다. 사실상 querySelect로 가져온 element를 D3만의 객체에 넣어주는거다!
다른 메서드들 또한 DOM조작 메서드와 아주 유사하다. 메서드 체이닝도 가능하고...그럼 DOM조작 메서드 대신 왜 D3를 쓰는거지...?🤔
아주 유사해서 따로 적어둘 필요는 없어보인다. 필요하다면 그때그때 다시 보면 될듯!
다만 없는 메서드들은 적어놓겠다.
