효과Effects / 데이터Data / Nº 250

막대 차트 레이스Bar Chart Race

Bar Chart Race

막대 차트 레이스

다른 이름Also known as · Bar chart race · 막대 순위 경주 · Racing bars

250

도판Fig. 250. 막대 차트 레이스 · Bar Chart Race · none

재생 속도Speed

시계열이 진행하며 막대 길이와 순위가 바뀌고 선두의 강조가 이동한다.Bar lengths and vertical ranks interpolate between time steps.

무엇을 전하나What it tells

전달 효과ConveysCONVEYS

시간에 따른 경쟁과 추월을 보여준다.Shows competition and overtaking over time.

언제 쓰나Use whenUSE WHEN

연도별 상위 8개 제품의 매출과 순위가 함께 바뀐다.
시간에 따른 경쟁과 추월을 보여준다. 기준값과 대상을 함께 표시할 때.

Compare changing ranks over time.
Keep the encoded values, labels, and visual state synchronized.

과용 주의AvoidAVOID

연도와 축 최댓값을 항상 표시한다.

분류TagsTAGS

좋은 예와 나쁜 예Good and bad use

좋은 사례GOOD

연도별 상위 8개 제품의 매출과 순위가 함께 바뀐다.

과용 · 나쁜 사례OVERUSE

축 범위 변화는 숨긴 채 길이만 비교한다.

파라미터Parameters

기본값은 클립에 쓴 값Defaults are the values used in the clip

항목PARAM	기본DEFAULT	범위RANGE	메모NOTE
전체 지속	12000ms	8000~20000ms	12개 단계 기준
단계 지속	1000ms	600~1600ms	순위 이동을 읽게 한다
표시 막대	8	5~12	동점은 고정 키로 정렬
행 간격	64px	48~80px	1920x1080 기준

GSAP

const tl=gsap.timeline({paused:true});
frames.forEach((rows,k)=>{
 const ranked=[...rows].sort((a,b)=>b.value-a.value||a.id.localeCompare(b.id));
 const max=Math.max(1,...rows.map(r=>r.value));
 ranked.forEach((r,i)=>tl.to(bars[r.id],{attr:{width:900*r.value/max},y:i*64,duration:1,ease:'none'},k));
});

라이브 소스 열기Open live source 소스 코드Source README

에이전트 프롬프트Agent prompts

그대로 붙여 넣는다Paste as is

Claude Code

<파일>의 <대상>에 막대 차트 레이스을 적용해. 각 시점의 값과 정렬된 y 좌표를 보간하고 축 최대값을 함께 갱신한다. 전체 지속 12000ms; 단계 지속 1000ms; 표시 막대 8; 행 간격 64px을 적용한다. GSAP 코어의 paused 타임라인 하나로 seek 가능하게 만들고 임의 난수와 타이머를 쓰지 마.

Codex

<파일>의 설명 장면에서 <대상>에 막대 차트 레이스을 적용해. 각 시점의 값과 정렬된 y 좌표를 보간하고 축 최대값을 함께 갱신한다. 전체 지속 12000ms; 단계 지속 1000ms; 표시 막대 8; 행 간격 64px을 적용한다. 0초, 6초, 12초를 캡처해 시작 상태, 중간 진행, 최종 상태를 확인하고 같은 시각으로 다시 seek했을 때 좌표와 라벨이 같은지 검증해.

Implement Bar Chart Race on <target> in <file>. Animate 12 time steps over 12000ms, with 1000ms per step, 8 visible bars, and 64px row spacing. Update the axis maximum and year label at the same time. Use one paused GSAP core timeline, support seeking, and avoid random values and timers. Capture at 0s, 6s, and 12s to check the initial state, intermediate motion, and final state. Seek to each time again and verify identical geometry and labels.