백분율 정규화 전환Percent Normalization

Percent Normalization

백분율 정규화 전환

다른 이름Also known as · Percent normalization

282

렌더 추가 예정CLIP COMING백분율 정규화 전환Percent Normalization정의·파라미터·프롬프트는 아래에 있다Definition, parameters and prompts are below

도판Fig. 282. 백분율 정규화 전환 · Percent Normalization · power2.inOut

크기가 달랐던 누적 막대가 같은 전체 길이가 되고 내부 조각의 비율이 유지된다.Stacks with different totals become equal-length bars while preserving their internal proportions.

무엇을 전하나What it tells

전달 효과ConveysCONVEYS

절대 규모 비교에서 구성비 비교로 관점을 바꾼다.Shifts the comparison from absolute size to composition.

언제 쓰나Use whenUSE WHEN

전체 규모가 다른 집단의 구성비를 비교할 때
절대값 누적 차트를 100% 보기로 전환할 때

Compare the composition of groups with different totals.
Switch an absolute stacked chart to a 100 percent view.

과용 주의AvoidAVOID

합계 0인 집단은 비율 미정으로 구분한다.

분류TagsTAGS

좋은 예와 나쁜 예Good and bad use

좋은 사례GOOD

각 조각을 집단 합계로 나눠 0.9초에 900px 전체 폭으로 정규화한다.

과용 · 나쁜 사례OVERUSE

합계가 0인 집단을 100%로 늘려 자료가 있는 것처럼 표시한다.

파라미터Parameters

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

항목PARAM	기본DEFAULT	범위RANGE	메모NOTE
전환 시간	900ms	650~1300ms	폭과 시작점을 함께 보간한다.
목표 합계	100%	100% 고정	집단별 합계로 나눈다.
축 전환	600ms	400~800ms	절대값 축을 비율 축으로 바꾼다.
목표 폭	900px	700~1200px	모든 집단의 전체 폭을 맞춘다.
이징	power2.inOut	none \| power2.out \| power2.inOut	끝점을 넘지 않는 이징을 쓴다.

GSAP

const tl=gsap.timeline({paused:true});
document.querySelectorAll('.segment').forEach(el=>{
  const d=el.dataset,total=+d.total;
  if(total>0)tl.to(el,{attr:{x:200+900*(+d.cumulative)/total,width:900*(+d.value)/total},duration:0.9,ease:'power2.inOut'},0);
});
tl.to('.absolute-axis',{opacity:0,duration:0.6},0);
tl.fromTo('.percent-axis',{opacity:0},{opacity:1,duration:0.6},0.3);

README

에이전트 프롬프트Agent prompts

그대로 붙여 넣는다Paste as is

Claude Code

<파일>의 <대상>에 백분율 정규화 전환를 구현해. 크기가 달랐던 누적 막대가 같은 전체 길이가 되고 내부 조각의 비율이 유지된다. 전환 시간 900ms, 목표 합계 100%, 축 전환 600ms, 목표 폭 900px, 이징 power2.inOut를 적용하고 GSAP 코어의 paused 타임라인 하나로 seek 가능하게 작성해. 합계 0인 집단은 비율 미정으로 구분한다.

Implement Percent Normalization for <target> in <file>. Stacks with different totals become equal-length bars while preserving their internal proportions. Use transition duration: 900ms; target total: 100%; axis transition duration: 600ms; target width: 900px; easing: power2.inOut in a single paused GSAP core timeline that supports seeking. Treat zero-total groups as undefined proportions.

Codex

<파일>의 <대상> 장면에 백분율 정규화 전환를 적용해. 전환 시간 900ms, 목표 합계 100%, 축 전환 600ms, 목표 폭 900px, 이징 power2.inOut를 사용하고 다음 동작을 구현해: 항목별 합계로 나눈 길이와 공통 기준선 좌표를 보간한다. 플러그인과 Math.random 없이 작성하고 0.23초·0.54초·0.9초를 캡처해 초기 상태, 중간 변화, 최종 상태가 연속적이며 다음 예시와 맞는지 확인해: 각 조각을 집단 합계로 나눠 0.9초에 900px 전체 폭으로 정규화한다.

Apply Percent Normalization to the <target> scene in <file> using transition duration: 900ms; target total: 100%; axis transition duration: 600ms; target width: 900px; easing: power2.inOut. Stacks with different totals become equal-length bars while preserving their internal proportions. 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. Treat zero-total groups as undefined proportions.