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

데이터 면적 변화Animated Size Encoding

Animated Size Encoding

데이터 면적 변화

다른 이름Also known as · Bubble map · 버블 지도 · Animated size encoding · 면적 인코딩 전환

292

렌더 추가 예정CLIP COMING데이터 면적 변화Animated Size Encoding정의·파라미터·프롬프트는 아래에 있다Definition, parameters and prompts are below

도판Fig. 292. 데이터 면적 변화 · Animated Size Encoding · power2.out

중심 위치가 고정된 원이나 도형의 면적이 데이터 값에 비례해 커지거나 작아진다.Shapes change area in proportion to their data values.

무엇을 전하나What it tells

전달 효과ConveysCONVEYS

위치 관계를 유지하며 데이터 규모의 차이를 보여준다.Shows relative scale without moving geographic or chart positions.

언제 쓰나Use whenUSE WHEN

인구 4배인 지역의 원 반지름을 2배로 표시한다.
위치 관계를 유지하며 데이터 규모의 차이를 보여준다. 기준값과 대상을 함께 표시할 때.

Compare magnitudes while keeping positions fixed.
Keep the encoded values, labels, and visual state synchronized.

과용 주의AvoidAVOID

음수 값은 면적에 넣지 않고 별도 인코딩한다.

분류TagsTAGS

좋은 예와 나쁜 예Good and bad use

좋은 사례GOOD

인구 4배인 지역의 원 반지름을 2배로 표시한다.

과용 · 나쁜 사례OVERUSE

값이 4배라고 반지름도 4배로 늘린다.

파라미터Parameters

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

항목PARAM	기본DEFAULT	범위RANGE	메모NOTE
지속	750ms	400~1200ms	중심 고정
최소 반지름	2px	0~4px	0값은 숨김 처리
최대 반지름	80px	40~120px	면적을 값에 비례시킨다

GSAP

const tl=gsap.timeline({paused:true});
bubbles.forEach(b=>{
 const r=b.value===0?0:Math.max(2,80*Math.sqrt(b.value/maxValue));
 tl.fromTo(b.element,{attr:{r:0}},{attr:{r},duration:0.75,ease:'power2.out'},0);
});

README

에이전트 프롬프트Agent prompts

그대로 붙여 넣는다Paste as is

Claude Code

<파일>의 <대상>에 데이터 면적 변화을 적용해. SVG 도형의 중심을 유지한 채 표시 면적을 보간하고 원 반지름은 제곱근으로 환산한다. 지속 750ms; 최소 반지름 2px; 최대 반지름 80px을 적용한다. GSAP 코어의 paused 타임라인 하나로 seek 가능하게 만들고 임의 난수와 타이머를 쓰지 마.

Codex

<파일>의 설명 장면에서 <대상>에 데이터 면적 변화을 적용해. SVG 도형의 중심을 유지한 채 표시 면적을 보간하고 원 반지름은 제곱근으로 환산한다. 지속 750ms; 최소 반지름 2px; 최대 반지름 80px을 적용한다. 0초, 0.375초, 0.75초를 캡처해 시작 상태, 중간 진행, 최종 상태를 확인하고 같은 시각으로 다시 seek했을 때 좌표와 라벨이 같은지 검증해.

Implement Animated Size Encoding on <target> in <file>. Animate area over 750ms with a maximum radius of 80px and a minimum visible radius of 2px. Use the square root of normalized value for radius; hide zero values and keep centers fixed. Use one paused GSAP core timeline, support seeking, and avoid random values and timers. Capture at 0s, 0.375s, and 0.75s to check the initial state, intermediate motion, and final state. Seek to each time again and verify identical geometry and labels.