도넛 차트 리빌

프롬프트 설정

Claude 가 읽는 제작 지시문입니다. 직접 읽지 않아도 됩니다.

도넛 차트 애니메이션을 HTML 파일 하나로 만들어 줘. 미리보기에서 바로 재생되게. 길게 설명할 테니 숫자는 그대로 지켜 줘.

핵심 아이디어: 화면 가득한 도넛 차트의 조각들이 12시에서 시계방향으로 하나씩 그려진다. 조각마다 출발이 조금씩 늦고, 앞 조각의 끝이 다음 조각 위로 살짝 넘쳤다가 되돌아와 경계에 딱 맞물린다. 가운데 큰 퍼센트 숫자는 그려진 만큼을 따라 0 에서 100 까지 오른다. 다 그려지면 가장 큰 조각이 바깥으로 「톡」 튀어나오고, 가운데 묶음(숫자와 글)이 그 조각의 값과 이름으로 바뀌어 그 조각 색이 되며, 조각마다 이름표가 바깥 원에 붙는다. 반복할 때는 이름표가 떨어지고 호가 거꾸로 감기며 점점 빨라져 12시로 빨려 들어간 뒤 다시 그려진다. 첫 화면은 빈 원이 아니라 다 그려진 차트이고, 첫 프레임부터 움직인다.

[바꿀 곳]
- 데이터(12시부터 시계방향 순서, 4~5개, 합계 100, 가상의 값): 주거 38 · 식비 24 · 교통 15 · 여가 13 · 저축 10
- 조각 색(데이터 순서): #FF5A36 · #FFB547 · #3D7BFF · #2EC4A6 · #A98BFF
- 가운데 제목(그리는 동안 숫자 아래에 나온다): 한 달 생활비
- 색: 배경 #121316 · 글자 #F4F1EA
- 이름은 4글자 이하를 권한다(더 길면 이름표 글자가 작아질 수 있다). 합계가 100 이 아니면 100 으로 맞춰 비율을 쓰고 console.warn 으로 알린다.
- 길이: 6초 (끝나면 처음으로 이어서 반복)
- 화면비: 1:1 (캔버스 1080×1080)

[크기] — W = H = 1080, 중심 C = (0.5W, 0.5H)
- 도넛 바깥 반지름 Ro = 0.32H(약 346px, 지름이 화면의 64%), 안쪽 반지름 Ri = 0.22H(약 238px). 두께 0.10H.
- 바탕 고리: Ri~Ro 고리 전체를 글자 색 불투명도 7% 로 늘 깐다(조각이 덮지 않은 곳과 튀어나온 조각이 비운 자리가 이 색으로 보인다).
- 튀어나옴 거리 POP = 0.035H(약 38px). 가장 큰 조각이 자기 가운데 각 방향으로 평행이동한다.
- 가운데 숫자: 숫자 굵기 800, 「%」는 숫자 글꼴 크기의 0.50배 굵기 700, 숫자와 같은 기준선, 숫자 칸과 「%」 사이 0.04F.
  숫자 칸 폭 cw = 「0」~「9」 advance 중 가장 큰 값(자리 폭 고정).
  글꼴 크기 F 는 「100%」를 이 규칙(칸 3개 + 0.04F + 「%」 advance)으로 늘어놓은 전체 폭이 1.40·Ri(약 333px)가 되게 정한다(글꼴 크기 100 으로 재서 비례). F 는 Pretendard 약 142px · 맑은 고딕 약 150px · Noto Sans KR 약 142px, 숫자 잉크 높이는 셋 다 약 0.10H.
