블로그_썸네일-032

😉 헷갈렸던 & 몰랐던 부분들만 정리하는 나만의 TIL
😯 모든 강의 내용은 적지 않아요!

오늘의 소감은?
데이터 시각화 분야는 처음 접했다.
사실 데이터 시각화 내용이 지금 나에게 필요할까? 라는 생각이 든다.
어떻게 데이터가 구성되고 이를 사용자에게 일목요연하게 전달할 수 있을까에 대한 내용을 알아두면 물론 좋겠지만, 과제를 하면서 내 코딩 실력이 너무나도 부족함을 알아버렸기에 깊은 학습은 미룰 생각이다.
이론적인 기초 내용만 TIL에 작성하고, 실습 내용은 작성하지 않을 것 같다.

띄엄띄엄 TIL을 작성하고 있다.
과제가 있었어서 TIL을 작성할 시간이 부족했던 이유도 있지만, 강의가 실습 위주로 진행되다 보니 TIL 작성이 어려웠던 것 같다.
앞으로 일주일동안 코드 리뷰에 과제 테스트에.. TIL을 계속 작성할 수 있을지는 모르겠다. 흑




데이터시각화

데이터 시각화란 간단하게 데이터를 시각화하는 것이며,

수많은 데이터 속에서 유의미한 정보를 찾고 시각화한다라고 풀어 해석할 수 있다.

대시보드, 스크롤링 시각화, 스크롤링 시각화 + 스토리 텔링 등이 데이터 시각화라고 할 수 있다.


그럼 데이터 시각화를 왜 하는 걸까?

데이터에 형태를 부여함으로써, 데이터의 패턴, 비교, 포인트 등을 파악할 수 있고 시각화를 통해 인사이트를 얻을 수 있기 때문이다.


자바스크립트 데이터 시각화 라이브러리는 정말 많다.

D3.js, Recharts, Victory, React-vis, V Charts, Trading Vue.js… 등등의 여러 라이브러리가 존재한다.

보통 회사에서 사용하는 툴, 개인의 선호도 등으로 골라 사용한다.




데이터 시각화 만드는 법

데이터 시각화를 잘 하기 위해서는, 데이터 시각화를 어떻게 만들지, 무엇이 좋은 데이터 시각화일지 고민해야 한다.


1. 데이터 기획 (어떻게 만들지)

데이터 시각화 기획에 가장 중요한 요소는 데이터, 독자, 구성 이 3가지이다.


데이터

풍부하고 유용한 데이터를 잘 확보하는 것이 중요하다.

독자

독자의 니즈를 파악해야 한다.

누가 흥미를 가질 것이며, 어떤 범위의 독자를 대상으로 삼아야 하는지 고민해야 한다.

구성

내용 구성 방법에는 간단하게 두 가지가 있다.

데이터에서 출발하는 방법, 분석에서 출발하는 방법이다

  1. 데이터에서 출발 : 데이터에서 바로 측정 가능한 수치값들을 찾고, 이를 시각화한다.
  2. 분석에서 출발 : 소결 → 데이터 분석과 증명 반복 → 결론 도출의 일련의 과정을 거친다.


2. 데이터 시각화 품질 (무엇이 좋은 데이터 시각화일지)

좋은 데이터 시각화는 아래 3가지의 조건을 갖추고 있다.

  1. 풍부하고 유용한 데이터
  2. 명료하고 보기 좋은 시각화
  3. 한 눈에 잘 전달되는 구성

2번 명료하고 보기 좋은 시각화는 심미성(40%), 명료성(60%) 두 조건을 모두 갖춰야 한다는 뜻이다.


3. 정리

위의 내용들을 종합해보면, 명확하고 보기 좋은 시각화를 만들려면?

  1. 주제에 따른 정말 필요한 정보만을 보여준다.
  2. 인지를 해치지 않는 적절한 시각적 속성을 구성한다.
  3. 군더더기 없는 부가 설명을 포함한다.

이 조건들을 염두하며 데이터 시각화를 해나가야 한다.




데이터 시각화 구성 요소

데이터 시각화 구성 요소를 크게 두가지로 나누면, 데이터 측면의 요소들, 시각적 측면의 요소들이 있다.


1. 데이터 측면

데이터셋

말 그대로 데이터를 말한다.

데이터 변수, 데이터 값

컬럼과 같은 것을 변수라 하며, 내부의 값을 데이터 값이라 한다.

  • 데이터 변수 속성

데이터 변수는 정량적, 정성적이라는 두 가지 속성으로 나뉜다.

  1. 정량적 : 숫자형 데이터이며, 통계 및 계산이 가능하다. (ex) 1, 0.36, 100)

  2. 정성적 : 범주형 데이터이며 숫자로 환산할 수 없다. (ex) 개/고양이(동물), 좋음/나쁨(만족도))


