---
name: tufte-charts
description: >
  차트·그래프를 고르거나 지표를 시각화해 HTML/SVG·React 코드로 만들 때 로드한다.
  데이터와 질문에 맞는 차트 유형을 고르고 불필요한 장식을 줄여 정확하고 읽기 쉽게
  표현한다. 화면 레이아웃과 컴포넌트 구조는 frontend-design이, 구조 탐색은
  html-wireframe이, 눌러보는 목업은 html-prototype이 맡는다.
---

# Tufte 차트

데이터가 말하는 내용을 가장 적은 시각적 부담으로 정확하게 보여준다.

## 먼저 결정할 것

1. 독자가 차트에서 답해야 할 질문을 한 문장으로 정한다.
2. 비교, 추세, 분포, 관계, 구성, 흐름 중 분석 목적을 고른다.
3. 정확한 값과 전체 패턴 중 무엇이 더 중요한지 판단한다.
4. 데이터의 단위, 기간, 표본과 결측치를 확인한다.

## 차트 선택

| 목적 | 기본 선택 | 대안 |
|---|---|---|
| 항목 간 비교 | 정렬된 horizontal bar | 값이 20개 이하면 table |
| 시간 추세 | line | 작은 여러 집단은 small multiples |
| 두 시점 변화 | slopegraph | 집단이 많으면 dumbbell |
| 분포 | histogram 또는 box plot | 작은 표본은 dot plot |
| 두 변수 관계 | scatter plot | 밀도가 높으면 hexbin |
| 전체 대비 구성 | 100% stacked bar | 항목이 적으면 직접 표시한 bar |
| 단계별 이탈 | funnel보다 단계별 bar | 시간 변화가 있으면 small multiples |
| 정확한 값 전달 | table | 값 옆에 sparkline |

pie, donut, 3D chart와 dual-axis는 기본값으로 사용하지 않는다. 사용자가 명시적으로
요구하면 따르되, 더 정확한 대안을 한 문장으로 알린다.

## 표현 규칙

- 범례보다 데이터 가까이에 직접 label을 붙인다.
- 범주형 항목은 의미 있는 값 순서로 정렬한다.
- 한 가지 accent color로 핵심만 강조하고 나머지는 중립색을 사용한다.
- gridline, axis, border는 읽는 데 필요한 만큼만 남긴다.
- 숫자 단위와 소수점 자릿수를 일관되게 맞춘다.
- axis를 잘라 차이를 과장하지 않는다. 잘라야 한다면 명확히 표시한다.
- 불확실성, 목표 범위나 기준선이 중요하면 데이터와 함께 표시한다.
- 제목은 주제명이 아니라 차트가 보여주는 결론을 담게 한다.
- 출처, 기간, 표본, 변환과 중요한 caveat를 가까이에 적는다.

차트를 감싼 지면의 시각 클리셰는 같은 플러그인의 `frontend-design` 스킬 안에 있다 — **그
스킬을 열면 그 디렉터리의** `references/ai-visual-tells.md`다. 차트 자체의 판단은 이 절이
먼저다.

## 구현

프로젝트 맥락에 따라 다음을 선택한다.

- 단독 결과물: 외부 의존성 없는 self-contained HTML과 inline SVG
- 기존 React 프로젝트: 프로젝트가 이미 사용하는 chart library
- 적은 데이터나 정확한 값: semantic HTML table

반응형 크기, keyboard 접근, 충분한 대비와 텍스트 대체 설명을 제공한다.
색만으로 series를 구분하지 않고 label이나 선 모양을 함께 사용한다.

## 발행 전 확인

- 차트 유형이 질문과 데이터에 맞는가?
- 비교 기준과 단위가 분명한가?
- 장식을 제거해도 정보가 유지되는가?
- 색이 의미를 전달하는가?
- 작은 화면과 흑백에서도 읽히는가?
- 데이터가 없는 상태와 결측치가 오해 없이 표현되는가?
- 모든 수치와 결론이 제공된 데이터에서 추적 가능한가?

완성된 코드나 명세를 응답으로 제공하고, 실행하거나 파일로 저장했다고 가장하지 않는다.