* created at:2025-06-19
* edited at:2025-06-19
지도를 그릴 때 사용되지만, 지도를 직접 그려내지는 않는다.
d3-geo 자체는 어떤 구체적인 세계지도나 국가 경계선을 포함하고 있지 않으며, 외부의 지리정보 데이터를 받아 [경도, 위도] → [x, y] 좌표로 변환(투영)한다.
즉, d3-geo는 지리정보 데이터를 SVG/Canvas 위에 투영하기 위한 함수 모음으로, GeoJSON이나 TopoJSON 같은 지리정보 데이터를 화면에 시각화하기 위한 투영(projection)과 경로 생성(path generator, d3.geoPath) 기능을 제공한다.
const projection = d3.geoMercator().scale(100).translate([width / 2, height / 2]);
const pathGenerator = d3.geoPath().projection(projection);
svg.append("path").attr("d", pathGenerator(geojsonFeature));투영 (projection)
- d3-geo의 가장 핵심 기능으로, 투영은 곡면(지구)을 평면(2D 화면) 위에 펼치는 방법이다.
- d3-geo는 좌표 데이터를 받아 곡면(지구)을 평면(SVG/Canvas)에 어떻게 펼칠지를 정의한다.
geoMercator,geoOrthographic,geoEqualEarth등 다양한 투영 방식이 있다.- 각 방식은 왜곡을 어떻게 처리하느냐에 따라 다르게 지도 형태를 그린다.
| 항목 | 설명 |
|---|---|
| 면적 보존 | 지표의 실제 면적을 왜곡 없이 표현 |
| 거리 보존 | 두 점 간의 거리를 정확히 유지 |
| 각도 보존 | 방위나 형태(코너)를 정확히 유지 |
투영법 선택
- geoMercator() → 북극, 남극으로 갈수록 면적이 심하게 왜곡됨
- geoOrthographic() → 회전 가능한 지구본처럼 보이지만 전 세계를 한 화면에 담을 수 없음
- geoEqualEarth() → 아프리카나 남미의 실제 크기를 잘 반영, 면적이 중요한 데이터 표현에 적합
- geoEquirectangular() → d3.geoPath()의 기본 projection (단순 매핑, 왜곡 심함)
GeoJSON과 TopoJSON
- TopoJSON은 GeoJSON보다 훨씬 압축률이 좋고, 국경선 공유를 효율적으로 표현한다
- 때문에 D3와 함께 자주 쓰이며, topojson-client를 이용해 GeoJSON으로 변환한 후 d3-geo로 처리한다.
더 알아보기
- GeoJSON과 TopoJSON
- 각 투영법 비교 (Mercator vs Orthographic 등)
- d3.geoPath 내부 동작
- projection.fitSize(), fitExtent() 등의 자동 스케일링
- 투영법 커스터마이징 (예: center, rotate, clipAngle 등)