- 숫자 줄 배치(자리 수가 바뀌어도 아무것도 옮겨지지 않게): 두 자리 숫자 줄(칸 2개 + 0.04F + 「%」)을 C.x 에 가운데 맞춘 자리에 「%」를 고정한다. 숫자 칸은 「%」 왼쪽으로 오른쪽부터 채운다 — 일의 자리 칸이 「%」 바로 왼쪽, 자리 수가 늘면 왼쪽에 칸이 붙는다. 그래서 「100%」는 반 칸 왼쪽으로 치우친다.
  칸 안 정렬: 일의 자리 숫자는 잉크 오른쪽 끝을 「가장 넓은 숫자 잉크를 칸 가운데 두었을 때의 오른쪽 끝」에 맞춘다(「%」 앞 간격이 숫자마다 같아진다). 나머지 자리는 잉크 가운데를 칸 가운데에.
  숫자 잉크의 세로 가운데 = C.y − 0.030H.
  확인용: 「100%」의 왼쪽 위 잉크 모서리는 C 에서 약 226~229px 로 안쪽 원(238px) 안에 든다. 0.98·Ri 를 넘으면 F 를 2%씩 줄이고 console.warn(기본 데이터·세 글꼴에서 줄임 0 이 정상).
- 가운데 글: 글꼴 크기 0.032H, 굵기 700, 글자 색 불투명도 70%. 잉크 세로 가운데 = C.y + 0.080H. 폭이 1.5·Ri 를 넘으면 그 안에 들어가게 줄인다.
- 가운데 묶음 = 가운데 숫자 줄 + 가운데 글. 둘은 언제나 함께 바뀌고 함께 움직인다.
- 이름표: 값 줄(예 「38%」) 글꼴 크기 0.044H 굵기 800 조각 색 / 이름 줄(예 「주거」) 0.027H 굵기 700 글자 색 불투명도 80%. 값 줄이 위, 두 줄 사이 0.006H.
  상자 = 두 줄 중 넓은 폭 × (값 줄 잉크 높이 + 0.006H + 이름 줄 잉크 높이), 전부 measureText 로 잰다.

[조각 그리기 — 각도와 머리]
- 각은 12시 = 0°, 시계방향으로 커진다. 캔버스 arc 각 = (각 − 90°)·π/180.
- 조각 i(0 부터): 폭각 w_i = 3.6·v_i, 시작각 a_i = 앞 조각 폭각의 합, 끝각 e_i = a_i + w_i, 가운데 각 m_i = a_i + w_i/2.
  조각 = 반지름 Ri~Ro 고리 부채꼴. 끝은 반지름 방향으로 곧게 자른다(둥근 끝 없음).
- 시간(전부 [장면]의 그리기 구간 T0 = 1.10 ~ T1 = 3.10 안):
  원래 길이 d0_i = 0.35 + v_i/100 초, 원래 시차 g0_i = 0.70·d0_i(조각 i 출발 → 조각 i+1 출발).
  배율 k = (T1 − T0) ÷ (g0_0 + … + g0_(n−2) + d0_(n−1)). d_i = k·d0_i, 출발 s_i = T0 + k·(g0_0 + … + g0_(i−1)). 마지막 조각이 정확히 T1 에 끝각에 닿는다.
- 머리 각 h_i(t), x = (t − s_i)/d_i:
  1) x < 0: 조각 없음.
  2) 0 ≤ x < 1: h = a_i + w_i·E(x), E(x) = (v_e − 2)·x³ + (3 − v_e)·x². 정지에서 출발해 x = 1 에서 정규 속도 v_e 로 끝각에 닿는다.
     v_e = min(Ω·d_i / w_i, 3.0), Ω = 180°/초(모든 조각이 같은 각속도로 도착한다). 3.0 상한은 E 가 거꾸로 가지 않게 하는 조건이다.
  3) x ≥ 1, τ = t − (s_i + d_i): h = e_i + (Ωa/16)·e^(−10τ)·sin(16τ), Ωa = w_i·v_e/d_i(실제 도착 각속도, 기본 데이터는 모두 180°/초).
     τ = 0 에서 위치도 속도도 이어진다. 넘침 최대 = 0.450·Ωa/16 = 5.07°(τ ≈ 0.063초, 바깥 둘레에서 약 31px).
