데이터시각화
데이터 시각화란?
- 수많은 데이터 속에서, 유의미한 정보를 찾고, 시각화 한다.
도로 교통정보 전광판, 코로나 전국 확진자 수 현황 등 ... - 주로 대시보드 형태
- 더 자세한 정보를 시각화한 스크롤링 시각화
- 시각화가 효과적인 이유
데이터에 형태를 부여하여 한눈에 파악할 수 있기 때문
데이터의 패턴 / 비교 / 포인트 등을 파악하고, 인사이트를 얻을 수 있음
데이터 시각화 만드는 법
- 데이터 시각화 기획
데이터 / 독자 / 구성 의 3가지가 명확한 기획이라면, 큰 틀이 잡힌 상태 - 데이터
풍부하고 유용한 데이터 확보
데이터가 시시하면 시각화도 시시해짐 - 독자
독자의 니즈 파악
누구에게 흥미가 있을 데이터인지 등의 독자의 범위 선정
독자가 무엇을 원하는지 니즈 파악 - 구성
데이터 시각화 내용 구성을 어떻게 풀어가야 할지
데이터에서 출발하는 방법 ... 데이터에서 바로 측정 가능한 수치값을 찾고 이를 시각화
분석에서 출발하는 방법 ... 데이터에서 보이는 양상으로 소결을 만들어 데이터 분석과 증명 과정을 반복하여 의미있는 결론을 도출해 낸 결론으로 시각화 (주로 스토리텔링) - 좋은 데이터 시각화
풍부하고 유용한 데이터 / 명료하고 보기 좋은 시각화 (심미성과 명료성) / 한 눈에 잘 전달되는 내용 구성 - 명확하고 보기 좋은 시각화
주제에 따른 정말 필요한 정보만을 보여줌
인지를 해치지 안ㄴㅎ는 적절한 시각적 속성으로 구성
군더더기 없는 부가 설명
데이터 시각화를 구성하는 요소
- 차트 (그래프)
- Data Set (Table) ... 차트에 사용된 데이터
- 데이터 변수 & 데이터 값 ... Data Set 에서의 세로의 열 (Column) 을 데이터 변수 라고 하며, 이 차트에서의 하나하나의 값을 데이터 값이라고한다.
- 데이터 변수 속성
정량적 ... 숫자형 데이터 / 통계 및 계산 가능 / 연속형 데이터 (시간 등 임의의 정밀한 중간 값이 존재하는 숫자들), 이산형 데이터 (사람 수 등 이산적인 단위의 숫자들)
정성적 ... 범주형 테이터 / 숫자 환산 불가 (동물의 종, 만족도 등) / 순위형 데이터 (등급, 등수 등 순서가 있는 범주), 명목형 데이터 (성별 지역 등 순서가 없는 범주) - 시각적 속성 ... 위치, 형태, 크기, 색, 선의 굵기 및 유형 등
- Scale (척도) ... 데이터와 시각적 속성을 연결하기 위해 필요한 연결 방식을 정의
위치 스케일 ... 차트 안에서 데이터의 위치를 정의 (위치를 좌표계 위에 정의)
색상 스케일 ... 색을 사용할 때의 데이터 군의 구분 / 데이터 값을 나타내거나 강조하기 위해 색상 사용을 정의 - 색상 스케일 참고 사이트
colorbrewer2.org - Legend (범례) ... 다양한 항목을 식별할 수 있도록 하는 범례
- Tooltip ... 시각화에 마우스를 가져갔을 때 등 해당 데이터의 정보를 보여줌
- label ... 차트에 대한 부가정보를 텍스트로 바로 보여줌
다양한 데이터 시각화 종류들
- 수량에 대한 데이터 시각화
범주에 수량 크기를 보여주고 비교하는 경우 주로 표나, 막대차트를 이용
여러 범주로 구성되어 있다면, 색이나 위치의 시각적 요소를 추가한 묶은 막대나 멀티차트, 누적막대 등을 이용 - 비율에 대한 데이터 시각화
파이차트, 누적 막대 도표 이용
여러 범주로 구성되어 있다면, 멀티차트 및 모자이크 도표, 트리맵 등을 이용 - 시계열 & 추세 데이터 시각화
시간적 순서는 선 그래프를 주로 이용
여러 범주로 구성되어 있다면, 각 범주의 선을 한 그래프로 보여줌 - 지리 공간 데이터 시각화
단계 구분도를 주로 이용
효과적인 시각화
- 선형 스케일 차트는 항상 0 에서 출발해야 한다.
- 차트의 색은 목적에 맞고 명료하게, 산만하지 않게 사용해야 한다.
색의 사용은 도표의 완성도를 높이고, 정보를 알아보기 쉽게 표현하기 위함이다. (3~5 개 정도의 색상 사용이 적당) - 색각 이상자를 배려하여 색상을 고른다.
- 데이터의 맥락을 보여주는 제목을 잘 활용하면 좋다.
- 테두리와 격자를 적당히 활용한다.
- 3D 시각화는 피하는게 좋다.
D3.js
- 데이터 시각화에 적합한 오픈소스 자바스크립트 라이브러리
- D3 (Data-Driven Documents) ... 데이터 기반으로 DOM 을 다루는 라이브러리
데이터와 DOM element 를 결합
SVG 를 활용 (각각 데이터 포인트를 SVG element 와 결합) - SVG (Scalable Vector Graphics)
크기 축소 / 확대 시 해상도를 자동으로 조절하는 벡터 그래픽, 마크업 언어로 작성 - 단점
데이터 시각화 라이브러리일 뿐 분석 툴은 아님
Tableau, Excel 처럼 쉽고 빠르게 시각화를 만들어 낼 수는 없음
SVG 스타일 속성
<circle>: 원cx,cv: 중심축의 x, y 축 좌표r: 도형의 반지름<ellipse>: 타원rx,ry: x, y 축 반지름 길이 / 모서리의 둥근 정도<rect>: 직사각형width,height: 도형의 너비, 높이 지정<polygon>: 다각형points="좌표 좌표 좌표": 여러 좌표를 통해 다각형 도형 생성<line>: 선x1,y1,x2,y2: 각각 좌표를 지정stroke: 선의 색 지정<path>: 여러개의 직선 / 도형 등을 합쳐 복잡한 도형 생성<text>: SVG 문자fill: 도형 내부 색상opacity: 투명도<g>: 요소의 그룹화
막대차트
- 데이터 값 비율에 맞게 너비 조정하기
비율 = 보여주고 싶은 최대 길이 / 실제 가장 큰 데이터 값
구해진 비율 값을 각각의 데이터에 곱해주면 보여주고 싶은 너비에 맞게 조정됨
그룹화하여transform="scale(비율 값)"으로 간단히 조절할 수 있다.
회고
데이터 시각화라는 키워드를 처음 접해보았는데, 재밌게 배울 수 있어서 좋았다.
이런 시각화된 데이터를 일상에서 상당히 많이 접하고 있다는 걸 깨달을 수 있었던 시간이었고, 잘 다뤄보고 싶은 욕심이 생긴 주제였다. 😏
프론트엔드