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

코로플레스 색상 전환Choropleth Transition

Choropleth Transition

코로플레스 색상 전환

다른 이름Also known as · Choropleth reveal · 단계구분도 공개 · Choropleth time transition · 코로플레스 시간 전환

261

렌더 추가 예정CLIP COMING코로플레스 색상 전환Choropleth Transition정의·파라미터·프롬프트는 아래에 있다Definition, parameters and prompts are below

도판Fig. 261. 코로플레스 색상 전환 · Choropleth Transition · power1.inOut

지도 구역의 색이 데이터 값에 따라 순서대로 채워지거나 시점별 색으로 바뀐다.Map regions transition to colors encoded from data values.

무엇을 전하나What it tells

전달 효과ConveysCONVEYS

지역별 수치와 분포의 차이를 보여준다.Reveals geographic differences in a metric.

언제 쓰나Use whenUSE WHEN

같은 범례로 시도별 실업률 색을 순차 공개한다.
지역별 수치와 분포의 차이를 보여준다. 기준값과 대상을 함께 표시할 때.

Compare regional values and distributions.
Keep the encoded values, labels, and visual state synchronized.

과용 주의AvoidAVOID

결측 지역은 별도 색과 라벨로 표시한다.

분류TagsTAGS

좋은 예와 나쁜 예Good and bad use

좋은 사례GOOD

같은 범례로 시도별 실업률 색을 순차 공개한다.

과용 · 나쁜 사례OVERUSE

지역별로 다른 색 범위를 써 비교를 왜곡한다.

파라미터Parameters

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

항목PARAM	기본DEFAULT	범위RANGE	메모NOTE
지역 시작차	40ms	0~80ms	지역 순서 고정
색 전환	500ms	300~900ms	범례 범위 고정
범례 공개	800ms	400~1000ms	단위 함께 표시

GSAP

const tl=gsap.timeline({paused:true});
regions.forEach((r,i)=>{
 tl.fromTo(r.element,{fill:'#e5e7eb'},{fill:r.color,duration:0.5,ease:'power1.inOut'},i*0.04);
});
tl.fromTo('.legend',{opacity:0},{opacity:1,duration:0.8},0);

README

에이전트 프롬프트Agent prompts

그대로 붙여 넣는다Paste as is

Claude Code

<파일>의 <대상>에 코로플레스 색상 전환을 적용해. SVG 지역별 데이터 값을 색으로 매핑해 시간차 공개한다. 지역 시작차 40ms; 색 전환 500ms; 범례 공개 800ms을 적용한다. GSAP 코어의 paused 타임라인 하나로 seek 가능하게 만들고 임의 난수와 타이머를 쓰지 마.

Codex

<파일>의 설명 장면에서 <대상>에 코로플레스 색상 전환을 적용해. SVG 지역별 데이터 값을 색으로 매핑해 시간차 공개한다. 지역 시작차 40ms; 색 전환 500ms; 범례 공개 800ms을 적용한다. 0초, 0.75초, 1.5초를 캡처해 시작 상태, 중간 진행, 최종 상태를 확인하고 같은 시각으로 다시 seek했을 때 좌표와 라벨이 같은지 검증해.

Implement Choropleth Transition on <target> in <file>. Stagger regions by 40ms, transition their fills over 500ms, and reveal the legend over 800ms. Keep the color domain fixed and mark missing values separately. Use one paused GSAP core timeline, support seeking, and avoid random values and timers. Capture at 0s, 0.75s, and 1.5s to check the initial state, intermediate motion, and final state. Seek to each time again and verify identical geometry and labels.