- 본체 범위(조각이 차지하는 각):
  x < 1 이면 [a_i, h_i]. x ≥ 1(도착했음)이면 h 와 상관없이 [a_i, e_i] — 꽉 찬다. 도착한 뒤의 스프링은 넘침(h > e)으로만 보이고, 끝각 아래로 내려가는 몫(최대 −0.71°)은 본체를 줄이지 않는다.
  되감기 구간에서는 [a_i, clamp(G, a_i, e_i)], G ≥ e_i 이면 꽉 참. 그 밖의 구간(놓기·머묾)은 전부 꽉 참.
  「꽉 찼다」는 언제나 이 구간·x 판정으로 정한다. 각도를 비교해서(h ≥ e 같은 식으로) 정하지 않는다.
- 그리는 법(매 프레임):
  ① 바탕 고리.
  ② 모든 조각의 본체를 i 오름차순으로.
     이음매(이웃 사이에 비치는 안티에일리어싱 머리카락선) 막기: 먼저 그리는 쪽을 늘이고, 나중에 그리는 쪽이 정확한 각으로 그 위를 덮는다.
     - 조각 i 가 꽉 찼고, 조각 i+1 의 본체가 0.25° 이상 그려져 있고, 둘 다 평행이동이 0 이면: 조각 i 의 끝을 0.25° 넘겨(e_i + 0.25°) 그린다. 조각 i+1 은 정확히 a_(i+1) 에서 시작해 그 몫을 덮으므로 보이는 경계는 끝각에 그대로 놓인다.
     - 12시 경계는 반대로: 마지막 조각이 꽉 찼고 조각 0 과 마지막 조각 모두 평행이동이 0 이면, 조각 0 의 시작을 0.25° 앞으로(−0.25°) 늘인다. 조각 0 이 먼저 그려지고 마지막 조각이 나중에 정확한 각(360°)으로 덮는다.
  ③ 넘친 부분을 맨 위에: h_i > e_i 인 조각만 [e_i, h_i] 를 조각 색으로. 다음 조각 위로 경계가 불룩 나갔다 들어오는 것이 「맞물림」이다.
- 가운데 숫자 값 N(t) = Σ v_i·clamp(E_i, 0, 1)(x ≥ 1 이면 v_i). 그리기 구간 표시 = Math.floor(N + 1e−6). T1 에 정확히 100.
  확인용(기본 데이터): 시작 s = 1.100·1.596·1.997·2.337·2.663 · 도착 = 1.809·2.169·2.483·2.803·3.100 · d = 0.709·0.573·0.485·0.466·0.437 · v_e = 0.933·1.193·1.618·1.792·2.184.
  N(1.65) ≈ 28.7 · N(2.15) ≈ 62.9 · N(2.65) ≈ 83.3 · N(2.95) ≈ 94.0.

