2d:null 2e:["$","title",null,{"children":"휴먼러닝이 머신러닝이라면: 폴백 로직 | Humble Data Miner | Observable"}] 33:T193f,{ const title = md`

오늘의 재료

`; const [h,w,cs] = [grid.height(), grid.width(), grid.cellsize()]; const svg = d3.create("svg").attr("viewBox", [0, 0, w, h+cs]); //const g_guidelines = draw_guidelines(svg,grid); const cat_colors = ["steelblue","gold","crimson"]; svg.append("defs") .append("marker") .attr("id", "arrowhead") // Unique ID for the marker .attr("viewBox", "0 -5 10 10") // Define the coordinate system for the marker .attr("refX",10) // X-coordinate of the point where the marker connects to the path .attr("refY", 0) // Y-coordinate of the point where the marker connects to the path .attr("markerWidth", 12) // Width of the marker .attr("markerHeight", 12) // Height of the marker .attr("orient", "auto-start-reverse") // Automatically orient the marker along the path .append("path") .attr("d", "M0,-5L10,0L0,5") // Path data for the arrowhead shape .attr("fill", "#eee"); // Fill color of the arrowhead const rand_fval = d3.randomNormal(6,1); const inputs = d3.range(3,10).map((fcnt,r)=>{ return d3.range(3).map((cat,c)=>{ return {cat:cat,fv:d3.range(fcnt).map(_=>rand_fval())}; }) }); const part_inputs = inputs.slice(0,3).concat(inputs.slice(-2)); part_inputs.forEach((row,r)=>{ const cell_rh = grid(1+r,4); svg.append("text") .attr("transform",`translate(${cell_rh.cx},${cell_rh.cy})`) .attr("font-size","2vw") .attr("text-anchor","middle").attr("dominant-baseline","middle") .attr("fill","#eee") .text(r==2?"...":row[0].fv.length); row.forEach((d,c)=>{ const cell = grid(1+r,5+c); const g_shape = svg.append("g").attr("transform",`translate(${cell.cx},${cell.cy})`); if(r==2) { g_shape.append("text") .attr("font-size","2vw") .attr("text-anchor","middle").attr("dominant-baseline","middle").attr("fill","#eee") .text("..."); return; } g_shape.append("path") .attr("fill",d3.color(cat_colors[d.cat]).brighter()) .attr("stroke",d3.color(cat_colors[d.cat]).darker()) .attr("stroke-width",3) .attr("d",radar.line(d.fv)); g_shape.append("path") .attr("fill","none") .attr("stroke",d3.color(cat_colors[d.cat]).darker()) .attr("stroke-width",2) .attr("d",radar.axis(d.fv)); }) }); const box_a1 = box([1,3],[5,3]); const box_a2 = box([0,5],[0,7]); svg.append("path") .attr("stroke","#eee").attr("stroke-width",1).attr("fill","none") .attr("marker-start", "url(#arrowhead)").attr("marker-end", "url(#arrowhead)") .attr("d",`M ${box_a1.x+box_a1.w} ${box_a1.y} V ${box_a1.y+box_a1.h}`); svg.append("path") .attr("stroke","#eee").attr("stroke-width",1).attr("fill","none") .attr("marker-start", "url(#arrowhead)").attr("marker-end", "url(#arrowhead)") .attr("d",`M ${box_a2.x} ${box_a2.y+box_a2.h} H ${box_a2.x+box_a2.w}`); svg.append("text") .attr("transform",`translate(${box_a2.x},${box_a2.y+box_a2.h-10})`) .attr("fill","#eee").text("전문분야").attr("font-size","0.8vw"); svg.append("text") .attr("text-anchor","end") .attr("transform",`translate(${box_a2.x+box_a2.w},${box_a2.y+box_a2.h-10})`) .attr("fill","#eee").text("비전문분야").attr("font-size","0.8vw"); svg.append("text") .attr("text-anchor","start") .attr("transform",`translate(${box_a1.x+box_a1.w-10},${box_a1.y+box_a1.h}) rotate(-90)`) .attr("fill","#eee").text("복잡(고차원)").attr("font-size","0.8vw"); svg.append("text") .attr("text-anchor","end") .attr("transform",`translate(${box_a1.x+box_a1.w-10},${box_a1.y}) rotate(-90)`) .attr("fill","#eee").text("단순(저차원)").attr("font-size","0.8vw"); const cell_label1 = grid(5,6); svg.append("text") .attr("text-anchor","middle") .attr("transform",`translate(${cell_label1.cx},${cell_label1.bottom+cs})`) .attr("fill","#eee").text("입력(데이터)").attr("font-size","2vw"); const cell_label2 = grid(5,14); svg.append("text") .attr("text-anchor","middle") .attr("transform",`translate(${cell_label2.cx},${cell_label2.bottom+cs})`) .attr("fill","#eee").text("모델(로직)").attr("font-size","2vw"); const box_m1 = box([1,12],[5,16]); function draw_box(g,bx,text) { const _g = g.append("g").attr("transform",`translate(${bx.x},${bx.y})`); _g.append("rect").attr("width",bx.w).attr("height",bx.h) .attr("fill","none").attr("stroke","#eee").attr("stroke-width","0.5vw").attr("rx","1vw").attr("ry","1vw"); _g.append("text") .attr("x",bx.w/2).attr("y",bx.h/2).attr("text-anchor","middle").attr("dominant-baseline","middle") .attr("fill","#eee").attr("font-size",bx.w/6) .text(text); return _g; } const g_box_m1 = draw_box(svg,box_m1,"소비 모델"); const g_sample = svg.append("g"); const limit = [8,6,4]; limit.map((fcnt,i)=>{ const cell = grid(2,13+i); const g_shape = g_sample.append("path") .attr("transform",`translate(${cell.cx}, ${cell.cy})`) .attr("fill",d3.color(cat_colors[i]).brighter()) .attr("stroke",d3.color(cat_colors[i]).darker()) .attr("stroke-width",4) .attr("d",radar(d3.range(fcnt).map(_=>9))); g_sample.append("text") .attr("transform",d=>`translate(${cell.cx},${cell.cy})`) .attr("text-anchor","middle") .attr("dominant-baseline","middle") .attr("fill","white") .attr("stroke","grey") .attr("font-size","2vw") .attr("dy",2) .text(d=>fcnt); g_sample.append("text") .attr("transform",d=>`translate(${cell.cx},${cell.top})`) .attr("text-anchor","middle") .attr("dominant-baseline","middle") .attr("fill","white") .attr("font-size","1.3vw") .attr("dy",2) .text(d=>"최대"); }); const in_m1 = grid(3,12); svg.append("text") .attr("text-anchor","start").attr("dominant-baseline","middle").attr("font-size","1.3vw") .attr("x",in_m1.left).attr("y",(in_m1.top+in_m1.bottom)/2).attr("dx",4).attr("fill","#eee") .text("▶"); const out_m1 = grid(4,16); svg.append("text") .attr("text-anchor","end").attr("dominant-baseline","middle").attr("font-size","1.3vw") .attr("x",out_m1.right).attr("y",(out_m1.top+out_m1.bottom)/2).attr("dx",-4).attr("fill","#eee") .text("소화불가▶"); return slide` ${title} ${svg.node()} `; }34:T192e,{ const title = md`

정상적인 폴백 동작 예시

`; const [h,w,cs] = [grid.height(), grid.width(), grid.cellsize()]; const svg = d3.create("svg").attr("viewBox", [0, 0, w, h]); //const g_guidelines = draw_guidelines(svg,grid); const cat_colors = ["steelblue","gold","crimson"]; let pause = false; const get_play_char = ()=>pause?"▶":"⏸"; svg.append("text").attr("x",grid(0,0).left).attr("y",grid(0,0).bottom+16).attr("fill","#eee").text(get_play_char()) .on("click",function(){ pause=!pause; d3.select(this).attr("font-size",pause?"smaller":"").text(get_play_char()); }); const box_m1 = box([1,5],[5,9]); const box_m2 = box([3,13],[5,15]); function draw_box(g,bx,text) { const _g = g.append("g").attr("transform",`translate(${bx.x},${bx.y})`); _g.append("rect").attr("width",bx.w).attr("height",bx.h) .attr("fill","none").attr("stroke","#eee").attr("stroke-width","0.5vw").attr("rx","1vw").attr("ry","1vw"); _g.append("text") .attr("x",bx.w/2).attr("y",bx.h/2).attr("text-anchor","middle").attr("dominant-baseline","middle") .attr("fill","#eee").attr("font-size",bx.w/6) .text(text); return _g; } const g_box_m1 = draw_box(svg,box_m1,"메인 로직"); const g_sample = svg.append("g"); const limit = [8,6,4]; limit.map((fcnt,i)=>{ const cell = grid(2,6+i); const g_shape = g_sample.append("path") .attr("transform",`translate(${cell.cx}, ${cell.cy})`) .attr("fill",d3.color(cat_colors[i]).brighter()) .attr("stroke",d3.color(cat_colors[i]).darker()) .attr("stroke-width",4) .attr("d",radar(d3.range(fcnt).map(_=>9))); g_sample.append("text") .attr("transform",d=>`translate(${cell.cx},${cell.cy})`) .attr("text-anchor","middle") .attr("dominant-baseline","middle") .attr("fill","white") .attr("stroke","grey") .attr("font-size","2vw") .attr("dy",2) .text(d=>fcnt); g_sample.append("text") .attr("transform",d=>`translate(${cell.cx},${cell.top})`) .attr("text-anchor","middle") .attr("dominant-baseline","middle") .attr("fill","white") .attr("font-size","1.3vw") .attr("dy",2) .text(d=>"최대"); }); const g_box_m2 = draw_box(svg,box_m2,"폴백 로직"); g_box_m2.select("rect").attr("stroke-dasharray",`${box_m2.w/12} ${box_m2.w/12}`); const out_m2 = grid(4,9); svg.append("text") .attr("text-anchor","end").attr("dominant-baseline","middle").attr("font-size","1.3vw") .attr("x",out_m2.right).attr("y",(out_m2.top+out_m2.bottom)/2).attr("dx",-2).attr("fill","#eee") .text("소화불가▶"); const path_gen = d3.path(); const arc = d3.arc() .innerRadius(0) .outerRadius(cs*1.1) .startAngle(0) .endAngle(2 * Math.PI); // Full circle path_gen.rect(box_m2.x-4,box_m2.y-4,box_m2.w+8,box_m2.h+8); const svg_defs = svg.append("defs"); svg_defs.append("path") .attr("id", "textpath-fbex") .attr("transform",`translate(${box_m2.x+box_m2.w/2},${box_m2.y+box_m2.h/2})`) .attr("d", arc()); const g_textpath = svg.append("text") .append("textPath") .attr("href", "#textpath-fbex") .attr("fill", d3.schemeCategory10[1]) .attr("font-size","1vw") //.attr("text-anchor","middle") .attr("startOffset","0%") .text("종교 무속 권위 과학 기술 가족 지인 시장 ... "); const cp_belt = svg_defs.append("defs") .append("clipPath") .attr("id", "clippath-belt"); function append_rect(cp,bx) { return cp.append("rect").attr("x",bx.x).attr("y",bx.y).attr("width",bx.w).attr("height",bx.h+10); } append_rect(cp_belt,box([3,2],[3,4])); append_rect(cp_belt,box([4,10],[4,12])); const rand_cat = d3.randomInt(3); const rand_fcnt = d3.randomInt(3,10); const rand_fval = d3.randomNormal(6,1); const belt = [[3,1],[3,2],[3,3],[3,4],[3,5],[4,9],[4,10],[4,11],[4,12],[4,13]]; const cond_iloc = 5; let id_cnt = 0; let items = []; const g_belt = svg.append("g").attr("clip-path", "url(#clippath-belt)"); function update() { g_belt.selectChildren("g") .data(items,d=>d.id) .join( enter=> { const g = enter.append("g"); g.attr("transform",d=>{const b=grid.at(belt[d.iloc]); return `translate(${b.left},${b.top})`;}); g.append("path") .attr("stroke","#eee").attr("stroke-width","0.5vw").attr("fill","none") .attr("d",d=>{const b=grid.at(belt[d.iloc]); return `M ${6} ${b.bottom-b.top} H ${b.right-b.left-6}`}); const g_shape = g.append("g").attr("id","shape"); g_shape.append("path") .attr("transform",d=>`translate(${cs/2},${cs/2})`) .attr("fill",d=>d3.color(cat_colors[d.cat]).brighter()) .attr("stroke",d=>d3.color(cat_colors[d.cat]).darker()) .attr("stroke-width",4) .attr("d",d=>radar.line(d.fv)); g_shape.append("text") .attr("transform",d=>`translate(${cs/2},${cs/2})`) .attr("text-anchor","middle") .attr("dominant-baseline","middle") .attr("fill","white") .attr("stroke","grey") .attr("font-size","2vw") .attr("dy",2) .text(d=>d.fv.length); }, update=>{ update.select("g#shape") .attr("visibility",d=>cond_iloc<=d.iloc&&d.fv.length<=limit[d.cat]?"hidden":"visible"); update.transition().duration(tick_period/2) .attr("transform",d=>{ const b=grid.at(belt[d.iloc]); return `translate(${b.left},${b.top})`; }); }, exit=>{ exit.remove() }, ); } update(); d3.interval(elapsed=>{ if(pause) return; items.forEach(item=>item.iloc+=1); items = items.filter(item=>item.ilocrand_fval())}); update(); },tick_period); const item1 = md`

경기결과 관련 사소한 징크스가 있는 운동선수
주 업무 외에 신앙생활도 가끔 하는 과학자

`; return slide` ${title} ${svg.node()} ${item1} ` }35:T18bd,{ const title = md`

비정상적인 폴백 동작 예시 (반전)

`; const [h,w,cs] = [grid.height(), grid.width(), grid.cellsize()]; const svg = d3.create("svg").attr("viewBox", [0, 0, w, h]); //const g_guidelines = draw_guidelines(svg,grid); const cat_colors = ["steelblue","gold","crimson"]; let pause = false; const get_play_char = ()=>pause?"▶":"⏸"; svg.append("text").attr("x",grid(0,0).left).attr("y",grid(0,0).bottom+16).attr("fill","#eee").text(get_play_char()) .on("click",function(){ pause=!pause; d3.select(this).attr("font-size",pause?"smaller":"").text(get_play_char()); }); const box_m2 = box([1,5],[5,9]); const box_m1 = box([3,13],[5,15]); function draw_box(g,bx,text) { const _g = g.append("g").attr("transform",`translate(${bx.x},${bx.y})`); _g.append("rect").attr("width",bx.w).attr("height",bx.h) .attr("fill","none").attr("stroke","#eee").attr("stroke-width","0.5vw").attr("rx","1vw").attr("ry","1vw"); _g.append("text") .attr("x",bx.w/2).attr("y",bx.h/2).attr("text-anchor","middle").attr("dominant-baseline","middle") .attr("fill","#eee").attr("font-size",bx.w/6) .text(text); return _g; } const g_box_m1 = draw_box(svg,box_m1,"메인 로직"); const g_sample = svg.append("g"); const limit = [5,5,5]; limit.map((fcnt,i)=>{ const cell = grid(2,6+i); const g_shape = g_sample.append("path") .attr("transform",`translate(${cell.cx}, ${cell.cy})`) .attr("fill",d3.color(cat_colors[i]).brighter()) .attr("stroke",d3.color(cat_colors[i]).darker()) .attr("stroke-width",4) .attr("d",radar(d3.range(fcnt).map(_=>9))); g_sample.append("text") .attr("transform",d=>`translate(${cell.cx},${cell.cy})`) .attr("text-anchor","middle") .attr("dominant-baseline","middle") .attr("fill","white") .attr("stroke","grey") .attr("font-size","2vw") .attr("dy",2) .text(d=>fcnt); g_sample.append("text") .attr("transform",d=>`translate(${cell.cx},${cell.top})`) .attr("text-anchor","middle") .attr("dominant-baseline","middle") .attr("fill","white") .attr("font-size","1.3vw") .attr("dy",2) .text(d=>"최소"); }); const g_box_m2 = draw_box(svg,box_m2,"폴백 로직"); g_box_m2.select("rect").attr("stroke-dasharray",`${box_m2.w/12} ${box_m2.w/12}`); const out_m2 = grid(4,9); const arc = d3.arc() .innerRadius(0) .outerRadius(cs*1.9) .startAngle(0) .endAngle(2 * Math.PI); // Full circle const svg_defs = svg.append("defs"); svg_defs.append("path") .attr("id", "textpath-fbex2") .attr("transform",`translate(${box_m2.x+box_m2.w/2},${box_m2.y+box_m2.h/2})`) .attr("d", arc()); const g_textpath = svg.append("text") .append("textPath") .attr("href", "#textpath-fbex2") .attr("fill", d3.schemeCategory10[1]) .attr("font-size","1.75vw") .attr("startOffset","0%") .text("종교 무속 권위 과학 기술 가족 지인 시장 ... "); svg.append("text") .attr("text-anchor","end").attr("dominant-baseline","middle").attr("font-size","1.3vw") .attr("x",out_m2.right).attr("y",(out_m2.top+out_m2.bottom)/2).attr("dx",-2).attr("fill","#eee") .text("소화불가▶"); const cp_belt = svg_defs.append("defs") .append("clipPath") .attr("id", "clippath-belt2"); function append_rect(cp,bx) { return cp.append("rect").attr("x",bx.x).attr("y",bx.y).attr("width",bx.w).attr("height",bx.h+10); } append_rect(cp_belt,box([3,2],[3,4])); append_rect(cp_belt,box([4,10],[4,12])); const rand_cat = d3.randomInt(3); const rand_fcnt = d3.randomInt(3,10); const rand_fval = d3.randomNormal(6,1); const belt = [[3,1],[3,2],[3,3],[3,4],[3,5],[4,9],[4,10],[4,11],[4,12],[4,13]]; const cond_iloc = 5; let id_cnt = 0; let items = []; const g_belt = svg.append("g").attr("clip-path", "url(#clippath-belt2)"); function update() { g_belt.selectChildren("g") .data(items,d=>d.id) .join( enter=> { const g = enter.append("g"); g.attr("transform",d=>{const b=grid.at(belt[d.iloc]); return `translate(${b.left},${b.top})`;}); g.append("path") .attr("stroke","#eee").attr("stroke-width","0.5vw").attr("fill","none") .attr("d",d=>{const b=grid.at(belt[d.iloc]); return `M ${6} ${b.bottom-b.top} H ${b.right-b.left-6}`}); const g_shape = g.append("g").attr("id","shape"); g_shape.append("path") .attr("transform",d=>`translate(${cs/2},${cs/2})`) .attr("fill",d=>d3.color(cat_colors[d.cat]).brighter()) .attr("stroke",d=>d3.color(cat_colors[d.cat]).darker()) .attr("stroke-width",4) .attr("d",d=>radar.line(d.fv)); g_shape.append("text") .attr("transform",d=>`translate(${cs/2},${cs/2})`) .attr("text-anchor","middle") .attr("dominant-baseline","middle") .attr("fill","white") .attr("stroke","grey") .attr("font-size","2vw") .attr("dy",2) .text(d=>d.fv.length); }, update=>{ update.select("g#shape") .attr("visibility",d=>cond_iloc<=d.iloc&&d.fv.length>=limit[d.cat]?"hidden":"visible"); update.transition().duration(tick_period/2) .attr("transform",d=>{ const b=grid.at(belt[d.iloc]); return `translate(${b.left},${b.top})`; }); }, exit=>{ exit.remove() }, ); } update(); d3.interval(elapsed=>{ if(pause) return; items.forEach(item=>item.iloc+=1); items = items.filter(item=>item.ilocrand_fval())}); update(); },tick_period); const item1 = md`

맹신: 교주외에는 누구도 믿지 않는 광신도
맹신: 타국 국기를 들고나온 광장의 시위자

`; return slide` ${title} ${svg.node()} ${item1} ` }36:T1d34,{ const title = md`

비정상적인 폴백 동작 예시 (부재)

`; const [h,w,cs] = [grid.height(), grid.width(), grid.cellsize()]; const svg = d3.create("svg").attr("viewBox", [0, 0, w, h]); //const g_guidelines = draw_guidelines(svg,grid); const cat_colors = ["steelblue","gold","crimson"]; let pause = false; const get_play_char = ()=>pause?"▶":"⏸"; svg.append("text").attr("x",grid(0,0).left).attr("y",grid(0,0).bottom+16).attr("fill","#eee").text(get_play_char()) .on("click",function(){ pause=!pause; d3.select(this).attr("font-size",pause?"smaller":"").text(get_play_char()); }); const box_m1 = box([1,5],[5,9]); const box_m2 = box([4,13],[5,15]); function draw_box(g,bx,text) { const _g = g.append("g").attr("transform",`translate(${bx.x},${bx.y})`); _g.append("rect").attr("width",bx.w).attr("height",bx.h) .attr("fill","none").attr("stroke","#eee").attr("stroke-width","0.5vw").attr("rx","1vw").attr("ry","1vw"); _g.append("text") .attr("x",bx.w/2).attr("y",bx.h/2).attr("text-anchor","middle").attr("dominant-baseline","middle") .attr("fill","#eee").attr("font-size",bx.w/6) .text(text); return _g; } const g_box_m1 = draw_box(svg,box_m1,"메인 로직"); const g_sample = svg.append("g"); const limit = [8,6,4]; limit.map((fcnt,i)=>{ const cell = grid(2,6+i); const g_shape = g_sample.append("path") .attr("transform",`translate(${cell.cx}, ${cell.cy})`) .attr("fill",d3.color(cat_colors[i]).brighter()) .attr("stroke",d3.color(cat_colors[i]).darker()) .attr("stroke-width",4) .attr("d",radar(d3.range(fcnt).map(_=>9))); g_sample.append("text") .attr("transform",d=>`translate(${cell.cx},${cell.cy})`) .attr("text-anchor","middle") .attr("dominant-baseline","middle") .attr("fill","white") .attr("stroke","grey") .attr("font-size","2vw") .attr("dy",2) .text(d=>fcnt); g_sample.append("text") .attr("transform",d=>`translate(${cell.cx},${cell.top})`) .attr("text-anchor","middle") .attr("dominant-baseline","middle") .attr("fill","white") .attr("font-size","1.3vw") .attr("dy",2) .text(d=>"최대"); }); const g_box_m2 = draw_box(svg,box_m2,"미처리 적재함"); g_box_m2.select("rect").attr("stroke-dasharray",`${box_m2.w/12} ${box_m2.w/12}`); g_box_m2.select("text").attr("dy",-1.5*cs); const out_m2 = grid(4,9); svg.append("text") .attr("text-anchor","end").attr("dominant-baseline","middle").attr("font-size","1.3vw") .attr("x",out_m2.right).attr("y",(out_m2.top+out_m2.bottom)/2).attr("dx",-2).attr("fill","#eee") .text("소화불가▶"); const path_gen = d3.path(); const arc = d3.arc() .innerRadius(0) .outerRadius(cs*1.1) .startAngle(0) .endAngle(2 * Math.PI); // Full circle path_gen.rect(box_m2.x-4,box_m2.y-4,box_m2.w+8,box_m2.h+8); const svg_defs = svg.append("defs"); const cp_belt = svg_defs .append("clipPath") .attr("id", "clippath-belt3"); function append_rect(cp,bx) { return cp.append("rect").attr("x",bx.x).attr("y",bx.y).attr("width",bx.w).attr("height",bx.h+10); } append_rect(cp_belt,box([3,2],[3,4])); append_rect(cp_belt,box([4,10],[4,12])); append_rect(cp_belt,box([3,12],[5,15])); const rand_cat = d3.randomInt(3); const rand_fcnt = d3.randomInt(3,10); const rand_fval = d3.randomNormal(6,1); const belt = [[3,1],[3,2],[3,3],[3,4],[3,5],[4,9],[4,10],[4,11],[4,12],[4,13],[4,14],[4,15],[5,15],[5,14],[5,13]]; const belt_end = [5,12]; const cond_iloc = 5; let id_cnt = 0; let items = []; const g_belt = svg.append("g").attr("clip-path", "url(#clippath-belt3)"); function update() { g_belt.selectChildren("g") .data(items,d=>d.id) .join( enter=> { const g = enter.append("g"); g.attr("transform",d=>{const b=grid.at(belt[d.iloc]); return `translate(${b.left},${b.top})`;}); g.append("path").attr("id","belt-line") .attr("stroke","#eee").attr("stroke-width","0.5vw").attr("fill","none") .attr("d",d=>{const b=grid.at(belt[d.iloc]); return `M ${6} ${b.bottom-b.top} H ${b.right-b.left-6}`}); const g_shape = g.append("g").attr("id","shape"); g_shape.append("path") .attr("transform",d=>`translate(${cs/2},${cs/2})`) .attr("fill",d=>d3.color(cat_colors[d.cat]).brighter()) .attr("stroke",d=>d3.color(cat_colors[d.cat]).darker()) .attr("stroke-width",4) .attr("d",d=>radar.line(d.fv)); g_shape.append("text") .attr("transform",d=>`translate(${cs/2},${cs/2})`) .attr("text-anchor","middle") .attr("dominant-baseline","middle") .attr("fill","white") .attr("stroke","grey") .attr("font-size","2vw") .attr("dy",2) .text(d=>d.fv.length); }, update=>{ update.select("g#shape") .attr("visibility",d=>d.empty?"hidden":"visible"); const full = belt.length == items.filter(item=>!(item.empty||item.clear)).length; if(full) { function interp_cell(b1,b2) { return {left:(b1.left+b2.left)/2,right:(b1.right+b2.right)/2,top:(b1.top+b2.top)/2,bottom:(b1.bottom+b2.bottom)/2}; } update.transition().duration(tick_period/4).attr("transform",d=>{ const b=interp_cell(grid.at(d.iloc<(belt.length-1)?belt[d.iloc+1]:belt_end),grid.at(belt[d.iloc])); return `translate(${b.left},${b.top})`; }) .transition().duration(tick_period/4).attr("transform",d=>{ const b=grid.at(belt[d.iloc]); return `translate(${b.left},${b.top})`; }); } else { update.transition().duration(tick_period/2) .attr("transform",d=>{ const b=grid.at(belt[d.iloc]); return `translate(${b.left},${b.top})`; }); } }, exit=>{ exit.transition().duration(tick_period/2).style("opacity", 0).remove() }, ); } update(); d3.interval(elapsed=>{ if(pause) return; items.toReversed().forEach((item,ri)=>{ const i = items.length-ri-1; if(cond_iloc==item.iloc && item.fv.length<=limit[item.cat]) item.empty=true; if(item.iloc=(items.length-1) || (item.iloc+1) == items[i+1].iloc; if(item.empty && (next_end || next_occupied)) item.clear = true; const next_cleared = i<(items.length-1) && items[i+1].clear; if(next_cleared || !next_occupied) item.iloc = Math.min(item.iloc+1,belt.length-1); } }); items = items.filter(d=>!d.clear); if(items.length < belt.length) { items.unshift({id:id_cnt++,iloc:0,empty:false,clear:false,cat:rand_cat(),fv:d3.range(rand_fcnt()).map(_=>rand_fval())}); } update(); },tick_period); const item1 = md`

적체: 의지할 사람 없는 사면초가의 가장
과소화: 전문성을 넘어선 의료계 백신 음모론자

`; return slide` ${title} ${svg.node()} ${item1} ` }37:[] 31:{"id":"b77a9edae7e87115","slug":"hl-like-ml-fallback-logic","title":"휴먼러닝이 머신러닝이라면: 폴백 로직","thumbnail":"39818e23e568e6ec7b3584ec04a4d26438fa90918e621eae57d41fce25e2ec19","access_level":"public","create_time":"$D2025-10-19T21:01:14.206Z","update_time":"$D2025-10-24T07:16:37.400Z","view_time":null,"first_public_time":"$D2025-10-23T04:35:52.474Z","has_unpublished_edits":null,"fork":false,"stars":1,"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":791,"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":{"id":"2f4cd6bfe331467c","slug":"bamboo-forest","title":"Bamboo Forest","owner":{"id":"50faa4da52a9ff9b","login":"humble-data-miner","name":"Humble Data Miner"}},"type":"notebook","body":{"title":"휴먼러닝이 머신러닝이라면: 폴백 로직","cells":[{"id":0,"value":"# 휴먼러닝이 머신러닝이라면: 폴백 로직","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":786,"value":"---\n## 슬라이드 사용법\n\n* 전체화면 보기: 우상단 메뉴 클릭 후 **View** > **View in Fullscreen** 실행\n* 키보드: 화살표 키 '→' 또는 '↓'로 진행, 화살표 키 '←' 또는 '↑'로 역행\n* 마우스: 슬라이드 영역 클릭시 해당 슬라이드 위치로 스크롤 이동","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":27,"value":"first_slide ={\n\nconst title = md`

휴먼러닝이 머신러닝이라면?

`;\nconst item1 = md`

사람의 사고를 모델화
\n\n 사람의 사고는 복잡한 시스템 동작의 결과
\n 모델화하면서 간단하게 요약해 표현\n

폴백 로직 (fallback logic) ?

`;\n const item1 = md`

처리불가 상황에 대한 대응논리
\n\n 처리불가 = 스스로 해결, 감당, 이해 불가
\n 대응논리 = 외부(인)의 조언, 논리, 관습\n

`;\n\nreturn slide`\n${title}\n${item1}\n`\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":651,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":175,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":490,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":522,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":619,"value":"{\n const title = md`

결론

`;\n const item1 = md`

주도적이고 균형잡힌 삶이 중요
\n\n 주도적 = 폴백로직은 메인로직을 거들뿐
\n 균형잡힌 = 학습으로 적체, 과소화 방지\n

`;\n\n return slide`\n${title}\n${item1}`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":790,"value":"---\n## 부연설명 동영상\n\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":62,"value":"---\n## Appendix","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":65,"value":"tick_period = 1000","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":48,"value":"slide_contents_dim = compute_slide_contents_dim(first_slide)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":71,"value":"grid = mvp_grid(slide_contents_dim[0],280,45)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":187,"value":"box = mvp_box(grid)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":285,"value":"radar = mvp_radar(grid.cellsize()/2,10)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":29,"value":"import_style","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":420,"value":"install_key_bindings_to_document","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":57,"value":"import {grid as mvp_grid, box as mvp_box, radar as mvp_radar, draw_guidelines} from \"@humble-data-miner/mod-mvp\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"import {slide,install_key_bindings_to_document, import_style, compute_slide_contents_dim} from \"@humble-data-miner/mod-slide-ex\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W37","stdlib":"1","titling":"auto"}} 32:"$31:body"