지도에서 막대 차트로Map to Bar Chart

Map to Bar Chart

지도에서 막대 차트로

다른 이름Also known as · Map tilt to chart · 지도 기울이기와 차트 전환

310

렌더 추가 예정CLIP COMING지도에서 막대 차트로Map to Bar Chart정의·파라미터·프롬프트는 아래에 있다Definition, parameters and prompts are below

도판Fig. 310. 지도에서 막대 차트로 · Map to Bar Chart · power2.inOut

평면 지도가 기울어 높이 지도가 된 뒤 지역별 막대가 나란한 차트로 옮겨 간다A flat map tilts into a height map, then region prisms move into an aligned bar chart.

무엇을 전하나What it tells

전달 효과ConveysCONVEYS

지리 맥락과 정확한 값 비교를 하나의 흐름으로 잇는다. 지도에서 본 그 지역이 막대 차트의 그 막대라는 것을 알게 한다Links geographic context and exact value comparison in one flow, so viewers see that a region on the map is a bar in the chart.

언제 쓰나Use whenUSE WHEN

지도에서 어느 지역이 높은지 보여 준 뒤 정확한 순위를 비교하게 할 때
지역 정보와 값 비교를 한 화면 흐름으로 연결할 때

Show which region is high on the map, then let viewers compare exact ranks.
Connect region information and value comparison in one screen flow.

과용 주의AvoidAVOID

지역 ID와 색을 전 구간 유지한다
재배치 중 라벨을 숨기지 않는다

분류TagsTAGS

좋은 예와 나쁜 예Good and bad use

좋은 사례GOOD

기울임 600ms, 높이 600ms, 재배치 900ms로 총 2100ms. 지역 ID가 유지되어 각 프리즘이 해당 막대로 이동한다

과용 · 나쁜 사례OVERUSE

지도에서 사라지고 막대 차트가 새로 나타나 어느 막대가 어느 지역인지 알 수 없다. 재배치 중 색이 바뀐다

파라미터Parameters

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

항목PARAM	기본DEFAULT	범위RANGE	메모NOTE
기울임	600ms	400~800ms	0→45도
높이	600ms	400~800ms	프리즘 솟음
재배치	900ms	700~1200ms	막대 기준선으로
이징	power3.inOut	power2.inOut

GSAP

tl.to(camera.rotation, { x: -Math.PI / 4, duration: 0.6, ease: 'power2.inOut' }, 0.3)
  .to(cells.map(c => c.mesh.scale), { y: (i) => cells[i].value, duration: 0.6, ease: 'power2.out' })
  .to(cells.map(c => c.mesh.position), { x: (i) => barX[i], z: 0, duration: 0.9, ease: 'power2.inOut' }, '+=0.1');

README

에이전트 프롬프트Agent prompts

그대로 붙여 넣는다Paste as is

Claude Code

<대상> 지도가 막대 차트가 되게 해줘. 0.3초부터 카메라를 0.6초 동안 45도 기울이고, 이어서 지역별 높이를 0.6초로 올린 뒤, 프리즘을 0.9초 동안 power2.inOut으로 막대 기준선의 정렬 위치로 옮겨. 지역 색은 끝까지 유지해.

Turn the map in <target> into a bar chart. From 0.3 seconds tilt the camera 45 degrees over 0.6s, then raise regional heights over 0.6s, then move the prisms to the bar baseline positions over 0.9s with power2.inOut. Keep each region's color to the end.

Codex

<파일>에 map to bar chart 전환을 구현해. 카메라 0.6s, 높이 0.6s, 재배치 0.9s(power2.inOut). 0.6초, 1.2초, 2.0초에 캡처해 각 프리즘이 같은 색으로 막대 위치로 이동하는지, 최종 막대 순서가 값 순서와 같은지 확인해.

Implement a map to bar chart transition in <file>: camera 0.6s, heights 0.6s, rearrange 0.9s (power2.inOut). Capture at 0.6s, 1.2s and 2.0s and verify each prism keeps its color while moving to a bar position and the final bar order matches value order.