[이름표 배치 — 바깥 원 위, 겹치지 않게]
- 이름표 원 반지름 RL = Ro + 0.02H = 0.34H(약 367px). 기준점 = 그 조각의 중심(튀어나온 조각은 C 에서 POP 만큼 옮긴 중심 Cs).
- 방향 u = (sin m_i, −cos m_i). 정렬: u.x ≥ 0.35 면 상자 왼쪽 맞춤(오른쪽으로 뻗음), u.x ≤ −0.35 면 오른쪽 맞춤, 그 사이는 가운데. u.y ≥ 0.35(아래쪽)면 상자 위 맞춤(아래로 뻗음), u.y ≤ −0.35 면 아래 맞춤, 그 사이는 가운데. 두 줄의 글자 정렬도 가로 정렬과 같게.
- 거리: 기준점 + ρ·u 를 정렬점으로 상자를 놓고, 「상자 위에서 기준점에 가장 가까운 점」까지의 거리가 정확히 RL 이 되는 ρ 를 이분법(40회)으로 찾는다. 모서리 정렬이면 ρ = RL, 가운데 정렬이면 RL 보다 조금 크다.
- 화면 여백: 상자는 사방 0.03W 안에 들어와야 한다. 넘으면 그 이름표 두 글꼴을 5%씩 줄여(최소 80%) 다시 놓는다. 그래도 넘으면 상자를 여백 안으로 밀어 넣는다. 둘 다 최후 수단이고 console.warn 을 낸다.
- 겹침: 모든 이름표 쌍을 0.012H 여유를 두고 검사한다. 겹치면 값이 작은 쪽 이름표의 ρ 를 0.01H 씩 늘린다(최대 0.06H). 최후 수단이고 console.warn 을 낸다.
- 배치는 시작할 때 한 번 계산한다(튀어나온 최종 상태 기준). 튀어나온 조각의 이름표는 매 프레임 (그때 평행이동 − POP)·u 만큼 같이 움직여 조각에 붙어 다닌다.
- 합격 기준: 기본 데이터는 정렬이 주거 왼쪽·아래, 식비 가운데·위, 교통 오른쪽·가운데, 여가 오른쪽·아래, 저축 가운데·아래이고, 글꼴 줄임 0 · 밀어 넣기 0 · 겹침 조정 0 이 정상이다. 상자와 여백 사이 남는 거리는 가장 좁은 곳(주거)이 약 26~35px(Noto Sans KR 약 26 · Pretendard·맑은 고딕 약 34)이다.
- 시작할 때 콘솔 표를 출력한다: 이름 · 값 · a · w · m · d · s · 도착 · v_e · Ωa · 넘침 최대(°) · 정렬 · ρ · 상자 · 여백까지 남는 거리 · 조정. 그리고 스스로 대조한다 — 합계 100, 마지막 도착 3.10, 각 조각 넘침 최대 5.07°(±0.05), 이름표 조정 0, 숫자 F 줄임 0. 기본 데이터에서 어긋나면 어긋난 칸을 console.warn 으로 알린다.

[장면] (가장 큰 조각 = 값이 가장 큰 조각, 같으면 앞 조각. 최종 상태 F = 모든 조각 꽉 참 · 가장 큰 조각이 POP 만큼 나가 있음 · 이름표 전부 붙음 · 가운데 묶음 = 가장 큰 값 「38%」(그 조각 색) + 그 조각 이름(글 색 그대로))
가운데 묶음 교대(두 번 쓴다): 나가는 묶음이 0.15초 동안 위로 0.02H 오르며 불투명도 1 → 0(easeInCubic), 다 사라진 뒤 들어오는 묶음이 0.20초 동안 아래 0.02H 에서 제자리로 오르며 0 → 1(easeOutCubic). 두 묶음은 한 프레임도 겹쳐 보이지 않는다. 숫자를 한 양에서 다른 양으로 세어 넘기지 않는다 — 양이 바뀌는 것은 이 교대로만 보인다.
1. 0.00–0.20 놓기(첫 프레임부터 움직인다). 0.00 프레임 = F.
   이름표 전부 0.00–0.15 동안 바깥으로 0.025H 밀려나며(easeInCubic) 불투명도 1 → 0.
   튀어나온 조각이 0.00–0.20 동안 제자리로(평행이동 = POP·(1 − easeInOutCubic(u))).
   가운데 묶음 교대: 「38%」+「주거」가 0.00–0.15 에 나가고, 「100%」(글자 색)+「한 달 생활비」가 0.15–0.35 에 들어온다. 들어오는 숫자는 처음부터 아래 되감기 식의 값을 보여 준다(0.35 까지는 100).
2. 0.20–1.00 되감기. 머리 하나 G = 360·(1 − u³), u = (t − 0.20)/0.80. 조각마다 본체 [a_i, clamp(G, a_i, e_i)] — 마지막 조각부터 거꾸로 사라진다.
   처음엔 느리다가(0.60 에 315°, 0.80 에 208° 남음 — 첫 0.8초는 화면이 거의 꽉 차 있다) 끝에는 초속 1,350° 로 12시에 빨려 들어간다(0.90 에 119°, 1.00 에 0°).
   숫자 = Math.ceil(100·G/360 − 1e−6)(줄어드는 카운트는 올림 — 100 에서 시작해 G = 0 에서 정확히 0).
