2d:null 2e:["$","title",null,{"children":"휴먼러닝이 머신러닝이라면: 꼰대의 재정의 | Humble Data Miner | Observable"}] 33:T110a,{ 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"]; const inputs = d3.range(3).map(r=>{ return d3.range(5).map(c=>{ return d3.range(6).map(i=>fv_basis[r][i]+fval_rand_norm()); }) }); inputs.forEach((row,r)=>{ const cell_rh = grid(2+r,3); svg.append("text") .attr("transform",`translate(${cell_rh.right-4},${cell_rh.cy+2})`) .attr("font-size","2vw") .attr("text-anchor","end").attr("dominant-baseline","middle") .attr("fill","#eee") .text(`상황#${r+1}: `); row.forEach((d,c)=>{ const cell = grid(2+r,4+c); const g_shape = svg.append("g").attr("transform",`translate(${cell.cx},${cell.cy})`); if(c==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(fcolor).brighter()) .attr("stroke",d3.color(fcolor).darker()) .attr("stroke-width",2) .attr("d",radar.line(d)); g_shape.append("path") .attr("fill","none") .attr("stroke",d3.color(fcolor).darker()) .attr("stroke-width",1) .attr("d",radar.axis(d)); }); }); const cell_label1 = grid(5,5); 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,15); 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 bx_m1 = box([1,13],[5,17]); svg.append("rect").attr("x",bx_m1.x).attr("y",bx_m1.y).attr("width",bx_m1.w).attr("height",bx_m1.h) .attr("fill","none").attr("stroke","#eee").attr("stroke-width","0.5vw").attr("rx","1vw").attr("ry","1vw"); const bx_cm = box([1,14],[3,16]); const radar_cm = mvp_radar(cs*3/2,10); let cm_fv = [3,3,8,3,3,3]; let last_fv = [3,4,3,4,8,4]; const g_cm = svg.append("g") .attr("transform",`translate(${bx_cm.x+bx_cm.w/2},${bx_cm.y+bx_cm.h/2})`); const g_cm_area = g_cm.append("path") .attr("fill",d=>d3.color(fcolor).brighter()) .attr("stroke",d=>d3.color(fcolor).darker()) .attr("stroke-width",2) .attr("d",radar_cm.line(cm_fv)); const g_cm_axis = g_cm.append("path") .attr("fill","none") .attr("stroke",d=>d3.color(fcolor).darker()) .attr("stroke-width",1) .attr("d",radar_cm.axis(cm_fv)); const g_cm_loss = g_cm.append("path") .attr("fill",d=>d3.color("purple").brighter()) .attr("stroke",d=>d3.color("purple").darker()) .attr("stroke-width",2) .attr("opacity",0.5) .attr("d",radar_cm.area(cm_fv.map((v,i)=>[v,last_fv[i]]))); g_cm.append("text").attr("y",-bx_cm.h/2+14).attr("fill","#eee").attr("font-size","30px") .attr("dominant-baseline","hanging").attr("text-anchor","middle") .text("현재 모델"); g_cm.append("text").attr("y",bx_cm.h/2-10).attr("fill",d3.color("purple").brighter()).attr("font-size","20px") .attr("dominant-baseline","auto").attr("text-anchor","middle") .text("오류=모델과 입력의 차이"); const bx_lm = box([4,15],[4,15]); const g_lm = svg.append("g") .attr("transform",`translate(${bx_lm.x+bx_lm.w/2},${bx_lm.y+bx_lm.h/2})`); const g_lm_area = g_lm.append("path") .attr("fill",d=>d3.color(fcolor).brighter()) .attr("stroke",d=>d3.color(fcolor).darker()) .attr("stroke-width",2) .attr("d",radar.line(last_fv)); const g_lm_axis = g_lm.append("path") .attr("fill","none") .attr("stroke",d=>d3.color(fcolor).darker()) .attr("stroke-width",1) .attr("d",radar.axis(last_fv)); g_lm.append("text").attr("y",bx_lm.h/2).attr("fill","#eee").attr("font-size","20px") .attr("dominant-baseline","hanging").attr("text-anchor","middle") .text("(후보) 학습할 입력"); return slide` ${title} ${svg.node()} `; }34:T2c3e,{ const title = md`

꼰대가 되는 과정

`; const item1 = md`

1. 특정 상황에 특화된 모델을 확정
2. 다른 상황에서 지속적 오류 발생

`; 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); let pause = false; let action = ""; let fixed = 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()) .style("cursor","pointer").style("user-select", "none") .on("click",function(){ pause=!pause; d3.select(this).attr("font-size",pause?"smaller":"").text(get_play_char()); }); const bx_cm = box([1,11],[3,13]); const radar_cm = mvp_radar(cs*3/2,10); let cm_fv = [0,0,0,0,0,0]; let last_fv = [0,0,0,0,0,0]; const g_cm = svg.append("g") .attr("transform",`translate(${bx_cm.x+bx_cm.w/2},${bx_cm.y+bx_cm.h/2})`); const g_cm_area = g_cm.append("path") .attr("fill",d=>d3.color(fcolor).brighter()) .attr("stroke",d=>d3.color(fcolor).darker()) .attr("stroke-width",2) .attr("d",radar_cm.line(cm_fv)); const g_cm_axis = g_cm.append("path") .attr("fill","none") .attr("stroke",d=>d3.color(fcolor).darker()) .attr("stroke-width",1) .attr("d",radar_cm.axis(cm_fv)); const g_cm_loss = g_cm.append("path") .attr("fill",d=>d3.color("purple").brighter()) .attr("stroke",d=>d3.color("purple").darker()) .attr("stroke-width",2) .attr("opacity",0.5) .attr("d",radar_cm.area(cm_fv.map(v=>[v,v]))); const bx_belt = box([0,7],[5,20]); const svg_defs = svg.append("defs"); svg_defs.append("defs") .append("clipPath") .attr("id", "clippath-belt1") .append("rect").attr("x",bx_belt.x).attr("y",bx_belt.y).attr("width",bx_belt.w).attr("height",bx_belt.h+10); svg_defs.append("marker") .attr("id", "arrowhead1") // 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", 3) // Width of the marker .attr("markerHeight", 3) // 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 let cur_fb = 0; const bx_ins = [box([2,2],[2,4]), box([3,2],[3,4]), box([4,2],[4,4])]; const g_bx_ins = bx_ins.map((bx,bi)=>{ const g = svg.append("g"); g.append("rect").attr("x",bx.x).attr("y",bx.y).attr("width",bx.w).attr("height",bx.h) .attr("fill","black").attr("stroke","#888").attr("stroke-width","0.5vw").attr("fill-opacity",0) .style("cursor","pointer").style("user-select", "none") .on("click",_=>{ cur_fb = bi; update_input(); items = []; }); g.append("text") .attr("font-size",20).attr("text-anchor","middle").attr("dominant-baseline","middle") .attr("x",bx.x+bx.w/2).attr("y",bx.y+bx.h/2+2).attr("fill","#888").attr("pointer-events","none") .text(`상황(환경) #${bi+1}`); return g; }); const bx_btns = box([5,10],[5,14]); const g_btn_accept = svg.append("foreignObject") .attr("x",bx_btns.x).attr("y",bx_btns.y).attr("width",bx_btns.w/2).attr("height",bx_btns.h) .append("xhtml:div") .attr("class", "btn-3d green") .style("font-size","1.3vw").style("display","flex").style("flex-direction","column") .style("align-items","center").style("justify-content","center").style("text-align","center") .html("수용") .on("click",_=>{ action = "accept"; }); const g_btn_reject = svg.append("foreignObject") .attr("x",bx_btns.x+bx_btns.w/2).attr("y",bx_btns.y).attr("width",bx_btns.w/2).attr("height",bx_btns.h) .append("xhtml:div") .attr("class", "btn-3d red") .style("font-size","1.3vw").style("display","flex").style("flex-direction","column") .style("align-items","center").style("justify-content","center").style("text-align","center") .html("거부") .on("click",e=>{ action = "reject"; }); const bx_btn_fix = box([1,14],[1,14]); const g_btn_fix = svg.append("foreignObject") .attr("x",bx_btn_fix.x).attr("y",bx_btn_fix.y).attr("width",bx_btn_fix.w).attr("height",bx_btn_fix.h) .append("xhtml:div") .attr("class", "btn-3d lightgrey") .style("font-size","15px").style("display","flex").style("flex-direction","column") .style("align-items","center").style("justify-content","center").style("text-align","center").style("height","50%") .html("확정") .on("click",_=>{ action = "fix"; }); const bx_btn_clear = box([1,10],[1,10]); svg.append("foreignObject") .attr("visibility","hidden") .attr("x",bx_btn_clear.x).attr("y",bx_btn_clear.y) .attr("width",bx_btn_clear.w).attr("height",bx_btn_clear.h) .append("xhtml:div") .attr("class", "btn-3d grey") .style("font-size","15px").style("display","flex").style("flex-direction","column") .style("align-items","center").style("justify-content","center").style("text-align","center").style("height","50%") .html("리셋") .on("click",_=>{ action = "clear"; }); const fa_lock_cloned = d3.select(fa_lock).clone(true); const fa_lock_dim = {w:fa_lock_cloned.attr("width"),h:fa_lock_cloned.attr("height")}; fa_lock_cloned.select("path").attr("stroke","none").attr("fill","#eee"); const g_fa_lock = svg.append("g") .attr("transform",`translate(${bx_btn_fix.x+bx_btn_fix.w/2-fa_lock_dim.w/2},${bx_btn_fix.y+bx_btn_fix.h/2-fa_lock_dim.h/2})`); g_fa_lock.node().append(fa_lock_cloned.node()); const bx_in = bx_ins[0]; const g_bx_in = svg.append("rect") .attr("x",bx_in.x).attr("y",bx_in.y).attr("width",bx_in.w).attr("height",bx_in.h) .attr("fill","none").attr("stroke","#eee").attr("stroke-width","0.5vw"); const bx_gen = box([4,6],[4,6]); const g_bx_gen = svg.append("g"); g_bx_gen.append("rect").attr("x",bx_gen.x).attr("y",bx_gen.y).attr("width",bx_gen.w).attr("height",bx_gen.h) .attr("fill","none").attr("stroke","#eee").attr("stroke-width","0.5vw"); const line_in_gen = d3.line().curve(d3.curveStep); const line_points = [[bx_in.x+bx_in.w,bx_in.y+bx_in.h/2],[bx_gen.x,bx_gen.y+bx_gen.h/2]]; const g_line_in_gen = svg.append("path") .attr("fill","none").attr("stroke","#eee").attr("stroke-width","0.4vw") .attr("marker-end", "url(#arrowhead1)") .attr("d",line_in_gen(line_points)); const bx_m = box([1,10],[5,14]); const g_bx_m = svg.append("g"); g_bx_m.append("rect").attr("x",bx_m.x).attr("y",bx_m.y).attr("width",bx_m.w).attr("height",bx_m.h) .attr("fill","none").attr("stroke","#eee").attr("stroke-width","0.5vw").attr("rx","1vw").attr("ry","1vw"); const fbs = fv_basis; const fcnt = fbs[0].length; const rand_fval = fval_rand_norm; const rand_fb = d3.randomInt(fbs.length); const rand_deviant = d3.randomInt(4); const belt = [[4,6],[4,7],[4,8],[4,9],[4,10],[4,11],[4,12]]; let id_cnt = 0; let items = []; const g_belt = svg.append("g").attr("clip-path", "url(#clippath-belt1)"); function update_input() { g_bx_ins.forEach((g,gi)=>{g.select("text").transition().duration(tick_period/2).attr("fill",cur_fb==gi?"#eee":"#888");}); const bx_in = bx_ins[cur_fb]; const line_points = [[bx_in.x+bx_in.w,bx_in.y+bx_in.h/2],[bx_gen.x,bx_gen.y+bx_gen.h/2]]; g_line_in_gen.transition().duration(tick_period/2).attr("d", line_in_gen(line_points)); g_bx_in.transition().duration(tick_period/2).attr("x",bx_in.x).attr("y",bx_in.y); } function update() { g_btn_accept.style("visibility", fixed ? "hidden":"visible"); g_btn_reject.style("visibility", fixed ? "hidden":"visible"); g_btn_fix.style("visibility", fixed ? "hidden":"visible"); g_fa_lock.style("visibility", fixed ? "visible":"hidden"); g_cm_area.transition().duration(tick_period/2).attr("d",radar_cm.line(cm_fv)); g_cm_axis.transition().duration(tick_period/2).attr("d",radar_cm.axis(cm_fv)); g_cm_loss.transition().duration(tick_period/2).attr("d",radar_cm.area(cm_fv.map((v,i)=>[v,last_fv[i]]))); 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(fcolor).brighter()) .attr("stroke",d=>d3.color(fcolor).darker()) .attr("stroke-width",2) .attr("d",d=>radar.line(d.fv)); g_shape.append("path") .attr("transform",d=>`translate(${cs/2},${cs/2})`) .attr("fill","none") .attr("stroke",d3.color(fcolor).darker()) .attr("stroke-width",1) .attr("d",d=>radar.axis(d.fv)); }, update=>{ 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_input(); update(); d3.interval(elapsed=>{ if(pause) return; if(action == "clear") { items = []; cm_fv = [0,0,0,0,0,0]; last_fv = [0,0,0,0,0,0]; fixed = false; action = ""; } const full = (items.length == belt.length); if (full) { const item = items[items.length-1]; last_fv = item.fv; if (action == "fix") fixed = true; if (fixed || action == "accept" || action == "reject") { if (!fixed && action == "accept") cm_fv = cm_fv.map((v,i)=>(v+last_fv[i])/2); items.pop().res = action; items.forEach(item=>item.iloc+=1); const this_fb = id_cnt > 0 && rand_deviant() == 0 ? rand_fb() : cur_fb; items.unshift({id:id_cnt++,iloc:0,fv:d3.range(fcnt).map(fi=>fbs[this_fb][fi]+rand_fval())}); action = ""; } } else { items.forEach(item=>item.iloc+=1); items = items.filter(item=>item.iloc 0 && rand_deviant() == 0 ? rand_fb() : cur_fb; items.unshift({id:id_cnt++,iloc:0,fv:d3.range(fcnt).map(fi=>fbs[this_fb][fi]+rand_fval())}); } update(); },tick_period); return slide` ${title} ${svg.node()} ${item1} ` }35:T2bf1,{ const title = md`

오류를 최소화 하려면

`; const item1 = 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); let pause = false; let action = ""; let fixed = 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()) .style("cursor","pointer").style("user-select", "none") .on("click",function(){ pause=!pause; d3.select(this).attr("font-size",pause?"smaller":"").text(get_play_char()); }); const bx_cm = box([1,11],[3,13]); const radar_cm = mvp_radar(cs*3/2,10); let cm_fv = [0,0,0,0,0,0]; let last_fv = [0,0,0,0,0,0]; const g_cm = svg.append("g") .attr("transform",`translate(${bx_cm.x+bx_cm.w/2},${bx_cm.y+bx_cm.h/2})`); const g_cm_area = g_cm.append("path") .attr("fill",d=>d3.color(fcolor).brighter()) .attr("stroke",d=>d3.color(fcolor).darker()) .attr("stroke-width",2) .attr("d",radar_cm.line(cm_fv)); const g_cm_axis = g_cm.append("path") .attr("fill","none") .attr("stroke",d=>d3.color(fcolor).darker()) .attr("stroke-width",1) .attr("d",radar_cm.axis(cm_fv)); const g_cm_loss = g_cm.append("path") .attr("fill",d=>d3.color("purple").brighter()) .attr("stroke",d=>d3.color("purple").darker()) .attr("stroke-width",2) .attr("opacity",0.5) .attr("d",radar_cm.area(cm_fv.map(v=>[v,v]))); const bx_belt = box([0,7],[5,20]); const svg_defs = svg.append("defs"); svg_defs.append("defs") .append("clipPath") .attr("id", "clippath-belt") .append("rect").attr("x",bx_belt.x).attr("y",bx_belt.y).attr("width",bx_belt.w).attr("height",bx_belt.h+10); svg_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", 3) // Width of the marker .attr("markerHeight", 3) // 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 let cur_fb = 0; const bx_ins = [box([2,2],[2,4]), box([3,2],[3,4]), box([4,2],[4,4])]; const g_bx_ins = bx_ins.map((bx,bi)=>{ const g = svg.append("g"); g.append("rect").attr("x",bx.x).attr("y",bx.y).attr("width",bx.w).attr("height",bx.h) .attr("fill","black").attr("stroke","#888").attr("stroke-width","0.5vw").attr("fill-opacity",0) .style("cursor","pointer").style("user-select", "none") .on("click",_=>{ cur_fb = bi; update_input(); items = []; }); g.append("text") .attr("font-size",20).attr("text-anchor","middle").attr("dominant-baseline","middle") .attr("x",bx.x+bx.w/2).attr("y",bx.y+bx.h/2+2).attr("fill","#888").attr("pointer-events","none") .text(`상황(환경) #${bi+1}`); return g; }); const bx_btns = box([5,10],[5,14]); const g_btn_accept = svg.append("foreignObject") .attr("x",bx_btns.x).attr("y",bx_btns.y).attr("width",bx_btns.w/2).attr("height",bx_btns.h) .append("xhtml:div") .attr("class", "btn-3d green") .style("font-size","1.3vw").style("display","flex").style("flex-direction","column") .style("align-items","center").style("justify-content","center").style("text-align","center") .html("수용") .on("click",_=>{ action = "accept"; }); const g_btn_reject = svg.append("foreignObject") .attr("x",bx_btns.x+bx_btns.w/2).attr("y",bx_btns.y).attr("width",bx_btns.w/2).attr("height",bx_btns.h) .append("xhtml:div") .attr("class", "btn-3d red") .style("font-size","1.3vw").style("display","flex").style("flex-direction","column") .style("align-items","center").style("justify-content","center").style("text-align","center") .html("거부") .on("click",e=>{ action = "reject"; }); const bx_btn_fix = box([1,14],[1,14]); const g_btn_fix = svg.append("foreignObject") .attr("x",bx_btn_fix.x).attr("y",bx_btn_fix.y).attr("width",bx_btn_fix.w).attr("height",bx_btn_fix.h) .append("xhtml:div") .attr("class", "btn-3d lightgrey") .style("font-size","15px").style("display","flex").style("flex-direction","column") .style("align-items","center").style("justify-content","center").style("text-align","center").style("height","50%") .html("확정") .on("click",_=>{ action = "fix"; }); const bx_btn_clear = box([1,10],[1,10]); svg.append("foreignObject") .attr("x",bx_btn_clear.x).attr("y",bx_btn_clear.y) .attr("width",bx_btn_clear.w).attr("height",bx_btn_clear.h) .append("xhtml:div") .attr("class", "btn-3d grey") .style("font-size","15px").style("display","flex").style("flex-direction","column") .style("align-items","center").style("justify-content","center").style("text-align","center").style("height","50%") .html("리셋") .on("click",_=>{ action = "clear"; }); const fa_lock_cloned = d3.select(fa_lock).clone(true); const fa_lock_dim = {w:fa_lock_cloned.attr("width"),h:fa_lock_cloned.attr("height")}; fa_lock_cloned.select("path").attr("stroke","none").attr("fill","#eee"); const g_fa_lock = svg.append("g") .attr("transform",`translate(${bx_btn_fix.x+bx_btn_fix.w/2-fa_lock_dim.w/2},${bx_btn_fix.y+bx_btn_fix.h/2-fa_lock_dim.h/2})`); g_fa_lock.node().append(fa_lock_cloned.node()); const bx_in = bx_ins[0]; const g_bx_in = svg.append("rect") .attr("x",bx_in.x).attr("y",bx_in.y).attr("width",bx_in.w).attr("height",bx_in.h) .attr("fill","none").attr("stroke","#eee").attr("stroke-width","0.5vw"); const bx_gen = box([4,6],[4,6]); const g_bx_gen = svg.append("g"); g_bx_gen.append("rect").attr("x",bx_gen.x).attr("y",bx_gen.y).attr("width",bx_gen.w).attr("height",bx_gen.h) .attr("fill","none").attr("stroke","#eee").attr("stroke-width","0.5vw"); const line_in_gen = d3.line().curve(d3.curveStep); const line_points = [[bx_in.x+bx_in.w,bx_in.y+bx_in.h/2],[bx_gen.x,bx_gen.y+bx_gen.h/2]]; const g_line_in_gen = svg.append("path") .attr("fill","none").attr("stroke","#eee").attr("stroke-width","0.4vw") .attr("marker-end", "url(#arrowhead)") .attr("d",line_in_gen(line_points)); const bx_m = box([1,10],[5,14]); const g_bx_m = svg.append("g"); g_bx_m.append("rect").attr("x",bx_m.x).attr("y",bx_m.y).attr("width",bx_m.w).attr("height",bx_m.h) .attr("fill","none").attr("stroke","#eee").attr("stroke-width","0.5vw").attr("rx","1vw").attr("ry","1vw"); const fbs = fv_basis; const fcnt = fbs[0].length; const rand_fval = fval_rand_norm; const rand_fb = d3.randomInt(fbs.length); const rand_deviant = d3.randomInt(4); const belt = [[4,6],[4,7],[4,8],[4,9],[4,10],[4,11],[4,12]]; let id_cnt = 0; let items = []; const g_belt = svg.append("g").attr("clip-path", "url(#clippath-belt)"); function update_input() { g_bx_ins.forEach((g,gi)=>{g.select("text").transition().duration(tick_period/2).attr("fill",cur_fb==gi?"#eee":"#888");}); const bx_in = bx_ins[cur_fb]; const line_points = [[bx_in.x+bx_in.w,bx_in.y+bx_in.h/2],[bx_gen.x,bx_gen.y+bx_gen.h/2]]; g_line_in_gen.transition().duration(tick_period/2).attr("d", line_in_gen(line_points)); g_bx_in.transition().duration(tick_period/2).attr("x",bx_in.x).attr("y",bx_in.y); } function update() { g_btn_accept.style("visibility", fixed ? "hidden":"visible"); g_btn_reject.style("visibility", fixed ? "hidden":"visible"); g_btn_fix.style("visibility", fixed ? "hidden":"visible"); g_fa_lock.style("visibility", fixed ? "visible":"hidden"); g_cm_area.transition().duration(tick_period/2).attr("d",radar_cm.line(cm_fv)); g_cm_axis.transition().duration(tick_period/2).attr("d",radar_cm.axis(cm_fv)); g_cm_loss.transition().duration(tick_period/2).attr("d",radar_cm.area(cm_fv.map((v,i)=>[v,last_fv[i]]))); 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(fcolor).brighter()) .attr("stroke",d=>d3.color(fcolor).darker()) .attr("stroke-width",2) .attr("d",d=>radar.line(d.fv)); g_shape.append("path") .attr("transform",d=>`translate(${cs/2},${cs/2})`) .attr("fill","none") .attr("stroke",d3.color(fcolor).darker()) .attr("stroke-width",1) .attr("d",d=>radar.axis(d.fv)); }, update=>{ 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_input(); update(); d3.interval(elapsed=>{ if(pause) return; if(action == "clear") { items = []; cm_fv = [0,0,0,0,0,0]; last_fv = [0,0,0,0,0,0]; fixed = false; action = ""; } const full = (items.length == belt.length); if (full) { const item = items[items.length-1]; last_fv = item.fv; if (action == "fix") fixed = true; if (fixed || action == "accept" || action == "reject") { if (!fixed && action == "accept") cm_fv = cm_fv.map((v,i)=>(v+last_fv[i])/2); items.pop().res = action; items.forEach(item=>item.iloc+=1); const this_fb = id_cnt > 0 && rand_deviant() == 0 ? rand_fb() : cur_fb; items.unshift({id:id_cnt++,iloc:0,fv:d3.range(fcnt).map(fi=>fbs[this_fb][fi]+rand_fval())}); action = ""; } } else { items.forEach(item=>item.iloc+=1); items = items.filter(item=>item.iloc 0 && rand_deviant() == 0 ? rand_fb() : cur_fb; items.unshift({id:id_cnt++,iloc:0,fv:d3.range(fcnt).map(fi=>fbs[this_fb][fi]+rand_fval())}); } update(); },tick_period); return slide` ${title} ${svg.node()} ${item1} ` }36:T7ad,37:[] 31:{"id":"9b45412fa536cf17","slug":"hl-like-ml-stuck-at-a-single-model","title":"휴먼러닝이 머신러닝이라면: 꼰대의 재정의","thumbnail":"d548b6c07e944f73a4984ee57268c337c4b67ff3987743668910087e974c20bf","access_level":"public","create_time":"$D2025-11-25T20:22:36.971Z","update_time":"$D2025-12-01T12:16:33.412Z","view_time":null,"first_public_time":"$D2025-12-01T03:52:23.128Z","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":602,"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":26,"value":"---\n## 슬라이드 사용법\n\n* 전체화면 보기: 우상단 메뉴 클릭 후 **View** > **View in Fullscreen** 실행\n* 키보드: 화살표 키 '→' 또는 '↓'로 진행, 화살표 키 '←' 또는 '↑'로 역행\n* 마우스: 슬라이드 영역 클릭시 해당 슬라이드 위치로 스크롤 이동","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":23,"value":"first_slide ={\n\nconst title = md`

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

`;\nconst item1 = md`

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

꼰대의 본래 정의

`;\n const item1 = md`

고연령을 이유로 특권을 강요하는 사람
\n\n 고연령 = 단일 모델로 고착화
\n 특권 강요 = 단일 모델의 결과 강요\n

꼰대의 재정의

`;\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":599,"value":"---\n## 부연설명 동영상\n\n\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":551,"value":"---\n## Attribution\n* ${fa_lock} [font awesome - icons - lock](https://fontawesome.com/icons/lock?f=classic&s=solid)","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":20,"value":"tick_period = 1000","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"import_style","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":198,"value":"$36","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":461,"value":"fcolor = \"steelblue\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":452,"value":"fv_basis = [[4,4,8,4,4,4],[4,4,4,4,8,4],[8,4,4,4,4,4]];\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":456,"value":"fval_rand_norm = d3.randomNormal(0,0.5);\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":53,"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":55,"value":"box = mvp_box(grid)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":59,"value":"radar = mvp_radar(grid.cellsize()/2,10)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":33,"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":17,"value":"install_key_bindings_to_document","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":406,"value":"fa_lock = svg``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"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":7,"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"