2d:null 2e:["$","title",null,{"children":"🌱그래프레터.각 나라들이 선택한 전기에너지믹스를 비교해봤습니다. | Ssen Kim | Observable"}] 33:T102b,chart = { const { width, height, Ax, Ay, Bx, By, Cx, Cy, toXY } = ternary; const svg = d3.create("svg") .attr("width", width) .attr("height", height) .attr("viewBox", [0, 0, width, height]); // 삼각형 배경 svg.append("polygon") .attr("points", `${Ax},${Ay} ${Bx},${By} ${Cx},${Cy}`) .attr("fill", "#f0f2f8") .attr("stroke", "#ccc"); // 격자선 (10% 간격) const gridGroup = svg.append("g").attr("stroke", "#fff").attr("stroke-width", 1); for (let i = 1; i < 10; i++) { const t = i / 10; // renewable 고정선 (밑변에 평행) const p1 = [Bx + (Ax - Bx) * t, By + (Ay - By) * t]; const p2 = [Cx + (Ax - Cx) * t, Cy + (Ay - Cy) * t]; gridGroup.append("line").attr("x1", p1[0]).attr("y1", p1[1]).attr("x2", p2[0]).attr("y2", p2[1]); // fossil 고정선 (오른쪽 변에 평행) const p3 = [Ax + (Bx - Ax) * t, Ay + (By - Ay) * t]; const p4 = [Cx + (Bx - Cx) * t, Cy + (By - Cy) * t]; gridGroup.append("line").attr("x1", p3[0]).attr("y1", p3[1]).attr("x2", p4[0]).attr("y2", p4[1]); // nuclear 고정선 (왼쪽 변에 평행) const p5 = [Ax + (Cx - Ax) * t, Ay + (Cy - Ay) * t]; const p6 = [Bx + (Cx - Bx) * t, By + (Cy - By) * t]; gridGroup.append("line").attr("x1", p5[0]).attr("y1", p5[1]).attr("x2", p6[0]).attr("y2", p6[1]); } // 꼭짓점 라벨 svg.append("text").attr("x", Ax).attr("y", Ay - 15).attr("text-anchor", "middle").attr("font-weight", "bold").text("재생에너지"); svg.append("text").attr("x", Bx - 10).attr("y", By + 25).attr("text-anchor", "middle").attr("font-weight", "bold").text("화석"); svg.append("text").attr("x", Cx + 10).attr("y", Cy + 25).attr("text-anchor", "middle").attr("font-weight", "bold").text("원자력"); // 국가별 색상 + 궤적 const colors = { "South Korea": "#8B5CF6", "Germany": "#EF4444", "France": "#3B82F6", "Japan": "#10B981" }; const countries = [...new Set(data.map(d => d.country))]; // 툴팁 const tooltip = d3.select(document.body).append("div") .style("position", "absolute") .style("background", "rgba(0,0,0,0.8)") .style("color", "#fff") .style("padding", "6px 10px") .style("border-radius", "4px") .style("font-size", "12px") .style("pointer-events", "none") .style("opacity", 0); for (const country of countries) { const sub = data.filter(d => d.country === country); const points = sub.map(d => toXY(d.renewable, d.fossil, d.nuclear)); const line = d3.line().x(p => p[0]).y(p => p[1]); // 궤적 라인 svg.append("path") .datum(points) .attr("d", line) .attr("fill", "none") .attr("stroke", colors[country]) .attr("stroke-width", 2); // 마지막 점만 마커 const last = sub[sub.length - 1]; const [lx, ly] = toXY(last.renewable, last.fossil, last.nuclear); svg.append("circle") .attr("cx", lx).attr("cy", ly).attr("r", 6) .attr("fill", colors[country]); // hover용 투명 원 (전체 연도) sub.forEach((d, i) => { const [px, py] = points[i]; svg.append("circle") .attr("cx", px).attr("cy", py).attr("r", 6) .attr("fill", "transparent") .attr("stroke", "none") .style("cursor", "pointer") .on("mouseover", (event) => { tooltip.style("opacity", 1) .html(`${d.country} ${d.year}
재생: ${d.renewable.toFixed(1)}%
화석: ${d.fossil.toFixed(1)}%
원자력: ${d.nuclear.toFixed(1)}%`) .style("left", (event.pageX + 12) + "px") .style("top", (event.pageY - 20) + "px"); }) .on("mouseout", () => tooltip.style("opacity", 0)); }); } // 범례 const legend = svg.append("g").attr("transform", `translate(${width - 140}, 20)`); countries.forEach((c, i) => { legend.append("line") .attr("x1", 0).attr("x2", 20).attr("y1", i * 20).attr("y2", i * 20) .attr("stroke", colors[c]).attr("stroke-width", 2); legend.append("text") .attr("x", 26).attr("y", i * 20 + 4) .attr("font-size", "12px").text(c); }); return svg.node(); }34:T15e8,selectiveChart = { const { width, height, Ax, Ay, Bx, By, Cx, Cy, toXY } = ternary; const svg = d3.create("svg") .attr("width", width) .attr("height", height) .attr("viewBox", [0, 0, width, height]); // 줌 가능한 그룹 const zoomGroup = svg.append("g"); svg.call( d3.zoom() .scaleExtent([1, 8]) .on("zoom", (event) => { zoomGroup.attr("transform", event.transform); }) ); // 배경 삼각형 zoomGroup.append("polygon") .attr("points", `${Ax},${Ay} ${Bx},${By} ${Cx},${Cy}`) .attr("fill", "#f0f2f8") .attr("stroke", "#ccc"); // 격자선 const gridGroup = zoomGroup.append("g").attr("stroke", "#fff").attr("stroke-width", 1); for (let i = 1; i < 10; i++) { const t = i / 10; const p1 = [Bx + (Ax - Bx) * t, By + (Ay - By) * t]; const p2 = [Cx + (Ax - Cx) * t, Cy + (Ay - Cy) * t]; gridGroup.append("line").attr("x1", p1[0]).attr("y1", p1[1]).attr("x2", p2[0]).attr("y2", p2[1]); const p3 = [Ax + (Bx - Ax) * t, Ay + (By - Ay) * t]; const p4 = [Cx + (Bx - Cx) * t, Cy + (By - Cy) * t]; gridGroup.append("line").attr("x1", p3[0]).attr("y1", p3[1]).attr("x2", p4[0]).attr("y2", p4[1]); const p5 = [Ax + (Cx - Ax) * t, Ay + (Cy - Ay) * t]; const p6 = [Bx + (Cx - Bx) * t, By + (Cy - By) * t]; gridGroup.append("line").attr("x1", p5[0]).attr("y1", p5[1]).attr("x2", p6[0]).attr("y2", p6[1]); } // 꼭짓점 라벨 zoomGroup.append("text").attr("x", Ax).attr("y", Ay - 15).attr("text-anchor", "middle").attr("font-weight", "bold").text("재생에너지"); zoomGroup.append("text").attr("x", Bx - 10).attr("y", By + 25).attr("text-anchor", "middle").attr("font-weight", "bold").text("화석"); zoomGroup.append("text").attr("x", Cx + 10).attr("y", Cy + 25).attr("text-anchor", "middle").attr("font-weight", "bold").text("원자력"); const colors = { "South Korea": "#8B5CF6", "Germany": "#EF4444", "France": "#3B82F6", "Japan": "#10B981" }; const countries = [...new Set(data.map(d => d.country))]; const years = [...new Set(data.map(d => d.year))].sort((a, b) => a - b); const lineGen = d3.line().x(p => p[0]).y(p => p[1]); // 비선택 국가: 회색 고정 궤적 for (const country of countries) { if (country === selectedCountry) continue; const sub = data.filter(d => d.country === country); const points = sub.map(d => toXY(d.renewable, d.fossil, d.nuclear)); zoomGroup.append("path") .attr("d", lineGen(points)) .attr("fill", "none") .attr("stroke", "#ccc") .attr("stroke-width", 1.5); } // 선택 국가: 색상 + 애니메이션 const selPath = zoomGroup.append("path") .attr("fill", "none") .attr("stroke", colors[selectedCountry]) .attr("stroke-width", 3); const selDot = zoomGroup.append("circle") .attr("r", 7) .attr("fill", colors[selectedCountry]); const yearLabel = svg.append("text") .attr("x", width / 2).attr("y", height - 10) .attr("text-anchor", "middle") .attr("font-size", "20px") .attr("font-weight", "bold") .attr("fill", colors[selectedCountry]) .text(years[0]); // 범례 const legend = svg.append("g").attr("transform", `translate(${width - 140}, 20)`); countries.forEach((c, i) => { legend.append("line") .attr("x1", 0).attr("x2", 20).attr("y1", i * 20).attr("y2", i * 20) .attr("stroke", c === selectedCountry ? colors[c] : "#ccc") .attr("stroke-width", c === selectedCountry ? 3 : 1.5); legend.append("text") .attr("x", 26).attr("y", i * 20 + 4) .attr("font-size", "12px") .attr("font-weight", c === selectedCountry ? "bold" : "normal") .attr("fill", c === selectedCountry ? "#000" : "#999") .text(c); }); // 툴팁 요소 const tooltip = d3.select(document.body).append("div") .style("position", "absolute") .style("background", "rgba(0,0,0,0.85)") .style("color", "#fff") .style("padding", "6px 10px") .style("border-radius", "4px") .style("font-size", "12px") .style("pointer-events", "none") .style("opacity", 0); const selData = data.filter(d => d.country === selectedCountry); function addHoverPoints() { selData.forEach(d => { const [px, py] = toXY(d.renewable, d.fossil, d.nuclear); zoomGroup.append("circle") .attr("cx", px).attr("cy", py).attr("r", 6) .attr("fill", "transparent") .style("cursor", "pointer") .on("mouseover", (event) => { tooltip.style("opacity", 1) .html(`${selectedCountry} ${d.year}
재생: ${d.renewable.toFixed(1)}%
화석: ${d.fossil.toFixed(1)}%
원자력: ${d.nuclear.toFixed(1)}%`) .style("left", (event.pageX + 12) + "px") .style("top", (event.pageY - 20) + "px"); }) .on("mouseout", () => tooltip.style("opacity", 0)); }); } function render(frameIdx) { const currentYear = years[frameIdx]; yearLabel.text(currentYear); const sub = selData.filter(d => d.year <= currentYear); const points = sub.map(d => toXY(d.renewable, d.fossil, d.nuclear)); selPath.attr("d", lineGen(points)); if (points.length > 0) { const [lx, ly] = points[points.length - 1]; selDot.attr("cx", lx).attr("cy", ly); } } render(0); let frame = 0; const timer = d3.interval(() => { frame++; if (frame >= years.length) { timer.stop(); addHoverPoints(); return; } render(frame); }, 150); invalidation.then(() => { timer.stop(); tooltip.remove(); }); return svg.node(); } 35:T823,

독일은 네 개 국가 중 수직 방향의 움직임이 가장 두드러지는 나라입니다. 원자력에서 멀어져서 재생에너지까지 가는 길을 가장 직관적으로 보여주고 있네요. 현재는 재생 에너지로만 전기를 발생시키는 것은 부족한 상태라 다시 원자력 에너지를 늘리는 방향을 논의하고 있다고 합니다.

일본의 원자력은 후쿠시마 원자력 사건 때문에 중간지점에서 급하게 화석 에너지 방향으로 꺾이는 과정을 보여주고 있습니다. 상황이 크게 다르지 않기 때문에 다시 원자력에너지를 늘리는 방향으로 움직이고 있습니다.

프랑스는 다른 국가들과 확연히 다른 움직임을 보입니다. 정확히는 원자력 에너지의 영역에서 크게 벗어나지 않는 모습을 보이고 있습니다. 현재 폭염으로 인해 전기 사용량이 늘어날 것으로 예상됩니다만 낮은 냉방기기 도입으로 어느 정도의 영향을 끼칠 지는 더 지켜봐야겠습니다.

한국 그래프의 선을 보면 대부분 아랫변 방향을 주축으로 왼쪽과 오른쪽, 왔다갔다 하는 모습을 볼 수 있습니다. 정책과 대통령의 성향에 따라 크게 바뀌는 특징을 가지고 있죠. 최근에 새로운 원자력 발전소 부지 선정을 시작으로 다시 원자력 에너지의 영향력이 커질 것으로 예측됩니다.

36:T57c,

이 글이 유익하셨나요?

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

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

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

37:[] 31:{"id":"32dd0bb59c11d8aa","slug":"energy_ternary","title":"🌱그래프레터.각 나라들이 선택한 전기에너지믹스를 비교해봤습니다.","thumbnail":"3d2b2a938dfed26cf3a4195e619587e66bf462ff736914564664c03f90d9e889","access_level":"public","create_time":"$D2026-07-01T16:07:53.803Z","update_time":"$D2026-07-02T16:08:07.230Z","view_time":null,"first_public_time":"$D2026-07-01T16:07:53.803Z","has_unpublished_edits":null,"fork":{"id":"b334d25382073e88","slug":null,"title":"독일,일본,한국-각 나라가 선택한 에너지는?","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":116,"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":60,"value":"안녕하세요, 정보디자이너 쎈입니다.\n\n다음 주부터 한국에 장마가 시작된다고 합니다. \n
습하고 더운 날씨가 이어지면 자연스럽게 전기 사용량에 대한 관심도 늘어나겠죠. \n
최근 유럽을 덮친 폭염과 에어컨 수요 이슈도 이런 관심에 힘을 보태고 있고요.\n\n다만 이번 작업에서 주목한 건 에어컨 사용량 자체가 아니라,\n
**그 전기를 애초에 무엇으로 만들어내느냐는 질문**이었습니다.\n\n그리고 최근엔 여름철 냉방 수요를 넘어 AI 데이터센터의 상시 전력 수요까지 더해지면서,
이 질문이 계절성 이슈를 넘어서는 상황이 됐습니다.\n\n이 지점에서 국가별로 전력을 만드는 방식(**화석 · 원자력 · 재생에너지**)의 차이가 뚜렷하게 갈립니다.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":34,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":75,"value":"보고 계신 차트는 삼원 다이어그램(ternary diagram)이라고 하는 차트로, 세 개의 데이터의 합이 100인 경우 사용이 가능합니다. 즉 한 나라의 전기 에너지 발전 방법이 재생,화석,원자력 세가지 방법 중 어느 비중을 가장 높게 가져가는지를 비교할 수 있는거죠. \n\n
디테일하게 들어가면 조금 어려우니 우리는 이 정도만 기억합시다. 꼭지점에 가까워질 수록 해당 에너지 발전 방식이 전기를 가장 많이 만들어낸다고요. 그리고 가장 큰 점이 마지막 지점, 여기에서는 2025년을 나타내는 것을 기억해주시길 바랍니다.
국가별로 위치가 상당히 다르죠?","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":44,"value":"viewof selectedCountry = Inputs.radio(\n [\"South Korea\", \"Germany\", \"Japan\", \"France\"],\n { label: \"국가 선택\", value: \"South Korea\" }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":47,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":79,"value":"각 국가별 해설은 다음과 같습니다. \n\n
위의 국가 버튼을 누르면 그래프가 생겨나는데요, \n
좀 더 자세히 보고 싶으시면 마우스 스크롤로 그래프를 확대하거나 \n
클릭앤 드래그로 이동해 보세요. 원하는 만큼 확대할 수 있습니다.","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":81,"value":"$35","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":98,"value":"각 국가별로 중요하게 생각하는 가치와 효율의 의미는 다를 것입니다.
그 의미가 분명하게 드러나는게 에너지 정책일 거구요.
무엇이 맞고 틀리다 판단하기 전에 각 나라와 현재의 상황에 맞춰 최적의 선택이 어떤 것이 었는지를 비교해 보는데도 도움이 되었으면 합니다.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":104,"value":"

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

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

\n\n

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":112,"value":"$36","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":5,"value":"data = {\n const raw = await d3.csv(\"https://raw.githubusercontent.com/ssen0117/observable-data/refs/heads/main/owid-energy-data.csv\");\n return raw\n .filter(d => d.country && d.country.trim() !== \"\")\n .map(d => ({\n country: d.country,\n year: +d.year,\n renewable: +d.renewables_share_elec,\n fossil: +d.fossil_share_elec,\n nuclear: +d.nuclear_share_elec\n }))\n .sort((a, b) => a.country.localeCompare(b.country) || a.year - b.year);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":31,"value":"ternary = {\n // 삼각형 세 꼭짓점 픽셀 좌표\n const width = 600;\n const height = 560;\n const margin = 60;\n\n const Ax = width / 2, Ay = margin; // 위쪽 꼭짓점 (Renewable)\n const Bx = margin, By = height - margin; // 왼쪽 아래 (Fossil)\n const Cx = width - margin, Cy = height - margin; // 오른쪽 아래 (Nuclear)\n\n // a: renewable(0~100), b: fossil(0~100), c: nuclear(0~100), 합은 100\n function toXY(a, b, c) {\n const sum = a + b + c;\n const A = a / sum, B = b / sum, C = c / sum;\n const x = A * Ax + B * Bx + C * Cx;\n const y = A * Ay + B * By + C * Cy;\n return [x, y];\n }\n\n return { width, height, margin, Ax, Ay, Bx, By, Cx, Cy, toXY };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W37","stdlib":"1","titling":"auto"}} 32:"$31:body"