3. 1.00–1.10 빈 고리. 바탕 고리 + 「0%」 + 제목.
4. 1.10–3.10 그리기(시그니처 전반). [조각 그리기]의 식 그대로. 3.10 에 마지막 조각이 12시에 닿아 조각 0 위로 5.07° 넘쳤다가 맞물리고, 숫자가 100 이 된다.
5. 3.45 톡(시그니처). τ = t − 3.45, 가장 큰 조각 평행이동 = POP·(1 − e^(−14τ)·(cos 26τ + (14/26)·sin 26τ)). τ = 0 에서 값도 속도도 0. 0.121초에 1.18·POP(약 45px)까지 나갔다가 0.5초 뒤 ±0.2% 안에 선다. 튀어나간 조각의 바깥 끝은 C 에서 최대 약 390px(0.36H).
   가운데 묶음 교대: 「100%」+「한 달 생활비」가 3.45–3.60 에 나가고, 「38%」(그 조각 색)+「주거」가 3.60–3.80 에 들어온다.
6. 3.60–4.23 이름표 붙기. 순서 j = 가장 큰 조각부터 시계방향. 이름표 j 는 3.60 + 0.07·j 에 출발해 0.35초 동안, 0.025H 바깥에서 제자리로 다가오며(easeOutCubic) 처음 0.12초 동안 불투명도 0 → 1. 마지막 이름표가 4.23 에 선다.
7. 4.23–6.00 머묾(1.77초). 움직임 없음. 6.00 프레임 = 0.00 프레임(F).

[구현]
- HTML 파일 하나로 만든다. 외부 파일·글꼴·라이브러리·네트워크 요청을 쓰지 않는다(미리보기에서 막히거나 느려진다).
- 첫 <script> 맨 앞에 CONFIG 객체를 두고 [바꿀 곳]의 값과 이 글에 나온 숫자(시간표·크기·색·세기)를 이름 붙여 모은다. 나중에 숫자만 바꿔 다듬을 수 있게.
- 그림은 시간 t(초)만으로 계산하는 함수 render(t) 로 그린다. requestAnimationFrame 의 타임스탬프나 performance.now() 로 t 를 구한다. setTimeout·setInterval·CSS 애니메이션·transition 으로 움직이지 않는다(프레임마다 속도가 달라지고, 다시 재생할 때 어긋난다). 시뮬레이션처럼 상태가 쌓이는 작품은 고정 시간 간격으로 상태를 진행하되 그 진행도 타임스탬프로만 정한다.
- 난수는 시드 고정 난수(mulberry32 등)만 쓴다. Math.random 은 쓰지 않는다(매번 다른 화면이 나온다).
- 캔버스 내부 해상도는 화면비에 맞춘 기준 크기로 고정하고, 창 크기에 맞춰 화면비를 지키며 가운데에 꽉 차게 보이게 한다(남는 곳은 배경색). 스크롤이 생기지 않게 한다. devicePixelRatio 는 그리는 선명도에만 반영한다.
- 글자는 시스템 글꼴만 쓴다: 'Pretendard', 'Apple SD Gothic Neo', 'Malgun Gothic', 'Noto Sans KR', sans-serif. 붓글씨·손글씨 느낌은 글꼴이 아니라 획을 그려서 낸다.
- 길이가 정해진 작품은 끝나면 처음과 같은 화면으로 돌아가 이음매 없이 반복한다.
- 모든 함수·상수·셰이더 문자열을 먼저 정의하고, 시작(초기화와 첫 requestAnimationFrame)은 스크립트 맨 끝에서 한 번만 호출한다. 정의되기 전에 쓰면 첫 화면에서 멈춘다.

