2b:null 2c:["$","title",null,{"children":"독일,일본,한국-각 나라가 선택한 에너지는? | Ssen Kim | Observable"}] 31: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(); }32:Tf4c,animatedChart = { playButton; // 버튼 클릭 시 이 셀 재실행되도록 참조 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"); // 격자선 (기존 셀 4와 동일) const gridGroup = svg.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]); } 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 years = [...new Set(data.map(d => d.year))].sort((a, b) => a - b); // 연도 표시 텍스트 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", "#333") .text(years[0]); // 국가별 path와 이동 점 초기화 const lineGen = d3.line().x(p => p[0]).y(p => p[1]); const paths = {}; const dots = {}; for (const country of countries) { paths[country] = svg.append("path") .attr("fill", "none") .attr("stroke", colors[country]) .attr("stroke-width", 2.5); dots[country] = svg.append("circle") .attr("r", 6) .attr("fill", colors[country]); } // 범례 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); }); // 애니메이션 루프 let frame = 0; const totalFrames = years.length; function render(frameIdx) { const currentYear = years[frameIdx]; yearLabel.text(currentYear); for (const country of countries) { const sub = data.filter(d => d.country === country && d.year <= currentYear); const points = sub.map(d => toXY(d.renewable, d.fossil, d.nuclear)); paths[country].attr("d", lineGen(points)); if (points.length > 0) { const [lx, ly] = points[points.length - 1]; dots[country].attr("cx", lx).attr("cy", ly); } } } render(0); const timer = d3.interval(() => { frame++; if (frame >= totalFrames) { timer.stop(); return; } render(frame); }, 150); // 프레임당 150ms, 총 41프레임 = 약 6초 invalidation.then(() => timer.stop()); return svg.node(); }33: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(); } 34:[] 2f:{"id":"b334d25382073e88","slug":null,"title":"독일,일본,한국-각 나라가 선택한 에너지는?","thumbnail":"a51be02657cb43031e84a32fb06a6dc8b2cb45b9bb30d4c23043202d79204861","access_level":"public","create_time":"$D2026-07-01T14:59:32.834Z","update_time":"$D2026-07-01T15:58:40.220Z","view_time":null,"first_public_time":"$D2026-07-01T16:07:45.800Z","has_unpublished_edits":null,"fork":false,"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":55,"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":"viewer"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"title":"독일,일본,한국-각 나라가 선택한 에너지는?","cells":[{"id":0,"value":"# 독일,일본,한국-각 나라가 선택한 에너지는?","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":34,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":37,"value":"viewof playButton = Inputs.button(\"애니메이션 재생\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":40,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","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":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","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":"$W34","stdlib":"1","titling":"auto"}} 30:"$2f:body"