2e:null 2f:["$","title",null,{"children":"대나무숲:미투표자를 위한 나라는 없다 | Humble Data Miner | Observable"}] 34:T54b,{ const p_txts = seq_list.map((s,si)=> kr_typing_seq(`${s}대 ${(data[si][0].vp*100).toFixed(1)}% 당선에 미투표자 ${(data[si][data[si].length-1].tp*100).toFixed(1)}%는 없${si==seq_list.length-1?"다":"고"}`)); const p_tags = seq_list.map((s,si)=> html`

`); const contents = html`

정치인도 언론도 미투표자는 관심 없다

${p_tags}

`; let step = 0; function update(step) { if(step==0) p_tags.forEach((p)=>{d3.select(p).text('')}); else if(step==1) p_tags.forEach((p,pi)=>{ d3.select(p).interrupt() .transition().ease(d3.easeLinear).delay(anim_step_ms*pi).duration(anim_step_ms) .textTween(() => t => p_txts[pi](t))}); } function init() { update((step=0)); } function fwd() { if(step == 0) { update(++step); return true; } return false; } function bwd() { if(step == 1) { update(--step); return true; } return false; } p_tags.forEach((p,pi)=>{d3.select(p).text(p_txts[pi](1))}); const sl = slide`${contents}`; return Object.assign(sl,{init,fwd,bwd}); }35:T6df,{ let ci = 0; function keyUp(event) { const slides = document.querySelectorAll('.observablehq .slide'); const cs = slides[ci]; switch (event.key) { case 'ArrowUp': case 'ArrowLeft': if( !cs.hasOwnProperty("bwd") || !cs.bwd()) { ci = Math.max(ci-1, 0); const ps = slides[ci]; if(ps.hasOwnProperty("init")) ps.init(); ps.scrollIntoView({behavior: "smooth"}); } break; case 'ArrowDown': case 'ArrowRight': if( !cs.hasOwnProperty("fwd") || !cs.fwd()) { ci = Math.min(ci+1,slides.length-1); const ps = slides[ci]; if(ps.hasOwnProperty("init")) ps.init(); ps.scrollIntoView({behavior: "smooth"}); } break; } } document.removeEventListener('keyup', keyUp); document.addEventListener('keyup', keyUp); function findParent(startElement, tagName, className) { let currentElm = startElement; while (currentElm != document.body) { if (currentElm.tagName.toLowerCase() == tagName.toLowerCase() && currentElm.className.toLowerCase() == className.toLowerCase()) { return currentElm; } currentElm = currentElm.parentElement; } return false; } function click(event) { const cs_clicked = findParent(event.srcElement,'div','slide'); if (!cs_clicked) return; const slides = document.querySelectorAll('.observablehq .slide'); for(let i = 0; i < slides.length; i++) { if(slides[i] === cs_clicked) { ci = i; break; } } cs_clicked.scrollIntoView({behavior:"smooth"}); } document.removeEventListener('click',click); document.addEventListener('click',click); }36:T1d92,function gen_slide_given_seq(seq) { const [w,h] = slide_content_dim; const pd = {w:w*4/10,h:h*3/5}; const midterm = w-pd.w*2; const radius = Math.floor(Math.min(pd.w,pd.h)/2); const pie = d3.pie().sort(null).value(d => d.count); const arc = d3.arc().innerRadius(radius/2).outerRadius(radius); const sdata = data[seq]; const svg_pub = d3.create("svg").attr("viewBox", [0, 0, pd.w, pd.h]); const pie_items_pub = pie(sdata.slice(0,-1)); const g_pie_pub = svg_pub.append("g").attr("transform",`translate(${pd.w/2},${pd.h/2})`); g_pie_pub.append("g") .selectAll("path") .data(pie_items_pub) .join("path") .attr("stroke","none") .attr("fill", d => d.data.color) .attr("d",arc); g_pie_pub.append("g") .attr("fill","white").attr("font-size","24") .attr("text-anchor","middle") .selectAll("text") .data(pie_items_pub,d=>d.index) .join("text") .attr("visibility",d=>d.data.vp>0.1?"visible":"hidden") .attr("x",d=>arc.centroid(d)[0]).attr("y",d=>arc.centroid(d)[1]).attr("dy",-4) .text((d,i)=>`${d.data.candidate}`); g_pie_pub.append("g") .attr("fill","white").attr("font-size","24") .attr("text-anchor","middle").attr("dominant-baseline","hanging") .selectAll("text") .data(pie_items_pub,d=>d.index) .join("text") .attr("visibility",d=>d.data.vp>0.1?"visible":"hidden") .attr("x",d=>arc.centroid(d)[0]).attr("y",d=>arc.centroid(d)[1]).attr("dy",4) .text((d,i)=>`${(d.data.vp*100).toFixed(1)}%`); const text_pub_vp = html`${(pie_items_pub[0].data.vp*100).toFixed(1)}`; const text_pub_el = html`${(pie_items_pub[0].data.candidate)}`; const svg_arrow = d3.create("svg").attr("viewBox", [0, 0, midterm, 100]); svg_arrow.append("text") .attr("x",midterm/2).attr("y",50).attr("dx",-8).attr("dy",-10) .attr("font-size","1.5vw").attr("text-anchor","middle").attr("fill","#eee") .text("미투표자 포함"); svg_arrow.append("path") .attr('marker-end', 'url(#arrow)') .attr("d",`M 5 50 H ${midterm-10} m ${-10} ${-5} v ${10} l ${10} ${-5} z`) .attr("stroke","#eee").attr("stroke-width","4").attr("fill","#eee"); const svg_all = d3.create("svg").attr("viewBox", [0, 0, pd.w, pd.h]); const g_pie_all = svg_all.append("g").attr("transform",`translate(${pd.w/2},${pd.h/2})`); const sdata_a0 = JSON.parse(JSON.stringify(sdata)); sdata_a0[sdata_a0.length-1].count = 0; sdata_a0.forEach((row,ri)=>{row.color = sdata[ri].color; }); const pie_items_all = [pie(sdata_a0),pie(sdata)]; function arcTween(a) { const i = d3.interpolate(this._current, a); this._current = i(0); return (t) => arc(i(t)); } function arcTweenPosX(a) { const i = d3.interpolate(this._current, a); this._current = i(0); return (t) => arc.centroid(i(t))[0]; } function arcTweenPosY(a) { const i = d3.interpolate(this._current, a); this._current = i(0); return (t) => arc.centroid(i(t))[1]; } function textTween(a) { const i = d3.interpolate(this._current.data.vp, a.data.tp); return (t) => `${(i(t)*100).toFixed(1)}%`; } const g_pie_arc = g_pie_all.append("g"); const g_pie_txt1 = g_pie_all.append("g") .attr("fill","white").attr("font-size","24").attr("text-anchor","middle"); const g_pie_txt2 = g_pie_all.append("g") .attr("fill","white").attr("font-size","24") .attr("text-anchor","middle").attr("dominant-baseline","hanging"); function update_pie2(pie_items) { g_pie_arc.selectAll("path") .data(pie_items,d=>d.index) .join( enter => { enter.append("path") .attr("stroke","none") .attr("fill", d => d.data.color) .attr("d",arc) .each(function(d) { this._current = d; }); }, update => { update.transition().duration(anim_step_ms) .attrTween("d",arcTween) }, exit => { exit.remove(); } ); g_pie_txt1 .selectAll("text") .data(pie_items,d=>d.index) .join( enter=>{ enter.append("text") .attr("visibility",d=>d.data.vp>0.1?"visible":"hidden") .attr("x",d=>arc.centroid(d)[0]).attr("y",d=>arc.centroid(d)[1]).attr("dy",-4) .text((d,i)=>`${d.data.candidate}`) .each(function(d) { this._current = d;}); }, update=>{ update .attr("visibility",d=>d.data.tp>0.1?"visible":"hidden") .transition().duration(anim_step_ms).attrTween("x",arcTweenPosX).attrTween("y",arcTweenPosY); }, exit=>{exit.remove();} ); g_pie_txt2.selectAll("text") .data(pie_items,d=>d.index) .join( enter=>{ enter.append("text") .attr("visibility",d=>d.data.vp>0.1?"visible":"hidden") .attr("x",d=>arc.centroid(d)[0]).attr("y",d=>arc.centroid(d)[1]).attr("dy",4) .text((d,i)=>`${(d.data.tp*100).toFixed(1)}%`) .each(function(d) { this._current = d;}); },update=>{ update .attr("visibility",d=>d.data.tp>0.1?"visible":"hidden") .transition().duration(anim_step_ms) .attrTween("x",arcTweenPosX).attrTween("y",arcTweenPosY) .textTween(textTween); }, exit=>{exit.remove();} ); } update_pie2(pie_items_all[0]); update_pie2(pie_items_all[1]); const text_all_tp = html`${(sdata[0].tp*100).toFixed(1)}`; const text_all_el = html`${(sdata[0].candidate)}`; const p_all = html`

(선거권을 가진) 국민의 ${text_all_tp}%가
${text_all_el} 후보를 선택해 당선

`; let step = 0; function update(step) { //console.log("update", step) if(step==0) { svg_arrow.attr("opacity",0); svg_all.attr("opacity",0); d3.select(p_all).style("opacity",0); } else if(step==1) { svg_arrow.transition().duration(anim_step_ms).attr("opacity",1); svg_all.transition().duration(anim_step_ms).attr("opacity",1); d3.select(p_all).transition().duration(anim_step_ms).style("opacity",1); const interp_p = d3.interpolate(sdata[0].vp*100,sdata[0].tp*100); d3.select(text_all_tp).transition().duration(anim_step_ms).textTween(() => t => interp_p(t).toFixed(1)); update_pie2([]); update_pie2(pie_items_all[0]); update_pie2(pie_items_all[1]); } } function init() { update((step=0)); } function fwd() { if(step == 0) { update(++step); return true; } return false; } function bwd() { if(step == 1) { update(--step); return true; } return false; } const ret_html = html`

${seq_list[seq]}대 대선의 결과

${svg_pub.node()}	${svg_arrow.node()}	${svg_all.node()}
(투표에 참여한) 국민의 ${text_pub_vp}%가 ${text_pub_el} 후보를 선택해 당선		${p_all}

`; const sl = slide`${ret_html}`; return Object.assign(sl,{init,fwd,bwd}); }37:[{"id":"1facecdb5c5c9030c1e62e2db749d54bc0d305a123998b8b09db746d1a1366d848e0c54984870a708caee11bfe6c303c336318ca10a3bedfacece7cf22abe8ac","href":"https://static.observableusercontent.com/files/1facecdb5c5c9030c1e62e2db749d54bc0d305a123998b8b09db746d1a1366d848e0c54984870a708caee11bfe6c303c336318ca10a3bedfacece7cf22abe8ac","name":"KR_PresidentElection_20_19_18_17_16.json","type":"application/json","lastModified":1747672512075.338,"size":5125}] 32:{"id":"d737dd0ec9d27341","slug":"bamboo-forest-2025-no-country-for-nonvoters","title":"대나무숲:미투표자를 위한 나라는 없다","thumbnail":"7f694707f47957ee85a1ffc7fcef7363f65a5ee37b25c4298f5ee0f8ea8d497f","access_level":"public","create_time":"$D2025-05-18T18:37:30.907Z","update_time":"$D2025-05-22T09:57:07.603Z","view_time":null,"first_public_time":"$D2025-05-22T05:39:32.037Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"50faa4da52a9ff9b","login":"humble-data-miner","name":"Humble Data Miner","avatar_url":"https://avatars-next.observableusercontent.com/3046b1bea86c5e825baea7c0c403d90ad9690b5396b11b5d02b3a0839fbcb946","tier":"starter_2024"},"version":717,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"4e2fc41e06361cc3","login":"humble-data-miner","name":"Humble Data Miner","avatar_url":"https://avatars-next.observableusercontent.com/3046b1bea86c5e825baea7c0c403d90ad9690b5396b11b5d02b3a0839fbcb946","tier":null}],"members":[{"type":"individual","id":"4e2fc41e06361cc3","login":"humble-data-miner","name":"Humble Data Miner","avatar_url":"https://avatars-next.observableusercontent.com/3046b1bea86c5e825baea7c0c403d90ad9690b5396b11b5d02b3a0839fbcb946","tier":null,"role":"editor"},{"type":"team","id":"50faa4da52a9ff9b","login":"humble-data-miner","name":"Humble Data Miner","avatar_url":"https://avatars-next.observableusercontent.com/3046b1bea86c5e825baea7c0c403d90ad9690b5396b11b5d02b3a0839fbcb946","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":669,"value":"---\n## 슬라이드 사용법\n\n* 전체화면 보기: 우상단 메뉴 버튼 클릭 후 **View** 메뉴의 **View in Fullscreen** 실행\n* 키보드: 화살표 키 '→' 또는 '↓'로 진행, 화살표 키 '←' 또는 '↑'로 역행\n* 마우스: 슬라이드 영역 클릭시 해당 슬라이드 위치로 스크롤 이동","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":567,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":83,"value":"first_slide = { \n return slide`

본 자료는 이번 선거에
투표 의사가 없는 분들을
대상으로 합니다

`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"{\n const seq = kr_typing_seq(\"지난 5번의 대통령 선거 결과\");\n const headline = html`

${seq(0)}

`;\n const sl = slide`${headline}`;\n const head = d3.select(headline);\n let step = 0;\n function update(step) {\n if(step==0)\n head.text(seq(0));\n else if(step==1)\n head.interrupt().transition().ease(d3.easeLinear).duration(anim_step_ms).textTween(() => t => seq(t));\n }\n function init() {\n update((step=0));\n }\n function fwd() {\n if(step == 0) {\n update(++step);\n return true;\n }\n return false;\n }\n function bwd() {\n if(step == 1) {\n update(--step);\n return true;\n }\n return false;\n }\n head.text(seq(1));\n return Object.assign(sl,{init,fwd,bwd});\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":542,"value":"gen_slide_given_seq(0)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":545,"value":"gen_slide_given_seq(1)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":548,"value":"gen_slide_given_seq(2)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":551,"value":"gen_slide_given_seq(3)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":554,"value":"gen_slide_given_seq(4)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":601,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":644,"value":"slide`

더 이상 무시당하지 않도록
주권자의 권리를 행사하세요

내란 종식으로 사회 안정을 가져올
최적의 후보에 투표하세요

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":655,"value":"slide`\n

재외투표소 투표: 5.20(화) ~ 5.25(일)

사전투표소 투표: 5.29(목) ~ 5.30(금)

본 투표: 6.3(화)

`;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":713,"value":"---\n## 슬라이드쇼 동영상\n\n\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":665,"value":"---\n## Reference\n\n* [중앙선거관리위원회 선거통계시스템(역대선거)](http://info.nec.go.kr/electioninfo/electionInfo_report.xhtml)\n* [중앙선거관리위원회 제21대 대통령선거 선거사무일정표](https://www.nec.go.kr/site/nec/ex/bbs/View.do?cbIdx=1104&bcIdx=269362)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":5,"value":"---\n## Appendix","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":138,"value":"raw_data = FileAttachment(\"KR_PresidentElection_20_19_18_17_16.json\").json({typed:true})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":143,"value":"seq_list = raw_data.dim","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":146,"value":"data = {\n const data = seq_list.map(s=>raw_data.seq[s]);\n \n data.forEach(list=>{\n list.forEach(row=>{\n if(row.candidate==\"기권자수\")\n row.candidate=\"미투표\";\n });\n const tc = list.reduce((acc,cur)=>{acc+=cur.count; return acc;},0);\n const vc = list.reduce((acc,cur)=>{acc+=cur.candidate==\"미투표\"?0:cur.count; return acc;},0)\n list.forEach(row=>{\n if(row.candidate==\"무효\")\n row.color = \"white\";\n if(row.candidate==\"미투표\")\n row.color = \"grey\";\n row.color = d3.color(row.color);\n row.tp = row.count/tc;\n row.vp = row.candidate==\"미투표\" ? 0 : row.count/vc;\n });\n });\n return data;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":98,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"import {slide} from \"@mbostock/slide\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"import {kr_typing_seq} from \"@humble-data-miner/kr-typing-decomp\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":132,"value":"anim_step_ms = 2000","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":259,"value":"slide_content_dim = {\n const style = window.getComputedStyle(first_slide);\n const [w,h] = [style.width, style.height].map(s=>parseFloat(s));\n const [pl,pr,pt,pb] = [style.paddingLeft,style.paddingRight,style.paddingTop,style.paddingBottom].map(s=>parseFloat(s));\n const [bl,br,bt,bb] = [style.borderLeft,style.borderRight,style.borderTop,style.borderBottom].map(s=>parseFloat(s));\n const [ml,mr,mt,mb] = [style.marginLeft,style.marginRight,style.marginTop,style.marginBottom].map(s=>parseFloat(s));\n return [w-pl-pr-bl-br-ml-mr,h-pt-pb-bt-bb-mt-mb];\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":158,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"}],"files":"$W37","stdlib":"1","titling":"auto"}} 33:"$32:body"