2강 / 20강

눈이 잘 읽는 순서 — 자리·길이·각도·넓이·색

같은 숫자 여덟 개를 다섯 가지로 그려 본다

숫자를 그림으로 옮길 때, 숫자는 눈이 읽을 수 있는 성질 하나에 실립니다. 그 성질을 시각 통로(visual channel) 라고 부릅니다.

통로	어떻게 실리나	어디에 쓰이나
자리 (위치)	축 위의 좌표	산점도 · 화산그림 · 성장곡선
길이	막대의 길이	막대그래프
각도	부채꼴의 열린 정도	원그래프
넓이	동그라미의 크기	점그래프의 점 크기 · 반지름 원그래프
진하기 · 색	칸의 색	히트맵 · UMAP 의 세포종류

중요한 것은 이 다섯이 똑같이 정확하지 않다는 사실입니다.

고등학생자리·길이·각도·넓이·색

같은 숫자를 여러 방법으로 그릴 수 있습니다. 그런데 읽기 쉬운 정도가 다릅니다.

사람 눈은 어떤 것을 더 정확히 읽는다 — 순서가 있다

순위	방법	예
1	공통 축의 위치	산점도 ⭐
2	길이	막대
3	각도 · 기울기	원그래프
4	넓이	버블
5	색 진하기 · 부피	히트맵 ⚠

위쪽일수록 정확하고 아래쪽일수록 흐릿하다

이 순서가 그림 선택을 정합니다

목적	—
정확한 비교	위쪽을 쓴다 ✔
대략의 패턴	아래쪽도 괜찮다

히트맵은 정확한 값을 읽으라고 그리는 게 아니다 (10강)

비유 — 길이 재기와 무게 어림

—	정확도
자로 길이를 잰다	정확 ✔
손으로 무게를 어림한다	흐릿하다

사람에게는 잘하는 판단과 못하는 판단이 있다

고등학생1984년, 클리블랜드와 맥길

note 가 든 연구가 이 순서의 근거입니다.

사람에게 같은 값을 여러 방식으로 보여 주고 오차를 쟀다

왜 이게 중요한가

이전	이후
"이게 예쁘다"	"이게 정확하다" ✔
취향	실험 결과 ⭐

시각화가 미학에서 과학이 된 순간이다

실험 방식

—	—
"이 막대는 저 막대의 몇 % 인가"	답하게 한다
답과 정답의 차이	오차를 측정

주관적 인상이 아니라 숫자로 비교했다

그래서 이 강의가 말할 수 있는 것

—	—
"원그래프가 나쁘다"	취향이 아니라 근거가 있다 ✔ (16강)

시각화 규칙은 대부분 실험에 기반한다 — 외울 이유가 있다

비유 — 도로 표지판 연구

—	—
어떤 글씨가 멀리서 잘 보이나	실험으로 정한다
디자이너 취향이	아니다 ✔

"읽는 사람" 을 실험한 결과가 표준이 된다

위젯의 숫자는 진짜입니다. 논문이 Fig. 2C 에 실은 마스터 조절자 점수예요.

DDX54 237 · ATP2A2 230 · RACGAP1 223 · PTPN11 221 · PCNA 218 · DIABLO 214 …

1등과 2등의 차이는 7점, 전체의 3% 입니다. 막대로 그리면 이 차이가 보입니다. 원그래프로 그리면 안 보여요. 그런데 논문의 결론은 "DDX54 가 1등이다" 입니다. 그러니 3%를 보여 주는 그림을 골라야 했던 겁니다.

같은 여덟 숫자입니다. 막대에서는 순위가 바로 보이고, 동그라미에서는 애매하고, 색에서는 거의 안 보입니다.

Python 브라우저에서 실행

import matplotlib.pyplot as plt
import viz, numpy as np

mr = viz.mr().sort_values("score", ascending=False).head(8)
g, s = list(mr.gene), list(mr.score)

fig, ax = plt.subplots(1, 3, figsize=(10.5, 3.4))

# 1) 길이 - 막대
ax[0].barh(range(8)[::-1], s, color=viz.PAL[0])
ax[0].set_yticks(range(8)[::-1]); ax[0].set_yticklabels(g, fontsize=7)
ax[0].set_title("length (bar)", fontsize=9); viz.bare(ax[0])