이 작품에만 해당하는 구현:
- 기준 크기 1080×1080. 상태가 쌓이지 않는다 — 모든 값은 t 만의 순수 함수다. 각도·시간표·이름표 배치·숫자 글꼴 크기·「%」 자리는 시작할 때 한 번 계산해 둔다.
- 스프링·반동은 전부 닫힌 식이고 τ = 0 에서 값과 속도가 앞 구간과 이어진다(머리 넘침은 sin 꼴, 톡은 [장면] 5의 식 그대로). 어떤 값도 한 프레임 사이에 튀면 안 된다.
- 0.00 프레임도 식으로 그린다(놓기 구간의 u = 0). 6.00 에서 모든 스프링은 1e−11° 이하로 잦아들어 있어 이음매가 없다.
- CONFIG.timing 에 [장면]의 시각을 전부 이름 붙여 모은다:
  release[0,0.20] · labelOff[0,0.15] · rewind[0.20,1.00] · empty[1.00,1.10] · draw[1.10,3.10] · pop 3.45 · swapOut 0.15 / swapIn 0.20(교대 시작 0.00·3.45) · labelOn 3.60 / labelStagger 0.07 / labelDur 0.35 · hold[4.23,6.00] · loop 6.00.
- CONFIG.draw 에 durBase 0.35 · durPerValue 1.0 · staggerRatio 0.70 · arriveSpeed 180 · springK 10 · springW 16 · veMax 3.0 · seamDeg 0.25 를, CONFIG.pop 에 dist 0.035 · k 14 · w 26 을 둔다.
- 데이터를 바꿔도 각·시간·이름표 자리는 위 규칙으로 코드가 다시 계산한다. 이름표 좌표나 글자 폭을 숫자로 박지 않는다.

