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

지도 높이 돌출Map Extrusion

Map Extrusion

지도 높이 돌출

다른 이름Also known as · Extruded density map rise · 입체 밀도 지도 상승

309

렌더 추가 예정CLIP COMING지도 높이 돌출Map Extrusion정의·파라미터·프롬프트는 아래에 있다Definition, parameters and prompts are below

도판Fig. 309. 지도 높이 돌출 · Map Extrusion · power3.out

도시 구역이나 격자 셀이 바닥에서 솟아오르며 높이로 밀도를 나타낸다City districts or grid cells rise from the ground with height showing density.

무엇을 전하나What it tells

전달 효과ConveysCONVEYS

지리적 위치와 수치의 큰 차이를 입체로 한눈에 느끼게 한다. 어디가 높은지 바로 보인다Lets viewers feel geographic position and large differences in value at a glance in 3D.

언제 쓰나Use whenUSE WHEN

인구, 매출, 밀도를 지역별 높이로 보여 줄 때
전과 후의 값 변화를 높이 변화로 비교할 때

Show population, sales or density by region as height.
Compare before and after values as changes in height.

과용 주의AvoidAVOID

높이 배율은 뒤 구역이 가려지지 않게 조정
색이 높이와 같은 정보를 이중 부호화하도록 맞춘다

분류TagsTAGS

좋은 예와 나쁜 예Good and bad use

좋은 사례GOOD

1200ms 동안 각 구역이 cubicOut으로 바닥에서 값에 비례한 높이까지 솟는다. 카메라는 45도로 기울어 있고 높이 배율 1

과용 · 나쁜 사례OVERUSE

높이 배율을 3으로 올려 앞쪽 구역이 뒤쪽을 가리고, 모든 구역이 동시에 같은 속도로 올라 순위가 안 보인다

파라미터Parameters

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

항목PARAM	기본DEFAULT	범위RANGE	메모NOTE
지속	1200ms	900~1600ms
높이 배율	1	0.6~1.5	값→px
카메라 기울기	45도	35~60도
구역 stagger	30ms	20~50ms	값 큰 구역부터

GSAP

cells.forEach((c, i) => tl.fromTo(c.mesh.scale, { y: 0.001 }, { y: c.value * 1, duration: 1.2, ease: 'power3.out' }, 0.3 + i * 0.03));
gsap.set(camera.rotation, { x: -Math.PI / 4 });

README

에이전트 프롬프트Agent prompts

그대로 붙여 넣는다Paste as is

Claude Code

<대상> 지도에서 구역별로 값에 비례하는 높이가 솟게 해줘. WebGL 메시의 scale.y를 0.001에서 값*1까지 1.2초 동안 power3.out으로 올리고, 구역마다 30ms 간격으로 값이 큰 구역부터 시작해. 카메라는 45도 기울여 고정.

On the map in <target>, raise each district to a height proportional to its value. Tween the mesh scale.y from 0.001 to value*1 over 1.2 seconds with power3.out, staggering 30ms per district with the largest values first. Keep the camera fixed tilted at 45 degrees.

Codex

<파일>에 map extrusion을 구현해. scale.y 0.001→value*1, 1.2s, power3.out, stagger 0.03s 큰 값 우선, 카메라 rotation.x -45도 고정. 0.5초, 1.0초, 1.7초를 캡처해 순서대로 솟는지, 최종 높이 순서가 데이터 순위와 같은지 확인해.

Implement map extrusion in <file>: scale.y 0.001 to value*1, 1.2s, power3.out, stagger 0.03s with largest first, camera rotation.x fixed at -45 degrees. Capture at 0.5s, 1.0s and 1.7s and verify the districts rise in order and the final height ranking matches the data ranking.