# 2) 넓이 - 동그라미
ax[1].scatter(range(8), [0]*8, s=[(v/237*40)**2 for v in s], color=viz.PAL[1])
ax[1].set_xticks(range(8)); ax[1].set_xticklabels(g, rotation=90, fontsize=7)
ax[1].set_yticks([]); ax[1].set_title("area (circle)", fontsize=9); viz.bare(ax[1], ("bottom",))

# 3) 진하기 - 한 줄 히트맵
ax[2].imshow(np.array(s).reshape(1, -1), cmap="Blues", aspect="auto")
ax[2].set_xticks(range(8)); ax[2].set_xticklabels(g, rotation=90, fontsize=7)
ax[2].set_yticks([]); ax[2].set_title("shade (heat)", fontsize=9)

fig.tight_layout()

고등학생규칙 한 줄

note 의 규칙을 실전 판단으로 바꿔 봅시다.

가장 중요한 값을 가장 정확한 방법으로 나타낸다

적용해 보면

상황	고를 것
두 그룹의 정확한 차이	위치 — 점 · 산점도 ✔
여러 항목의 순위	길이 — 정렬된 막대
수천 칸의 대략적 패턴	색 — 히트맵 (10강)
추가 정보 하나	넓이 · 색 — 보조로 (14강)

색과 넓이는 보조다 — 주인공으로 쓰지 않는다

한 그림에 여러 방법을 섞을 때

—	—
가장 중요한 것 → 위치	—
다음 → 색	—
보조 → 크기	14강의 점그래프 ⭐

중요도 순서와 정확도 순서를 맞춘다

⚠ 흔한 실수

—	—
핵심 값을 색으로만	정확히 못 읽는다 ⚠
덜 중요한 것을 위치로	낭비

가장 좋은 자리를 가장 중요한 것에 준다 — 당연한데 자주 어긴다

그런데 논문의 Fig. 5C·7B 같은 점그래프는 점 하나에 크기와 색을 한꺼번에 씁니다. 아래쪽 통로 두 개를 겹쳐 쓰는 셈이죠. 왜 그럴까요?

이래서 쓴다

유전자 40개 × 세포종류 12가지 = 480칸. 막대로 그리면 480개 막대가 됩니다. 한 화면에 안 들어가요.

그래서 이렇게 읽는다

점그래프에서는 "몇 배"를 읽지 않습니다. 어느 칸이 크고 진한가 — 패턴만 읽습니다.

즉 아래쪽 통로는 정확도를 포기하고 정보량을 사는 거래입니다. 그 거래가 정당한지는 14강에서 다시 봅니다.

고등학생이 순서가 못 말해 주는 것

2강을 마치며 규칙의 한계도 봅시다.

정확도 순서는 정확히 읽을 때 의 순서다

그런데 목적이 다를 수 있습니다

목적	—
값을 읽게 한다	정확도 순서를 따른다 ✔
패턴을 보게 한다	다른 기준이 필요 ⭐
인상을 남긴다	—

히트맵이 5위인데도 쓰이는 이유 — 목적이 다르다

색이 이기는 경우

상황	—
1000×50 칸	위치로는 못 그린다 ⚠
색이면	전체 패턴이 한눈에 ✔

"덩어리가 보이나" 를 물을 때는 색이 유일한 답일 수 있다

그래서 3강의 세 물음이 필요합니다

물음	—
무엇을 말하려나	목적
자료가 어떤 종류인가	3강
몇 개인가	규모

규칙은 출발점이지 결론이 아니다 — 목적이 먼저다

🤔 확인 문제

클리블랜드-맥길 순위에서 가장 정확한 통로는?

🤔 확인 문제

유전자 40개 × 세포종류 12가지의 발현을 한 화면에 보이려 합니다. 가장 알맞은 것은?

🤔 확인 문제

논문 Fig. 2C 에서 1등 DDX54(237)와 2등 ATP2A2(230)의 차이는 3%입니다. 이 차이를 보이기에 가장 나쁜 그림은?