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

차트 경로 모프Chart Path Morph

Chart Path Morph

차트 경로 모프

다른 이름Also known as · Data path reshaping · 데이터 경로 변화 · Line and area shape update · 선과 면 윤곽 갱신

259

렌더 추가 예정CLIP COMING차트 경로 모프Chart Path Morph정의·파라미터·프롬프트는 아래에 있다Definition, parameters and prompts are below

도판Fig. 259. 차트 경로 모프 · Chart Path Morph · power2.inOut

같은 그래프의 선이나 면이 새로운 데이터 모양으로 부드럽게 변한다.A chart line or area continuously reshapes to match a new dataset.

무엇을 전하나What it tells

전달 효과ConveysCONVEYS

이전과 이후 추세를 연속적으로 비교하게 한다.Preserves continuity while comparing earlier and later trends.

언제 쓰나Use whenUSE WHEN

선택 기간이 바뀔 때 선 그래프를 갱신할 때
같은 축에서 이전과 이후 추세를 비교할 때

Update a line chart when the selected period changes.
Compare two trend profiles on a fixed axis.

과용 주의AvoidAVOID

보간 중간값을 관측값으로 표기하지 않는다.

분류TagsTAGS

좋은 예와 나쁜 예Good and bad use

좋은 사례GOOD

같은 x 위치의 다섯 값을 0.9초 동안 보간하고 축과 표본 수를 유지한다.

과용 · 나쁜 사례OVERUSE

서로 다른 점 개수를 그대로 연결해 중간에 선이 뒤집힌다.

파라미터Parameters

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

항목PARAM	기본DEFAULT	범위RANGE	메모NOTE
전환 시간	900ms	600~1400ms	동일 x 좌표의 값을 보간한다.
표본 수	5개	5~100개	양쪽 배열을 동일 길이로 맞춘다.
점 간격	240px	12~300px	고정된 x 척도를 쓴다.
이징	power2.inOut	none \| power2.out \| power2.inOut	끝점을 넘지 않는 이징을 쓴다.

GSAP

const tl=gsap.timeline({paused:true}), state={p:0};
const a=[400,250,350,180,280],b=[300,320,160,260,120];
tl.to(state,{p:1,duration:0.9,ease:'power2.inOut',onUpdate:()=>{
  const d=a.map((v,i)=>(i?'L':'M')+(200+i*240)+','+(v+(b[i]-v)*state.p)).join(' ');
  document.querySelector('.trend').setAttribute('d',d);
}});

README

에이전트 프롬프트Agent prompts

그대로 붙여 넣는다Paste as is

Claude Code

<파일>의 <대상>에 차트 경로 모프를 구현해. 같은 그래프의 선이나 면이 새로운 데이터 모양으로 부드럽게 변한다. 전환 시간 900ms, 표본 수 5개, 점 간격 240px, 이징 power2.inOut를 적용하고 GSAP 코어의 paused 타임라인 하나로 seek 가능하게 작성해. 보간 중간값을 관측값으로 표기하지 않는다.

Implement Chart Path Morph for <target> in <file>. A chart line or area continuously reshapes to match a new dataset. Use transition duration: 900ms; sample count: 5; point spacing: 240px; easing: power2.inOut in a single paused GSAP core timeline that supports seeking. Normalize both datasets to matching sample counts; do not label interpolated values as observations.

Codex

<파일>의 <대상> 장면에 차트 경로 모프를 적용해. 전환 시간 900ms, 표본 수 5개, 점 간격 240px, 이징 power2.inOut를 사용하고 다음 동작을 구현해: 데이터 배열을 직접 보간한 뒤 매 프레임 SVG 경로를 다시 계산한다. 플러그인과 Math.random 없이 작성하고 0.23초·0.54초·0.9초를 캡처해 초기 상태, 중간 변화, 최종 상태가 연속적이며 다음 예시와 맞는지 확인해: 같은 x 위치의 다섯 값을 0.9초 동안 보간하고 축과 표본 수를 유지한다.

Apply Chart Path Morph to the <target> scene in <file> using transition duration: 900ms; sample count: 5; point spacing: 240px; easing: power2.inOut. A chart line or area continuously reshapes to match a new dataset. Use prepared data or geometry with GSAP core, no plugins, and no Math.random; capture at 0.23, 0.54, 0.9 seconds to verify continuous intermediate geometry, correct endpoints, and identical output after repeated seeks. Normalize both datasets to matching sample counts; do not label interpolated values as observations.