[하지 말 것]
- 0초 화면을 빈 원이나 빈 화면으로 시작하지 않는다 — 첫 1초에 엄지를 멈추는 것은 다 그려진 색 고리와 큰 숫자, 그리고 그것이 12시로 빨려 들어가는 움직임이다. 빈 고리는 1.00–1.10 의 0.1초뿐이다.
- 0초에 정지 구간을 두지 않는다 — 첫 프레임부터 이름표가 떨어지고 조각이 들어간다. 머무는 시간은 끝(4.23–6.00)에 이미 있고, 반복하면 그 끝이 처음 바로 앞이다.
- 도착한 조각의 본체를 머리 각 h 까지만 그리지 않는다 — 스프링이 끝각 아래로 내려가는 0.2초 동안 조각 사이에 바탕색 쐐기(바깥 둘레 약 4px)가 열렸다 닫혀, 데이터가 비는 것처럼 깜빡인다. 도착하면 본체는 끝각까지 꽉 찬다.
- 「꽉 찼는가」를 각도 비교로 판정하지 않는다 — 도착 뒤 h − e 는 1초 넘게 아주 작은 값으로 부호를 바꾸므로, 이음매 처리가 초당 여러 번 켜졌다 꺼지며 경계에 머리카락선이 깜빡인다. 구간과 x ≥ 1 로 판정한다.
- 이음매를 막으려고 나중에 그리는 조각의 시작을 앞으로 늘이지 않는다 — 그 조각이 앞 조각 끝을 덮어 보이는 경계가 앞쪽으로 약 1.3px 옮겨진다. 먼저 그리는 쪽을 늘이고, 나중 쪽이 정확한 각으로 덮는다. 덮개를 따로 덧칠할 필요도 없다.
- 조각 넘침을 easeOutBack 같은 진행률 이징으로 만들지 않는다 — 넘침이 조각 크기에 비례해 가장 큰 조각은 크게 튀고 가장 작은 조각은 거의 안 보인다. 도착 각속도에서 이어지는 스프링이라야 모든 조각이 같은 5.07° 만큼 넘친다.
- 넘친 부분을 다음 조각 아래에 그리지 않는다 — 다음 조각에 가려 맞물림이 보이지 않는다. 넘친 부분은 맨 위다.
- 그리기를 머리 하나가 한 바퀴 도는 스윕으로 만들지 않는다 — 조각마다 시차를 두고 출발해 경계에서 맞물리는 것이 이 작품의 시그니처다. 머리 하나는 되감기에서만 쓴다.
- 조각 끝을 둥글게(lineCap round) 그리지 않는다 — 둥근 끝이 각도를 반지름 반만큼 부풀려 작은 조각의 비율이 틀려 보이고, 이웃 경계가 맞물리지 않는다.
- 가운데 숫자 줄을 그때 문자열의 폭으로 가운데 맞추지 않는다 — 9→10, 99→100 에서 숫자 줄 전체가 반 칸(약 45px) 옆으로 튀고, 하필 「100 이 된다」는 순간에 튄다. 「%」 자리를 고정하고 숫자는 오른쪽부터 채운다.
- 줄어드는 카운트를 내림(floor)으로 표시하지 않는다 — 되감기 첫 프레임에 G 가 360° 에서 아주 조금만 줄어도 99 가 되어, 100 → 99 → 100 처럼 깜빡인다. 줄어들 때는 올림.
- 가운데 숫자를 다른 양 사이에서 세어 넘기지 않는다(38 → 100 → 내려감, 100 → 38) — 처음 보는 사람에게 숫자가 이유 없이 오르내리는 깜빡임으로 읽힌다. 양이 바뀔 때는 가운데 묶음 교대로 바꾼다.
- 나가는 글과 들어오는 글을 겹쳐 그리지 않는다 — 글 잉크 높이(약 34px)가 이동 거리(0.02H)보다 커서, 겹치는 몇 프레임 동안 두 한글이 포개져 얼룩이 된다. 나가는 쪽이 다 사라진 뒤 들어온다.
- 가운데 숫자를 비례폭으로 그리지 않는다 — 숫자가 바뀔 때마다 글자 폭이 달라 숫자 줄이 매 프레임 떨린다. 자리 폭을 고정한다.
- 3D 기울임·그림자·그라디언트·광택을 넣지 않는다 — 기울인 원은 앞쪽 조각이 실제보다 커 보여 비율을 거짓으로 말하고, 그라디언트는 같은 조각을 두 색으로 읽게 한다.
- 튀어나온 조각을 확대(scale)로 키우지 않는다 — 면적이 커져 비율이 틀려진다. 강조는 평행이동과 가운데 숫자의 색만 맡는다.
- 다른 조각을 어둡게 하거나 흐리게 하지 않는다 — 나머지 이름표와 조각이 읽혀야 차트다. 강조는 위치와 숫자 색으로 충분하다.
- 이름표에 꺾인 지시선·범례 상자를 넣지 않는다 — 1:1 화면에서 지시선이 도넛 바깥 여백을 다 먹고, 범례는 눈을 차트와 범례 사이로 왕복시킨다. 이름표는 조각 바로 바깥에 붙는다.
- 이름표 위치나 글자 폭을 좌표로 박지 않는다 — 데이터를 바꾸면 겹치거나 화면 밖으로 나간다. 위 배치 규칙으로 계산한다.
- 이름표 값 숫자를 카운트업하지 않는다 — 가운데 묶음이 같은 순간 바뀌고 있어서, 숫자 여러 개가 동시에 움직이면 어느 것도 읽히지 않는다.
- 숫자·조각에 모션 블러·잔상을 넣지 않는다 — 차트는 경계가 정확해야 비율이 읽힌다. 흐린 머리 끝은 조각을 실제보다 길어 보이게 한다.
- 파티클·반짝임·발광·글로우·배경 무늬를 넣지 않는다 — 시선을 맞물림과 「톡」에서 빼앗고, 흔한 대시보드 템플릿처럼 보이게 한다.
- 머묾 구간에 숨쉬기·맥박 같은 움직임을 넣지 않는다 — 데이터 차트의 머묾은 값을 읽는 시간이다.
- 장면 사이를 페이드(화면 전체 투명도)로 넘기지 않는다 — 처음과 끝은 같은 꽉 찬 화면이고, 되감기가 그 사이를 잇는다. 페이드는 이음매를 장면 전환으로 보이게 한다.
- 프레임 사이에 값을 누적하지 않는다 — 반복할 때 6.00 프레임이 0.00 프레임과 같아야 한다.