Claude로 데이터 차트 바로 만들기
스프레드시트나 CSV에서 표를 복사해 프롬프트의 [여기에 표 붙여넣기] 자리에 넣으면, Claude가 HTML 파일 하나로 움직이는 차트를 만들어 줘요. 장면마다 예시 표가 있어서 어떤 모양의 표가 어울리는지 바로 보여요.
공통 조건
첫 줄은 머리글이에요. HTML 파일 하나에 CSS와 JavaScript를 넣고, 외부 라이브러리 없이 canvas나 SVG로 그려 주세요. 어두운 배경에 숫자와 글자는 또렷하게, 휴대폰 폭에서도 글자가 겹치지 않게 해 주세요. prefers-reduced-motion이 켜져 있으면 움직임 없이 다 그려진 차트를 보여 주세요.
01그려지는 선 그래프
선이 왼쪽부터 그어지고, 끝점에 지금 값이 따라 붙어요.
| 월 | 매출(만 원) |
|---|---|
| 1월 | 320 |
| 2월 | 410 |
| 3월 | 380 |
| 4월 | 520 |
| 5월 | 610 |
| 6월 | 740 |
월별 값을 선 그래프로 그려 주세요. 선은 2초 동안 왼쪽부터 그어지고, 아래는 같은 색 그라데이션으로 채워요. 선 끝에는 지금 값을 말풍선으로 붙이고, 왼쪽 위에 첫 달 대비 증가율을 크게 보여 주세요.
[여기에 표 붙여넣기]02순위가 바뀌는 막대 경주
달이 넘어갈 때마다 막대가 미끄러지며 자리를 바꿔요.
| 월 | 사과 | 귤 | 딸기 | 포도 | 배 | 복숭아 |
|---|---|---|---|---|---|---|
| 1월 | 120 | 200 | 90 | 60 | 100 | 30 |
| 2월 | 140 | 180 | 150 | 70 | 105 | 40 |
| 3월 | 150 | 150 | 210 | 90 | 110 | 70 |
| 4월 | 160 | 120 | 190 | 130 | 115 | 120 |
| 5월 | 170 | 100 | 140 | 170 | 120 | 190 |
| 6월 | 180 | 90 | 110 | 220 | 125 | 240 |
첫 열은 월, 나머지 열은 항목인 표로 가로 막대 경주 차트를 만들어 주세요. 값은 달 사이를 부드럽게 이어 가고, 순위가 바뀌면 막대가 위아래로 미끄러져요. 오른쪽 아래에 지금 월을 크고 흐리게 보여 주세요.
[여기에 표 붙여넣기]03도넛 비율
조각이 12시부터 돌아가며 차고, 가운데 합계가 올라가요.
| 항목 | 비율(%) |
|---|---|
| 식비 | 38 |
| 주거 | 27 |
| 여가 | 15 |
| 교통 | 12 |
| 기타 | 8 |
항목별 비율을 도넛 차트로 그려 주세요. 조각은 12시 방향부터 시계 방향으로 차례로 차고, 가운데 합계는 0부터 올라가요. 오른쪽에 색, 이름, 퍼센트 범례를 두고, 가장 큰 조각은 다 그려지면 바깥으로 살짝 튀어나와요. 합계는 [합계와 단위]예요.
[여기에 표 붙여넣기]04흔들리는 게이지 바늘
바늘이 튕기듯 평균까지 가서 멈춘 뒤에도 살짝 흔들려요.
| 응답 | 만족도(100점) |
|---|---|
| 1 | 90 |
| 2 | 75 |
| 3 | 88 |
| 4 | 70 |
| 5 | 87 |
점수들의 평균을 반원 게이지로 보여 주세요. 0~50은 분홍, 50~75는 노랑, 75~100은 초록 구간이에요. 바늘은 0에서 튕기듯 평균까지 가서 멈춘 뒤에도 아주 조금씩 흔들리고, 아래에 평균 숫자가 함께 올라가요.
[여기에 표 붙여넣기]05달력 히트맵
한 주가 한 줄인 칸들이 물결처럼 튀어나오며 채워져요.
| 날짜 | 걸음 수 |
|---|---|
| 7.06 | 4,270 |
| 7.07 | 4,580 |
| 7.08 | 10,260 |
| 7.09 | 8,530 |
| 7.10 | 7,430 |
| … | … |
날짜별 값을 한 주가 한 칸 열인 달력 히트맵으로 그려 주세요. 칸은 왼쪽 주부터 물결처럼 튀어나오며 채워지고, 값이 클수록 진한 [색]이에요. 가장 큰 날에는 테두리와 값을 달고, 위에 달 이름, 왼쪽에 요일을 적어요.
[여기에 표 붙여넣기]06두 기간 비교
막대가 차례로 자라고, 위에 증감률이 튀어나와요.
| 분기 | 작년(억 원) | 올해(억 원) |
|---|---|---|
| 1분기 | 42 | 50 |
| 2분기 | 48 | 57 |
| 3분기 | 51 | 49 |
| 4분기 | 60 | 78 |
두 기간을 나란히 비교하는 묶음 막대 차트를 만들어 주세요. 이전 기간은 흐린 회색, 이번 기간은 [강조 색]이에요. 막대가 묶음마다 차례로 자라고, 다 자라면 위에 증감률이 오르면 초록, 내리면 분홍으로 튀어나와요.
[여기에 표 붙여넣기]07점 분포와 추세선
점이 떠올라 자리 잡고, 추세선이 그어지며 기울기를 알려 줘요.
| 공부 시간 | 점수 |
|---|---|
| 4.6 | 68 |
| 3.2 | 59 |
| 5 | 80 |
| 8.8 | 87 |
| 4.7 | 76 |
| … | … |
두 열의 관계를 점 그래프로 그려 주세요. 점은 아래에서 차례로 떠올라 자리 잡고, 그다음 최소제곱 추세선이 왼쪽부터 그어져요. 추세선 끝에 "x가 1 늘 때 +몇" 형식으로 기울기를 적어 주세요.
[여기에 표 붙여넣기]08누적 영역
아래층부터 차례로 솟아오르고, 끝에 층별 비율이 붙어요.
| 주 | 검색 | SNS | 직접 |
|---|---|---|---|
| 1주 | 1,370 | 769 | 826 |
| 2주 | 1,420 | 755 | 891 |
| 3주 | 1,495 | 932 | 949 |
| 4주 | 1,477 | 1,100 | 949 |
| 5주 | 1,606 | 1,072 | 936 |
| … | … | … | … |
첫 열은 주, 나머지 열은 경로인 표로 누적 영역 차트를 그려 주세요. 아래층부터 차례로 솟아오르고, 층마다 색은 다르게, 윗선만 진하게 그어요. 다 그려지면 오른쪽 끝에 마지막 주의 층별 비율을 붙여 주세요.
[여기에 표 붙여넣기]09방사형 비교
가운데에서 두 다각형이 차례로 펼쳐지며 겹쳐요.
| 항목 | 작년 | 올해 |
|---|---|---|
| 속도 | 6 | 8 |
| 가격 | 7 | 6 |
| 디자인 | 5 | 8 |
| 지원 | 6 | 7 |
| 기능 | 5 | 7 |
| 안정성 | 7 | 8 |
항목별 점수를 두 계열로 비교하는 방사형 차트를 만들어 주세요. 축은 첫 열의 항목, 계열은 나머지 열이에요. 다각형이 가운데에서 계열마다 차례로 펼쳐지고, 반투명하게 겹쳐 차이가 보여요. 오른쪽에 계열별 평균을 적어 주세요.
[여기에 표 붙여넣기]10표 속 작은 추세선
줄마다 작은 선이 차례로 그어지고, 증감이 색으로 붙어요.
| 상품 | 주별 판매량(1~12주) |
|---|---|
| 머그컵 | 60, 65, 70, 74, 82, 81, 76, 89, 94, 95, 100, 110 |
| 에코백 | 59, 66, 68, 61, 64, 68, 73, 75, 81, 76, 87, 89 |
| 엽서 | 59, 65, 62, 60, 51, 55, 47, 42, 52, 55, 41, 37 |
| 스티커 | 64, 58, 63, 64, 70, 59, 72, 73, 66, 60, 62, 77 |
| 키링 | 60, 58, 51, 53, 54, 40, 48, 34, 39, 40, 44, 31 |
상품마다 한 줄인 표를 만들고, 줄마다 주별 판매량 추세선을 작게 넣어 주세요. 추세선은 줄마다 조금씩 늦게 그어지고, 오른쪽에 이번 주 값과 지난주 대비 증감을 ▲ 초록, ▼ 분홍으로 적어요.
[여기에 표 붙여넣기]