25:["$","title",null,{"children":"점 지도 만들기 | Yonhap News Agency | Observable"}] 4b:T5be3, { // Observable Notebook 2.0 // Equal Earth + 중심 경도 + 국가 자동 중심 const d3 = await import("npm:d3@7"); const topojson = await import("npm:topojson-client@3"); const topo = await d3.json( "https://cdn.jsdelivr.net/npm/world-atlas@2/countries-50m.json" ); if (!topo) { throw new Error("지도 데이터를 불러오지 못했습니다."); } const land = topojson.feature(topo, topo.objects.land); const countries = topojson.feature( topo, topo.objects.countries ).features .filter(d => d.properties?.name) .sort((a, b) => a.properties.name.localeCompare(b.properties.name) ); const regions = { europe: { name: "유럽", box: [-26, 45, 33, 73], lon: 15 }, asia: { name: "아시아", box: [26, 180, -12, 82], lon: 105 }, africa: { name: "아프리카", box: [-19, 53, -36, 39], lon: 20 }, nAmerica: { name: "북아메리카", box: [-170, -50, 5, 85], lon: -105 }, sAmerica: { name: "남아메리카", box: [-83, -33, -57, 15], lon: -60 }, oceania: { name: "오세아니아", box: [105, 180, -50, 0], lon: 145 } }; // ────────────────────────── // 1. UI 생성 // ────────────────────────── const root = document.createElement("div"); root.className = "wid-app"; root.innerHTML = `

지도 생성 중…

`; // ────────────────────────── // 2. 설정값과 선택 메뉴 // ────────────────────────── const get = key => root.querySelector(`[data-key="${key}"]`); const wrap = key => root.querySelector(`[data-wrap="${key}"]`); const out = key => root.querySelector(`[data-out="${key}"]`); const host = root.querySelector("[data-map]"); const status = root.querySelector("[data-status]"); for (const [key, item] of Object.entries(regions)) { get("region").add( new Option(item.name, key) ); } for (const item of countries) { get("country").add( new Option( item.properties.name, String(item.id) ) ); } // 초기 선택 국가: 대한민국 const korea = countries.find(d => /South Korea|Republic of Korea/.test( d.properties.name ) ); if (korea) { get("country").value = String(korea.id); } // ────────────────────────── // 3. 중심 경도 제어 // ────────────────────────── function normalizeLon(value) { let lon = ((value + 180) % 360 + 360) % 360 - 180; if (lon === -180 && value > 0) lon = 180; return Math.round(lon * 10) / 10; } function setCenterLon(value) { const lon = normalizeLon(value); get("centerRange").value = String(lon); get("centerNumber").value = String(lon); out("centerLon").textContent = `${lon.toFixed(1)}°`; } // 선택 국가의 지리적 중심 경도를 자동 설정 function centerOnCountry() { const country = countries.find( d => String(d.id) === get("country").value ); if (!country) return; const centroid = d3.geoCentroid(country); const lon = centroid[0]; if (Number.isFinite(lon)) { setCenterLon(lon); } } // ────────────────────────── // 4. 지역별 지리적 범위 // ────────────────────────── function makeFrame(box) { const [west, east, south, north] = box; const coordinates = []; for (let i = 0; i <= 30; i++) { const t = i / 30; coordinates.push([ west + (east - west) * t, south ]); coordinates.push([ west + (east - west) * t, north ]); coordinates.push([ west, south + (north - south) * t ]); coordinates.push([ east, south + (north - south) * t ]); } return { type: "MultiPoint", coordinates }; } // ────────────────────────── // 5. 지도 생성 // ────────────────────────── function draw() { const scope = get("scope").value; wrap("region").style.display = scope === "region" ? "block" : "none"; wrap("country").style.display = scope === "country" ? "block" : "none"; const width = +get("width").value; const height = width / 2; const padding = +get("padding").value; const spacing = +get("spacing").value; const radius = +get("radius").value; const shape = get("shape").value; const color = get("dotColor").value; const bgColor = get("bgColor").value; const transparent = get("transparent").checked; const centerLon = +get("centerRange").value; const projectionType = get("projection").value; out("padding").textContent = padding; out("spacing").textContent = spacing; out("radius").textContent = radius; // ────────────────────────── // 5-1. 투영법 선택 // ────────────────────────── let projection; if (projectionType === "natural") { projection = d3.geoNaturalEarth1(); } else if (projectionType === "equalearth") { projection = d3.geoEqualEarth(); } else if (projectionType === "mercator") { projection = d3.geoMercator(); } else { projection = d3.geoEquirectangular(); } // 중심 경도 적용 // 경도를 음수 방향으로 회전시켜 중앙 배치 projection.rotate([-centerLon, 0, 0]); // ────────────────────────── // 5-2. 지도 표시 범위 // ────────────────────────── let geometry = land; // 세계지도는 구체 전체를 기준으로 크기 조절 let fitGeometry = { type: "Sphere" }; if (scope === "region") { const selectedRegion = regions[get("region").value]; fitGeometry = makeFrame( selectedRegion.box ); } else if (scope === "country") { const selectedCountry = countries.find( d => String(d.id) === get("country").value ); if (selectedCountry) { geometry = selectedCountry; fitGeometry = selectedCountry; } } // 선택 국가/지역의 화면 내 자동 크기 조절 projection.fitExtent( [ [padding, padding], [width - padding, height - padding] ], fitGeometry ); // ────────────────────────── // 5-3. 육지 마스크 생성 // ────────────────────────── const mask = document.createElement("canvas"); mask.width = width; mask.height = height; const ctx = mask.getContext("2d", { willReadFrequently: true }); ctx.clearRect(0, 0, width, height); ctx.beginPath(); ctx.fillStyle = "#000000"; d3.geoPath(projection, ctx)(geometry); ctx.fill("evenodd"); const pixels = ctx.getImageData( 0, 0, width, height ).data; // ────────────────────────── // 5-4. 육지에 해당하는 점만 생성 // ────────────────────────── const points = []; // 육각형은 행마다 반 칸씩 엇갈리는 벌집 배열 const isHex = shape === "hexagon"; const rowStep = isHex ? spacing * Math.sqrt(3) / 2 : spacing; let rowIndex = 0; for ( let y = spacing / 2; y < height; y += rowStep, rowIndex++ ) { const offset = isHex && rowIndex % 2 === 1 ? spacing / 2 : 0; for ( let x = spacing / 2 + offset; x < width; x += spacing ) { const pixelIndex = (Math.floor(y) * width + Math.floor(x)) * 4; if (pixels[pixelIndex + 3] > 127) { points.push([x, y]); } } } // ────────────────────────── // 5-5. SVG 생성 // ────────────────────────── const svg = d3.create("svg") .attr( "xmlns", "http://www.w3.org/2000/svg" ) .attr("width", width) .attr("height", height) .attr( "viewBox", `0 0 ${width} ${height}` ); if (!transparent) { svg.append("rect") .attr("width", width) .attr("height", height) .attr("fill", bgColor); } const group = svg.append("g") .attr("fill", color); // 원형 if (shape === "circle") { group.selectAll("circle") .data(points) .join("circle") .attr("cx", d => d[0]) .attr("cy", d => d[1]) .attr("r", radius); // 사각형 } else if (shape === "square") { group.selectAll("rect") .data(points) .join("rect") .attr("x", d => d[0] - radius) .attr("y", d => d[1] - radius) .attr("width", radius * 2) .attr("height", radius * 2); // 육각형 - 벌집형 배열 } else { // 육각형이 서로 맞물리도록 // 점 간격에 맞춰 반지름 자동 계산 const hexRadius = radius; out("radius").textContent = hexRadius.toFixed(1); group.selectAll("polygon") .data(points) .join("polygon") .attr("points", d => { return d3.range(6).map(i => { const angle = Math.PI * i / 3 - Math.PI / 6; const x = d[0] + hexRadius * Math.cos(angle); const y = d[1] + hexRadius * Math.sin(angle); return `${x.toFixed(2)},${y.toFixed(2)}`; }).join(" "); }); } host.replaceChildren(svg.node()); status.textContent = `${width} × ${height}px · ` + `중심 경도 ${centerLon}° · ` + `점 ${points.length.toLocaleString("ko-KR")}개`; } // ────────────────────────── // 6. 컨트롤 이벤트 연결 // ────────────────────────── let scheduled = 0; function redraw() { cancelAnimationFrame(scheduled); scheduled = requestAnimationFrame(draw); } // 국가·지역 선택 시 중심 경도 자동 변경 for ( const control of root.querySelectorAll("select, input") ) { const key = control.dataset.key; if (key === "centerNumber") continue; control.addEventListener("input", () => { if (key === "centerRange") { // 슬라이더 직접 조절 setCenterLon(+control.value); } else if (key === "scope") { // 지도 범위를 국가로 변경했을 때 if (control.value === "country") { centerOnCountry(); } // 지역으로 변경했을 때 if (control.value === "region") { const region = regions[get("region").value]; setCenterLon(region.lon); } } else if ( key === "country" && get("scope").value === "country" ) { // 다른 국가를 선택하면 중심 경도 재계산 centerOnCountry(); } else if ( key === "region" && get("scope").value === "region" ) { const region = regions[control.value]; setCenterLon(region.lon); } redraw(); }); } // 중심 경도 숫자 직접 입력 get("centerNumber").addEventListener( "change", () => { const input = get("centerNumber"); const value = Number(input.value); if ( input.value.trim() !== "" && Number.isFinite(value) ) { const lon = Math.max( -180, Math.min(180, value) ); setCenterLon(lon); } else { setCenterLon( +get("centerRange").value ); } redraw(); } ); // ────────────────────────── // 7. 다운로드 // ────────────────────────── function download(blob, filename) { const url = URL.createObjectURL(blob); const a = document.createElement("a"); a.href = url; a.download = filename; document.body.append(a); a.click(); a.remove(); setTimeout( () => URL.revokeObjectURL(url), 1500 ); } function svgText() { return new XMLSerializer().serializeToString( host.querySelector("svg") ); } // SVG root.querySelector('[data-action="svg"]') .addEventListener("click", () => { download( new Blob( [svgText()], { type: "image/svg+xml;charset=utf-8" } ), "dotted-world.svg" ); }); // PNG 2배 해상도 root.querySelector('[data-action="png"]') .addEventListener("click", () => { const svg = host.querySelector("svg"); const canvas = document.createElement("canvas"); canvas.width = +svg.getAttribute("width") * 2; canvas.height = +svg.getAttribute("height") * 2; const url = URL.createObjectURL( new Blob( [svgText()], { type: "image/svg+xml;charset=utf-8" } ) ); const img = new Image(); img.onload = () => { canvas.getContext("2d").drawImage( img, 0, 0, canvas.width, canvas.height ); URL.revokeObjectURL(url); canvas.toBlob(blob => { if (blob) { download( blob, "dotted-world-2x.png" ); } }, "image/png"); }; img.onerror = () => { URL.revokeObjectURL(url); status.textContent = "PNG 변환에 실패했습니다."; }; img.src = url; }); // ────────────────────────── // 8. 전체 화면 // ────────────────────────── root.querySelector('[data-action="fullscreen"]') .addEventListener("click", async () => { try { if (document.fullscreenElement === root) { await document.exitFullscreen(); } else if (root.requestFullscreen) { await root.requestFullscreen(); } } catch (error) { status.textContent = "현재 환경에서는 전체 화면이 제한됩니다."; } }); // ────────────────────────── // 9. 초기화 // ────────────────────────── root.querySelector('[data-action="reset"]') .addEventListener("click", () => { const defaults = { scope: "world", region: "europe", projection: "natural", width: "1200", padding: "25", spacing: "8", radius: "2", shape: "circle", dotColor: "#303d50", bgColor: "#ffffff" }; for (const [key, value] of Object.entries(defaults)) { get(key).value = value; } get("transparent").checked = false; setCenterLon(0); redraw(); }); // ────────────────────────── // 10. 최초 실행 // ────────────────────────── setCenterLon(0); draw(); display(root); } 4c:[] 47:{"id":"227af4813e4a8c66","slug":"dot_map","title":"점 지도 만들기","thumbnail":"4503678ae7a5155d446d252c64c6209cc99f7bc613a9cff5d5e200e141749bb7","access_level":"public","create_time":"$D2026-11-04T01:52:51.667Z","update_time":"$D2026-11-04T04:41:02.488Z","view_time":null,"first_public_time":"$D2026-11-04T02:12:43.619Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"d8ebc8c60ad27795","login":"yonhap-news-agency","name":"Yonhap News Agency","avatar_url":"https://avatars-next.observableusercontent.com/369b20cd46ba9bc9fb5e095f0b7e05281508516cb27407118ac78306b754cddc","tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":18,"publish_version":18,"role":null,"authored":false,"authors":[{"type":"individual","id":"c855b2a8717aa4f4","login":"minji-kim3","name":"Minji Kim","avatar_url":"https://avatars-next.observableusercontent.com/5f70ad0d7e3bbc39eac149229ad0ec2c652146a94c39aa0e795d5fe81bf6ca0b","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"team","id":"d8ebc8c60ad27795","login":"yonhap-news-agency","name":"Yonhap News Agency","avatar_url":"https://avatars-next.observableusercontent.com/369b20cd46ba9bc9fb5e095f0b7e05281508516cb27407118ac78306b754cddc","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"점 지도 만들기","cells":[{"id":1,"value":"# 점 지도 만들기","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":"$4b","pinned":false,"hidden":true,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4c","stdlib":"2"}} 24:null