2. 시각적 측면

시각적 속성

시각적 측면에서 차트를 구성하는 작은 단위들을 시각적 속성이라 한다.

위치, 형태, 크기, 색, 선 굵기, 선 유형 등이 있다.


3. 데이터 + 시각적

이 둘을 연결하기 위해서는 여러 요소가 필요하다.

척도 (Scale)

데이터 측면과 시각적 측면의 요소들을 연결하는 방법에 대해 정의한다.

위치 스케일과 색상 스케일이 있다.

  • 위치 스케일

위치 스케일은 차트 안에서 데이터 값들의 위치를 결정하며, 좌표계 위에 보여주는 방식으로 진행된다.

  • 색상 스케일

색을 사용하는 경우는 3가지가 있다.

데이터 군을 서로 구분하기 위해 정성적 색상 스케일을 사용한다. (순서가 없는 범주형 데이터 구분)

데이터 값을 나타내기 위해 순차적 색상 스케일이나 발산형 색상 스케일을 사용한다. (색에 순서를 부여해서 크기 차이, 거리 차이를 시각화)

데이터 값을 강조하기 위해 강조 색상 스타일을 사용한다. (다른 스케일들의 강조 버전으로 핵심 정보를 강조)


4. 그 외 요소

범례(Legend)

다양한 항목들을 식별할 수 있도록 도와준다.

말풍선(Tooltip)

특정 데이터에 마우스를 가져갔을 때, 해당 데이터의 정보를 보여준다.

라벨(Label)

차트에 대한 부가 정보를 텍스트로 보여준다.




데이터 시각화 종류

많은 데이터 시각화 종류와 차트들을 모두 외울 필요는 없지만,

어떤 상황에서 어떤 차트를 선택할 지 검색할 수 있을 정도로 이해하는 노력이 필요하다.

정답은 없다. 다만 스스로 선택할 때 의도에 맞게 좋은 시각화를 구성할 수 있는 능력이 필요하다.


1. 수량 데이터 시각화

범주의 수량 크기를 보여주고 비교하는 경우, 주로 표나 막대 차트로 시각화한다.

범주의 순서가 없는 경우, 수량이 큰 순서대로 막대를 나열한다.

여러 범주의 수량을 보여주기 위해선 데이터 변수 각각에 색이나 위치 같은 시각적 요소를 추가한다.

또한 묶은 막대, 멀티 차트, 누적 막대 등을 사용하여 시각화할 수 있다.


2. 비율 데이터 시각화

비율은 어떤 집단, 범주를 데이터 조각으로 나눴을 때, 전체에서 차지하는 비율을 말한다.

일반적으로 비율을 데이터시각화 하기 위해서는 파이 차트, 누적 막대 도표를 사용한다.

범주가 두개인 경우, 멀티차트나 모자이크 도표, 트리맵 등을 사용한다.


3. 시계열 & 추세 데이터 시각화

선 그래프를 주로 사용한다. 색이나 라밸, 범례를 덧붙여서 나타내곤 한다.


4. 지리 공간 데이터 시각화

단계 구분도가 대표적으로 사용된다.

하지만 꼭 지역의 모양이 고정되어야 하는 것이 아니기 때문에, 카토그램과 카토그램 히트맵을 사용할수도 있다.


5. 그 외

평행 집합, Word cloud 등이 있다.




효과적인 데이터 시각화

효과적인 시각화를 만들기 위한 알아둬야 할 6가지에 대해 알아본다.


1. 선형 스케일

선형 스케일(linear scale, y=ax)을 사용하는 차트항상 0에서 출발해야 한다.


2. 색 사용

무분별한 색 사용은 오히려 시각적인 혼란을 불러 일으킨다.

색을 사용하는 것은 도표의 완성도를 높이고, 정보를 알아보기 쉽게 전달하는 것임을 잊지 말자.


3. 색각 이상자 배려

색각에 이상이 있는 독자를 배려하면 더 좋은 시각화를 구성할 수 있다.


4. 제목 활용

제목을 적당히 활용한다.

차트는 정보를 전달하는 데에 목적이 있다.

적절한 제목을 선택해서 적절한 위치에 넣으면, 독자의 이해를 도울 수 있다.


5. 테두리와 격자 활용

테두리와 격자를 적절하게 사용해야 한다.

요소들을 적절하게 구분하기 위해 사용하되, 남발하지 않아야 한다.


6. 3D

3D 시각화는 하지 않는 것이 좋다.





출처

프로그래머스

댓글남기기