2d:null 2e:["$","title",null,{"children":"🌱그래프레터. 서울과 다른 지역의 실제 거리는? | Ssen Kim | Observable"}] 33:T1dc9,{ // === 캔버스 설정 === const width = 700; const height = 700; const cx = width / 2; const cy = height / 2; const margin = 60; const maxRadius = cx - margin; // === 노선별 색상 === // 각 노선을 구분하는 색상 매핑 const lineColors = { "9호선,신분당선": "#F59E0B", // 주황 (9호선 대표색 계열) "신분당선": "#EF4444", // 빨강 (신분당선 대표색) "서해선": "#10B981", // 초록 "수인분당선": "#F59E0B", // 주황 (수인분당선) "5호선": "#8B5CF6", // 보라 (5호선 계열) "GTX-A": "#3B82F6", // 파랑 "GTX-A,경강선": "#3B82F6", // 파랑 (GTX-A 주 역할) "8호선": "#EC4899", // 핑크 }; // === 컨테이너 === const container = d3.create("div") .style("display", "flex") .style("flex-direction", "column") .style("align-items", "center"); // === 토글 버튼 === const button = container.append("button") .text("▶ 소요시간(분) 기준으로 전환") .style("font-family", "Pretendard, sans-serif") .style("font-size", "14px") .style("padding", "8px 16px") .style("margin-bottom", "12px") .style("cursor", "pointer") .style("border", "1px solid #ccc") .style("border-radius", "6px") .style("background", "#fff"); // === SVG 생성 === const svg = container.append("svg") .attr("viewBox", [0, 0, width, height]) .attr("width", width) .attr("height", height) .style("font-family", "Pretendard, sans-serif") .style("background", "#fafafa"); // === 상태 관리 === let isDistance = true; // === 동심원 그룹 === const ringGroup = svg.append("g"); const titleText = svg.append("text") .attr("x", cx).attr("y", 25) .attr("text-anchor", "middle") .attr("fill", "#333") .attr("font-size", 16) .attr("font-weight", "bold"); // === 방위 표시 (고정) === const directions = ["북", "북동", "동", "남동", "남", "남서", "서", "북서"]; directions.forEach((dir, i) => { const angle = (i * 45 - 90) * (Math.PI / 180); svg.append("text") .attr("x", cx + Math.cos(angle) * (maxRadius + 25)) .attr("y", cy + Math.sin(angle) * (maxRadius + 25)) .text(dir) .attr("text-anchor", "middle") .attr("dominant-baseline", "middle") .attr("fill", "#aaa") .attr("font-size", 12); }); // === 중심점 강남역 (고정) === svg.append("circle").attr("cx", cx).attr("cy", cy).attr("r", 5).attr("fill", "#e74c3c"); svg.append("text").attr("x", cx + 10).attr("y", cy + 4).text("강남역") .attr("fill", "#e74c3c").attr("font-size", 13).attr("font-weight", "bold"); // === 고스트 점 (직선거리 원래 위치를 회색으로 남김) === // 소요시간 모드일 때 "원래는 여기 있었다"를 보여줌 const ghosts = []; data.forEach(d => { const angleRad = (d.방위각 - 90) * (Math.PI / 180); const distR = (d.직선거리 / 35) * maxRadius; const ghostDot = svg.append("circle") .attr("cx", cx + Math.cos(angleRad) * distR) .attr("cy", cy + Math.sin(angleRad) * distR) .attr("r", 4) .attr("fill", "#ccc") .attr("opacity", 0); // 처음엔 숨김 const ghostLabel = svg.append("text") .attr("x", cx + Math.cos(angleRad) * distR + 8) .attr("y", cy + Math.sin(angleRad) * distR + 4) .text(d.출발역) .attr("fill", "#ccc") .attr("font-size", 10) .attr("opacity", 0); // 처음엔 숨김 ghosts.push({dot: ghostDot, label: ghostLabel}); }); // === 실제 점 + 라벨 (노선 색상 적용) === const dots = []; const labels = []; data.forEach(d => { const color = lineColors[d.노선] || "#999"; const dot = svg.append("circle") .attr("r", 6) .attr("fill", color) .attr("stroke", "#fff") .attr("stroke-width", 1.5); const label = svg.append("text") .text(d.출발역) .attr("fill", "#333") .attr("font-size", 11) .attr("font-weight", "bold"); dots.push({el: dot, data: d}); labels.push({el: label, data: d}); }); // === 범례 === const legendData = [ ["9호선", "#F59E0B"], ["신분당선", "#EF4444"], ["서해선", "#10B981"], ["수인분당선", "#F59E0B"], ["5호선", "#8B5CF6"], ["GTX-A", "#3B82F6"], ["8호선", "#EC4899"], ]; // 중복 색상 제거한 범례 const uniqueLegend = [ ["9호선/수인분당선", "#F59E0B"], ["신분당선", "#EF4444"], ["서해선", "#10B981"], ["5호선", "#8B5CF6"], ["GTX-A", "#3B82F6"], ["8호선", "#EC4899"], ]; uniqueLegend.forEach(([name, color], i) => { const lx = 20; const ly = height - 20 - (uniqueLegend.length - 1 - i) * 20; svg.append("circle") .attr("cx", lx).attr("cy", ly).attr("r", 5).attr("fill", color); svg.append("text") .attr("x", lx + 12).attr("y", ly + 4) .text(name) .attr("fill", "#555").attr("font-size", 11); }); // === 동심원 그리기 === function drawRings() { ringGroup.selectAll("*").remove(); const ringCount = 7; const ringStep = isDistance ? 5 : 10; const unit = isDistance ? "km" : "분"; for (let i = 1; i <= ringCount; i++) { const r = (i / ringCount) * maxRadius; ringGroup.append("circle") .attr("cx", cx).attr("cy", cy).attr("r", r) .attr("fill", "none").attr("stroke", "#ddd").attr("stroke-width", 1); ringGroup.append("text") .attr("x", cx + 4).attr("y", cy - r + 14) .text(`${i * ringStep}${unit}`) .attr("fill", "#999").attr("font-size", 11); } } // === 위치 업데이트 (애니메이션) === function updatePositions() { const ringCount = 7; const ringStep = isDistance ? 5 : 10; const maxValue = ringCount * ringStep; // 고스트 점 표시/숨김 // 소요시간 모드일 때만 직선거리 원래 위치를 회색으로 보여줌 ghosts.forEach(({dot, label}) => { dot.transition().duration(600) .attr("opacity", isDistance ? 0 : 0.5); label.transition().duration(600) .attr("opacity", isDistance ? 0 : 0.4); }); // 실제 점 이동 dots.forEach(({el, data: d}) => { const angleRad = (d.방위각 - 90) * (Math.PI / 180); const rawValue = isDistance ? d.직선거리 : parseInt(d.소요시간); const r = (rawValue / maxValue) * maxRadius; el.transition() .duration(1000) .ease(d3.easeCubicInOut) .attr("cx", cx + Math.cos(angleRad) * r) .attr("cy", cy + Math.sin(angleRad) * r); }); // 라벨 이동 labels.forEach(({el, data: d}) => { const angleRad = (d.방위각 - 90) * (Math.PI / 180); const rawValue = isDistance ? d.직선거리 : parseInt(d.소요시간); const r = (rawValue / maxValue) * maxRadius; el.transition() .duration(1000) .ease(d3.easeCubicInOut) .attr("x", cx + Math.cos(angleRad) * r + 8) .attr("y", cy + Math.sin(angleRad) * r + 4); }); titleText.text(`강남역 기준 수도권 시간 지도 — ${isDistance ? "직선거리" : "소요시간"} 기준`); } // === 버튼 클릭 === button.on("click", () => { isDistance = !isDistance; button.text(isDistance ? "▶ 소요시간(분) 기준으로 전환" : "▶ 직선거리(km) 기준으로 전환"); drawRings(); updatePositions(); }); // === 초기 렌더링 === drawRings(); updatePositions(); return container.node(); }34:T584,html`

이 글이 유익하셨나요?

데이터 시각화와 정보디자인에 관심 있는 분들에게 공유해주세요!

이 글 공유하기 뉴스레터 구독하기

매주 데이터 시각화 이야기를 전해드립니다 ✉️

`35:[] 31:{"id":"55240b75fedccbc8","slug":"seoul_timediagram","title":"🌱그래프레터. 서울과 다른 지역의 실제 거리는?","thumbnail":"eb7f17703052c1d3dd3209bfbbed961a828810d9264cce6f48514ac974504335","access_level":"public","create_time":"$D2026-06-04T07:03:57.753Z","update_time":"$D2026-06-04T08:26:31.327Z","view_time":null,"first_public_time":"$D2026-06-04T07:03:57.753Z","has_unpublished_edits":null,"fork":{"id":"4cbb851c5fbb567e","slug":null,"title":"260524_time cartogram","owner":{"id":"ca32d02dd4fd9da1","login":"ssen0117","name":"Ssen Kim"}},"stars":0,"starred":false,"owner":{"type":"team","id":"ca32d02dd4fd9da1","login":"ssen0117","name":"Ssen Kim","avatar_url":"https://avatars-next.observableusercontent.com/acfa6bf30847029913fca8c84b4fea2653ded376d0d91ef7944bb954a0c4fbef","tier":"starter_2024"},"version":81,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"388e6ba669af2a7d","login":"ssen0117","name":"Ssen Kim","avatar_url":"https://avatars-next.observableusercontent.com/acfa6bf30847029913fca8c84b4fea2653ded376d0d91ef7944bb954a0c4fbef","tier":null}],"members":[{"type":"individual","id":"388e6ba669af2a7d","login":"ssen0117","name":"Ssen Kim","avatar_url":"https://avatars-next.observableusercontent.com/acfa6bf30847029913fca8c84b4fea2653ded376d0d91ef7944bb954a0c4fbef","tier":null,"role":"editor"},{"type":"team","id":"ca32d02dd4fd9da1","login":"ssen0117","name":"Ssen Kim","avatar_url":"https://avatars-next.observableusercontent.com/acfa6bf30847029913fca8c84b4fea2653ded376d0d91ef7944bb954a0c4fbef","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"🌱그래프레터. 서울과 다른 지역의 실제 거리는?","cells":[{"id":0,"value":"# 🌱그래프레터. 서울과 다른 지역의
실제 거리는?","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":21,"value":"html`

안녕하세요, 정보디자이너 쎈입니다.

오늘은 지하철과 관련된 간단한 데이터를 가지고 왔습니다.

해가 바뀔 때마다 새로운 지하철 계획이나 지하철 뉴스를 듣고 있는데요.

문득 예전에는 멀게만 느껴졌던 지역이
그래도 지금은 지하철 타고 갈 수는 있는 곳이 되어간다는 걸 깨달았어요.

지하철 하나가 생기기 때문에 거리가 더 가까워진다는 느낌에
실제 거리들과 시간 사이에 차이가 생기는 것 같더군요.

강남역을 중심으로 주요 지점들은
직선거리로만 두면 아래처럼 놓이게 되는데요.

예를 들어 북동쪽의 미사와 하남검단산, 남동쪽의 판교·정자는
직선거리 기준으로는 비슷한 원 안에 있게 되는거죠.

여기에서 조금 변경을 해볼까요.
▶ 소요시간(분) 기준으로 전환을 한 번 눌러보시겠어요?

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":27,"value":"html`

소요시간(분)으로 항목이 바뀌면 거리 기준의 위치는 회색으로 바뀌고
원래의 점들이 이동하는 걸 볼 수 있습니다.

아까 기준으로 설명했던 미사와 하남검단산, 판교와 정자를 보죠.

신기하게도 판교와 정자는 나란히 강남역 쪽으로 끌려간 한편,

미사와 하남검단산은 오히려 밖으로 밀려났습니다.

지하철 시간으로 거리를 계산하는 사람이 봤다면

지도 상으로 강남역에서 미사와 하남검단산은
실제 거리보다 조금 더 먼 곳으로 그려졌을 거예요.

남동쪽의 지역들은 아무리 멀어도 강남역 쪽으로 한창 끌려들어왔을 거고요.

아마 도시는 이렇게 확장하는게 아닐까? 라는 생각이 들었습니다.

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":39,"value":"html`

데이터 수집과정과 분석 내용이 궁금하신 분들은
아래의 영상에서도 확인할 수 있습니다.

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":34,"value":"

\n\n

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":41,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"data = d3.csv(\"https://gist.githubusercontent.com/ssen0117/e2e9993d3754b97bb6368cc03c1fefd2/raw/8ebce1cd0c9de0c6e935206dcea1160f687de772/260524_naver_gangnam_travel_time.csv\", d3.autoType)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":45,"value":"html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W35","stdlib":"1","titling":"auto"}} 32:"$31:body"