설명 / Description
연결 지도는 지리적 지점 사이에 선이나 호를 그려 위치 간에 관계, 경로, 또는 연결이 존재함을 보여줍니다. 선의 너비로 이동 규모를 강조하는 플로우 맵과 달리, 연결 지도는 네트워크의 위상 구조에 초점을 맞춥니다: 어떤 장소들이 연결되어 있는지, 각 장소가 몇 개의 연결을 갖는지, 연결성의 전체적인 공간 패턴이 어떤 모습인지를 보여줍니다. 대표적인 예로는 허브 공항에서 출발하는 모든 항공편을 보여주는 항공 노선 지도가 있습니다.
A connection map draws lines or arcs between geographic points to show that relationships, routes, or links exist between locations. Unlike a flow map, which emphasizes the magnitude of movement through line width, a connection map focuses on the topology of the network: which places are connected, how many connections each place has, and what the overall spatial pattern of connectivity looks like. The classic example is an airline route map showing all flights from a hub airport.
연결 지도는 네트워크 시각화와 지도 제작의 교차점에 위치합니다. 지리적 맥락을 활용해 추상적인 네트워크 구조에 의미를 부여합니다 — 뉴욕과 런던 사이의 항공 노선은 지도에서 볼 때와 노드-링크 다이어그램의 추상적인 엣지로 볼 때 서로 다른 의미를 갖습니다. 지리적 근거는 시청자가 거리, 지역적 군집, 연결 패턴의 공간적 논리를 이해하는 데 도움을 줍니다.
Connection maps occupy the intersection of network visualization and cartography. They leverage geographic context to give meaning to abstract network structure -- a flight route between New York and London means something different when seen on a map than when seen as an abstract edge in a node-link diagram. The geographic grounding helps viewers understand distances, regional clustering, and the spatial logic of connectivity patterns.
가장 큰 과제는 시각적 혼잡입니다. 수백 개의 연결을 가진 허브는 사방으로 선을 방사하고, 여러 허브가 겹치면 개별 연결을 가려버리는 밀집한 망이 만들어집니다. 이를 해결하는 전략으로는 인터랙티브 필터링(선택한 하나의 노드에 대한 연결만 표시), 엣지 번들링(공유된 통로를 따라 선을 라우팅), 불투명도 조절, 점진적 공개(그 순간 가장 강하거나 가장 관련성 높은 연결만 표시)가 있습니다.
The primary challenge is visual clutter. A hub with hundreds of connections radiates lines in every direction, and multiple hubs create a dense web that obscures individual connections. Strategies to address this include interactive filtering (show connections for one selected node), edge bundling (routing lines through shared corridors), opacity modulation, and progressive disclosure (showing only the strongest or most relevant connections at any time).
언제 사용하나 / When to Use
- 도시 간 항공 노선, 해상 항로, 통신 연결을 보여줄 때
- Showing airline routes, shipping lanes, or communication links between cities
- 네트워크의 지리적 구조(누가 누구와, 어디서 연결되어 있는지)를 시각화할 때
- Visualizing the geographic structure of a network (who is connected to whom, and where)
- 공간적 맥락에서 연결 허브와 주변부 노드를 강조할 때
- Highlighting connectivity hubs and peripheral nodes in spatial context
- 지역 간 네트워크 커버리지(잘 연결된 지역과 고립된 지역)를 비교할 때
- Comparing network coverage across regions (which areas are well-connected vs. isolated)
- 소셜 또는 비즈니스 네트워크에서 지리적 군집을 드러낼 때
- Revealing geographic clustering in social or business networks
이럴 땐 피하세요 / When NOT to Use
- 연결의 존재 여부보다 흐름의 양이 더 중요할 때 -- 너비로 인코딩된 선을 사용하는 플로우 맵을 사용하세요
- When the volume of flow matters more than the existence of connections -- use a flow map with width-encoded lines
- 의미 있는 지리적 차원이 없을 때 -- 네트워크 다이어그램이나 인접 행렬을 사용하세요
- When there is no meaningful geographic dimension -- use a network diagram or adjacency matrix
- 연결 수가 매우 많고(1,000개 초과) 필터링 기능이 없을 때 -- 지도가 읽을 수 없는 망이 됩니다
- When the number of connections is very large (>1,000) and filtering is not available -- the map becomes an unreadable web
- 정확한 경로가 중요할 때(예: 도로 내비게이션) -- 추상적인 호가 아니라 경로 안내 지도를 사용하세요
- When exact routes matter (e.g., road navigation) -- use a routing map, not abstract arcs
구조 / Anatomy
- 기본 지도: 세계, 국가, 또는 지역 경계를 보여주는 지리적 참조 레이어.
- Base map: Geographic reference layer (world, country, or regional boundaries).
- 노드: 지리적 위치(도시, 공항, 시설)의 지점으로, 흔히 연결 차수나 중요도에 따라 크기가 정해집니다.
- Nodes: Points at geographic locations (cities, airports, facilities), often sized by degree or importance.
- 연결선/호: 노드 쌍을 연결하는 선이나 곡선으로, 직선, 대권 호, 또는 번들 경로로 그려집니다.
- Connection lines/arcs: Lines or curves connecting pairs of nodes, drawn as straight lines, great-circle arcs, or bundled paths.
- 노드 레이블: 도시나 위치 이름으로, 직접 표시되거나 호버 시 표시됩니다.
- Node labels: City or location names, shown directly or on hover.
- 색상 인코딩: 유형(국내 대 국제), 클러스터, 또는 정량적 속성에 따라 선의 색이 정해집니다.
- Color encoding: Lines colored by type (domestic vs. international), by cluster, or by a quantitative attribute.
- 불투명도: 선의 겹침을 다루기 위해 적용되며, 겹침이 더 밀집한 영역은 자연스럽게 더 어둡게 보여 강도를 전달합니다.
- Opacity: Applied to lines to handle overlap; denser overlap areas naturally appear darker, conveying intensity.
변형 / Variations
- 대권 연결 지도: 호가 구면 위의 최단 경로를 따라가며, 곡선이 실제 지리적 관계를 드러냅니다.
- Great-circle connection map: Arcs follow the shortest path on a sphere, producing curved lines that reveal true geographic relationships.
- 허브 앤 스포크 지도: 항공 노선 표시처럼 하나 이상의 중앙 허브에서 연결이 방사됩니다.
- Hub-and-spoke map: Connections radiate from one or more central hubs, as in airline route displays.
- 엣지 번들 연결 지도: 선이 공유된 통로를 따라 라우팅되어 집계 패턴을 드러내고 혼잡을 줄입니다.
- Edge-bundled connection map: Lines are routed through shared corridors to reveal aggregate patterns and reduce clutter.
- 필터링된 연결 지도: 선택된 노드에 대한 연결이나 임계값을 충족하는 연결만 표시되어 밀집한 네트워크를 탐색 가능하게 만듭니다.
- Filtered connection map: Only connections for a selected node or meeting a threshold are shown, making dense networks navigable.
- 애니메이션 연결 지도: 연결이 순차적으로 나타나거나 맥동하여 네트워크의 시간적 변화를 보여줍니다.
- Animated connection map: Connections appear sequentially or pulse to show temporal evolution of the network.
코드 레퍼런스 / Code Reference
// D3 connection map with great-circle arcs
import * as d3 from "d3";
const projection = d3.geoNaturalEarth1().fitSize([width, height], world);
const path = d3.geoPath(projection);
const svg = d3.select("#chart").append("svg")
.attr("viewBox", [0, 0, width, height]);
// Base map
svg.append("path").datum(world).attr("d", path)
.attr("fill", "#f7f7f7").attr("stroke", "#ddd");
// Great-circle arcs
svg.selectAll(".connection").data(connections).join("path")
.attr("d", d => path({
type: "LineString",
coordinates: [[d.lon1, d.lat1], [d.lon2, d.lat2]]
}))
.attr("fill", "none")
.attr("stroke", "#6366f1")
.attr("stroke-opacity", 0.3)
.attr("stroke-width", 1);
// Nodes
svg.selectAll("circle").data(cities).join("circle")
.attr("cx", d => projection([d.lon, d.lat])[0])
.attr("cy", d => projection([d.lon, d.lat])[1])
.attr("r", d => Math.sqrt(d.connections) * 2)
.attr("fill", "#f59e0b");