2d:null 2e:["$","title",null,{"children":"휴먼러닝이 머신러닝이라면: 시스템 1 | Humble Data Miner | Observable"}] 33:T2324,{ const title = md`

시스템1 재구성: 개념 연쇄 전파

`; const item1 = md`

기존에 학습한 개념(모델)의 네트워크 상에서
한번의 순전파(추론)으로 빠르게 판단

`; const colors = d3.schemeTableau10; const [w,h] = [slide_contents_dim[0], 280]; const svg = d3.create("svg").attr("width",w).attr("height",h); //svg.append("rect").attr("width",w).attr("height",h).attr("viewBox", [0, 0, w, h]) // .attr("stroke","grey").attr("fill","none"); const pad = {left:250,right:100}; svg.append("path").attr("stroke","#eee").attr("fill","none").attr("stroke-dasharray","4 4") .attr("d",`M ${pad.left} ${0} V ${h} M ${w-pad.right} ${0} V ${h}`); const net = [ {id:"CAT",in:["C","A","T"],iw:[1/2,1/2,1/2],out:["word:CAT"]}, {id:"DOG",in:["D","O","G"],iw:[1/2,1/2,1/2],out:["word:DOG"]}, {id:"GOAT",in:["G","O","A","T"],iw:[3/8,3/8,3/8,3/8],out:["word:GOAT"]}, ]; net.forEach(n=>{ n.out.push(...net.filter(d=>d.in.includes(n.id)).map(d=>d.id)); }); const inputs = [ {"A":1,"C":1,"D":0,"G":0,"O":0,"T":1}, {"A":0,"C":0,"D":1,"G":1,"O":1,"T":0}, {"A":1,"C":0,"D":0,"G":1,"O":1,"T":1}, ]; let state = "pause"; let cur_bx_in = 0; const bx_ins = d3.range(3).map(i=>({x:20,y:4+i*30,w:120,h:30})); 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","6").attr("fill-opacity",0) .style("cursor","pointer").style("user-select", "none") .on("click",_=>{ cur_bx_in = bi; weights = Object.fromEntries(Object.entries(weights).map(e=>[e[0],0])); update_input(); }); 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 g_bx_in = svg.append("rect") .attr("x",bx_ins[cur_bx_in].x).attr("y",bx_ins[cur_bx_in].y).attr("width",bx_ins[cur_bx_in].w).attr("height",bx_ins[cur_bx_in].h) .attr("fill","none").attr("stroke","#eee").attr("stroke-width","4"); const g_bx_in_line = svg.append("path") .attr("fill","none").attr("stroke","#eee").attr("stroke-width","4"); const g_bx_in_arrow = svg.append("path") .attr("transform",`translate(${pad.left-10},${10})`) .attr("fill","#eee") .attr("d",`M 0 -6 L 12 0 L 0 6 z`); const svg_play = d3.select(fa_play).clone(true).remove().attr("fill","#eee").on("click",_=>{ state="play"; update_input(); }); const svg_pause = d3.select(fa_pause).clone(true).remove().attr("fill","#eee").on("click",_=>{ state="pause"; update_input(); }); const g_btn = svg.append("g").attr("transform", `translate(${pad.left-(pad.left-bx_ins[0].x-bx_ins[0].w)/4-16} ${14})`); g_btn.append(_=>svg_play.node()); g_btn.append(_=>svg_pause.node()); function update_input() { const [bx_in_0,bx_in] = [bx_ins[0],bx_ins[cur_bx_in]]; g_bx_ins.forEach((g,gi)=>{g.select("text").transition().duration(anim_step/2).attr("fill",cur_bx_in==gi?"#eee":"#888");}); g_bx_in_line.transition().duration(anim_step/2) .attr("d", d3.line().curve(d3.curveStep)([[bx_in.x+bx_in.w,bx_in.y+bx_in.h/2],[pad.left-6,10]])); g_bx_in.transition().duration(anim_step/2).attr("y",bx_in.y); svg_play.attr("visibility",state=="play"?"hidden":"visible"); svg_pause.attr("visibility",state=="pause"?"hidden":"visible"); } update_input(); const inodes = net.map((d,i)=> Object.assign({id:d.id,type:"internal",in:d.in},["CAT","DOG","GOAT"].includes(d.id)?({fx:w/2+100,fy:h*(i+1)/(net.length+1)}):({}))); const inodes_inv = new Set(inodes.map(d=>d.id)); const in_nodes = [...new Set(net.map(_=>_.in.filter(d=>!inodes_inv.has(d)).map(d=>d)).flat())] .map(d=>({id:d, fx:pad.left, type:"in", in:[]})); const out_nodes = [...new Set(net.map(_=>_.out.filter(d=>!inodes_inv.has(d)).map(d=>d)).flat())] .map(d=>({id:d, fx:w-pad.right, type:"out", in:net.filter(n=>n.out.includes(d)).map(n=>n.id).flat()})); const nodes = inodes.concat(in_nodes,out_nodes); const hidden = svg.append("g").attr("visibility","hidden"); const node_size = (n=>n.type=="internal"?30:16); nodes.forEach(n=>{ n.ht = hidden.append("text") .attr("font-size",node_size(n)) .attr("dominant-baseline","middle").attr("text-anchor","middle").text(n.id); }); yield svg.node(); nodes.forEach(n=>{ n.bb = n.ht.node().getBBox(); n.bb.r = n.bb.x+n.bb.width; n.bb.b = n.bb.y+n.bb.height; }); const in_links = net.map(t=>t.in.map(s=>({source:s,target:t.id}))).flat(); const out_links = net.map(s=>s.out.map(t=>({source:s.id,target:t}))).flat(); const links = in_links.concat(out_links); let weights = Object.fromEntries(links.map(l=>[l.source,0])); // Add a line for each link, and a circle for each node. const link = svg.append("g").selectAll("path") .data(links) .join("path") .attr("stroke-width", 2).attr("fill","none").attr("stroke",d=>color_interp(weights[d.source])); const arrow = svg.append("g").selectAll("path") .data(links) .join("path") .attr("d",`M 0 -4 L 8 0 L 0 4 z`) .attr("fill",d=>color_interp(weights[d.source])); const node = svg.append("g").attr("stroke", "#eee").attr("stroke-width", 2).selectAll("rect") .data(nodes) .join("rect") .attr("x",d=>d.bb.x).attr("y",d=>d.bb.y).attr("width",d=>d.bb.width).attr("height",d=>d.bb.height) .attr("rx",4).attr("fill", "#333").attr("fill-opacity",d=>d.type=="internal"?0:1); const label = svg.append("g") .attr("fill","#eee").attr("pointer-events", "none") .attr("text-anchor","middle").attr("dominant-baseline","middle").selectAll("text") .data(nodes) .join("text") .attr("font-size",d=>node_size(d)-4) .text(d=>d.id); node.call(d3.drag() .on("start", dragstarted) .on("drag", dragged) .on("end", dragended)); const line = d3.line().x(d => d.x).y(d => d.y).curve(d3.curveBasis); function pop_line(d,hl) { const [x1,y1,x2,y2] = [ d.source.x+d.source.bb.r, d.source.y, d.target.x+d.target.bb.x, d.target.y+d.target.bb.y+d.target.bb.height*(d.target.in.indexOf(d.source.id)+1)/(d.target.in.length+1)]; return [{x:x1,y:y1},{x:x1+hl,y:y1},{x:x2-hl,y:y2},{x:x2,y:y2}]; } function ticked() { link.attr("d", d=>line(pop_line(d,70))); arrow.attr("transform",d=>`translate(${pop_line(d,0)[3].x-8},${pop_line(d,0)[3].y})`); node.attr("transform",d=>`translate(${d.x} ${d.y})`); label.attr("transform",d=>`translate(${d.x} ${d.y})`); } function dragstarted(event) { if (!event.active) simulation.alphaTarget(0.3).restart(); event.subject._fx = event.subject.hasOwnProperty("fx") ? event.subject.fx : null; event.subject._fy = event.subject.hasOwnProperty("fy") ? event.subject.fy : null; event.subject.fx = event.subject.x; event.subject.fy = event.subject.y; } function dragged(event) { event.subject.fx = event.subject._fx !== null ? event.subject._fx : event.x; event.subject.fy = event.subject._fy !== null ? event.subject._fy : event.y; } function dragended(event) { if (!event.active) simulation.alphaTarget(0); event.subject.fx = event.subject._fx != null ? event.subject._fx : null; event.subject.fy = event.subject._fy != null ? event.subject._fy : null; } // Create a simulation with several forces. const simulation = d3.forceSimulation(nodes) .force("link", d3.forceLink(links).id(d => d.id)) .force("charge", d3.forceManyBody().strength(-800)) .force("center", d=>d3.forceCenter(w/2+100, h/2).strength(2)) .on("tick", ticked); invalidation.then(() => simulation.stop()); const rng = d3.randomNormal(0,0.07); d3.interval(elapsed=>{ if(state=="pause") return; function calc(ins,iw,lw) { const wsum = Math.max(0,ins.reduce((acc,cur,i)=>{ acc += iw[i]*lw[cur]; return acc; },0)); const x = (wsum-1)*4; return 1/(1+Math.exp(-x)); } const input = inputs[cur_bx_in]; weights = Object.assign(weights, Object.fromEntries(Object.entries(input).map(e=>[e[0],Math.max(0,Math.min(1,e[1]+rng()))]))); weights = Object.assign(weights, Object.fromEntries(net.map(n=>[n.id, calc(n.in,n.iw,weights)]))); link.transition().duration(anim_step).attr("stroke",d=>color_interp(weights[d.source.id])); arrow.transition().duration(anim_step).attr("fill",d=>color_interp(weights[d.source.id])); },tick_period); yield slide` ${title}

${svg.node()}

${item1} `; }34:T23e4,{ const title = md`

시스템1 운영: 자전거 운전

`; const item1 = md`

한번 익히면 이후에 의식적 개입 불필요
일상 생활의 거의 대부분의 판단 유형

`; const colors = d3.schemeTableau10; const [w,h] = [slide_contents_dim[0], 280]; const svg = d3.create("svg").attr("width",w).attr("height",h); //svg.append("rect").attr("width",w).attr("height",h).attr("viewBox", [0, 0, w, h]) // .attr("stroke","grey").attr("fill","none"); const pad = {left:250,right:100}; svg.append("path").attr("stroke","#eee").attr("fill","none").attr("stroke-dasharray","4 4") .attr("d",`M ${pad.left} ${0} V ${h} M ${w-pad.right} ${0} V ${h}`); const net = [ {id:"좌회전",in:["왼쪽 주행가능","직진","우회전"],iw:[2,-2,-2],out:["왼손 당김"]}, {id:"직진",in:["중앙 주행가능"],iw:[2],out:["페달 밟음"]}, {id:"우회전",in:["오른쪽 주행가능","직진","좌회전"],iw:[2,-2,-2],out:["오른손 당김"]}, ]; net.forEach(n=>{ n.out.push(...net.filter(d=>d.in.includes(n.id)).map(d=>d.id)); }); const inputs = [ {"왼쪽 주행가능":1.0,"중앙 주행가능":0.0,"오른쪽 주행가능":0.0}, {"왼쪽 주행가능":0.5,"중앙 주행가능":1.0,"오른쪽 주행가능":0.5}, {"왼쪽 주행가능":0.5,"중앙 주행가능":0.0,"오른쪽 주행가능":1.0}, ]; let state = "pause"; let cur_bx_in = 0; const bx_ins = d3.range(3).map(i=>({x:20,y:4+i*30,w:120,h:30})); 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","6").attr("fill-opacity",0) .style("cursor","pointer").style("user-select", "none") .on("click",_=>{ cur_bx_in = bi; weights = Object.fromEntries(Object.entries(weights).map(e=>[e[0],0])); update_input(); }); 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 g_bx_in = svg.append("rect") .attr("x",bx_ins[cur_bx_in].x).attr("y",bx_ins[cur_bx_in].y).attr("width",bx_ins[cur_bx_in].w).attr("height",bx_ins[cur_bx_in].h) .attr("fill","none").attr("stroke","#eee").attr("stroke-width","4"); const g_bx_in_line = svg.append("path") .attr("fill","none").attr("stroke","#eee").attr("stroke-width","4"); const g_bx_in_arrow = svg.append("path") .attr("transform",`translate(${pad.left-10},${10})`) .attr("fill","#eee") .attr("d",`M 0 -6 L 12 0 L 0 6 z`); const svg_play = d3.select(fa_play).clone(true).remove().attr("fill","#eee").on("click",_=>{ state="play"; update_input(); }); const svg_pause = d3.select(fa_pause).clone(true).remove().attr("fill","#eee").on("click",_=>{ state="pause"; update_input(); }); const g_btn = svg.append("g").attr("transform", `translate(${pad.left-(pad.left-bx_ins[0].x-bx_ins[0].w)/4-16} ${14})`); g_btn.append(_=>svg_play.node()); g_btn.append(_=>svg_pause.node()); function update_input() { const [bx_in_0,bx_in] = [bx_ins[0],bx_ins[cur_bx_in]]; g_bx_ins.forEach((g,gi)=>{g.select("text").transition().duration(anim_step/2).attr("fill",cur_bx_in==gi?"#eee":"#888");}); g_bx_in_line.transition().duration(anim_step/2) .attr("d", d3.line().curve(d3.curveStep)([[bx_in.x+bx_in.w,bx_in.y+bx_in.h/2],[pad.left-6,10]])); g_bx_in.transition().duration(anim_step/2).attr("y",bx_in.y); svg_play.attr("visibility",state=="play"?"hidden":"visible"); svg_pause.attr("visibility",state=="pause"?"hidden":"visible"); } update_input(); const inodes = net.map((d,i)=> Object.assign({id:d.id,type:"internal",in:d.in},d.id=="직진"?({fx:w/2+100,fy:h/2}):({}))); const inodes_inv = new Set(inodes.map(d=>d.id)); const in_nodes = [...new Set(net.map(_=>_.in.filter(d=>!inodes_inv.has(d)).map(d=>d)).flat())] .map(d=>({id:d, fx:pad.left, type:"in", in:[]})); const out_nodes = [...new Set(net.map(_=>_.out.filter(d=>!inodes_inv.has(d)).map(d=>d)).flat())] .map(d=>({id:d, fx:w-pad.right, type:"out", in:net.filter(n=>n.out.includes(d)).map(n=>n.id).flat()})); const nodes = inodes.concat(in_nodes,out_nodes); const hidden = svg.append("g").attr("visibility","hidden"); const node_size = (n=>n.type=="internal"?30:16); nodes.forEach(n=>{ n.ht = hidden.append("text") .attr("font-size",node_size(n)) .attr("dominant-baseline","middle").attr("text-anchor","middle").text(n.id); }); yield svg.node(); nodes.forEach(n=>{ n.bb = n.ht.node().getBBox(); n.bb.r = n.bb.x+n.bb.width; n.bb.b = n.bb.y+n.bb.height; }); const in_links = net.map(t=>t.in.map(s=>({source:s,target:t.id}))).flat(); const out_links = net.map(s=>s.out.map(t=>({source:s.id,target:t}))).flat(); const links = in_links.concat(out_links); let weights = Object.fromEntries(links.map(l=>[l.source,0])); // Add a line for each link, and a circle for each node. const link = svg.append("g").selectAll("path") .data(links) .join("path") .attr("stroke-width", 2).attr("fill","none").attr("stroke",d=>color_interp(weights[d.source])); const arrow = svg.append("g").selectAll("path") .data(links) .join("path") .attr("d",`M 0 -4 L 8 0 L 0 4 z`) .attr("fill",d=>color_interp(weights[d.source])); const node = svg.append("g").attr("stroke", "#eee").attr("stroke-width", 2).selectAll("rect") .data(nodes) .join("rect") .attr("x",d=>d.bb.x).attr("y",d=>d.bb.y).attr("width",d=>d.bb.width).attr("height",d=>d.bb.height) .attr("rx",4).attr("fill", "#333").attr("fill-opacity",d=>d.type=="internal"?0:1); const label = svg.append("g") .attr("fill","#eee").attr("pointer-events", "none") .attr("text-anchor","middle").attr("dominant-baseline","middle").selectAll("text") .data(nodes) .join("text") .attr("font-size",d=>node_size(d)-4) .text(d=>d.id); node.call(d3.drag() .on("start", dragstarted) .on("drag", dragged) .on("end", dragended)); const line = d3.line().x(d => d.x).y(d => d.y).curve(d3.curveBasis); function pop_line(d,hl) { const [x1,y1,x2,y2] = [ d.source.x+d.source.bb.r, d.source.y, d.target.x+d.target.bb.x, d.target.y+d.target.bb.y+d.target.bb.height*(d.target.in.indexOf(d.source.id)+1)/(d.target.in.length+1)]; return [{x:x1,y:y1},{x:x1+hl,y:y1},{x:x2-hl,y:y2},{x:x2,y:y2}]; } function ticked() { link.attr("d", d=>line(pop_line(d,70))); arrow.attr("transform",d=>`translate(${pop_line(d,0)[3].x-8},${pop_line(d,0)[3].y})`); node.attr("transform",d=>`translate(${d.x} ${d.y})`); label.attr("transform",d=>`translate(${d.x} ${d.y})`); } function dragstarted(event) { if (!event.active) simulation.alphaTarget(0.3).restart(); event.subject._fx = event.subject.hasOwnProperty("fx") ? event.subject.fx : null; event.subject._fy = event.subject.hasOwnProperty("fy") ? event.subject.fy : null; event.subject.fx = event.subject.x; event.subject.fy = event.subject.y; } function dragged(event) { event.subject.fx = event.subject._fx !== null ? event.subject._fx : event.x; event.subject.fy = event.subject._fy !== null ? event.subject._fy : event.y; } function dragended(event) { if (!event.active) simulation.alphaTarget(0); event.subject.fx = event.subject._fx != null ? event.subject._fx : null; event.subject.fy = event.subject._fy != null ? event.subject._fy : null; } // Create a simulation with several forces. const simulation = d3.forceSimulation(nodes) .force("link", d3.forceLink(links).id(d => d.id)) .force("charge", d3.forceManyBody().strength(-800)) .force("center", d=>d3.forceCenter(w/2+100, h/2).strength(2)) .on("tick", ticked); invalidation.then(() => simulation.stop()); const rng = d3.randomNormal(0,0.07); d3.interval(elapsed=>{ if(state=="pause") return; function calc(ins,iw,lw) { const wsum = Math.max(0,ins.reduce((acc,cur,i)=>{ acc += iw[i]*lw[cur]; return acc; },0)); const x = (wsum-1)*4; return 1/(1+Math.exp(-x)); } const input = inputs[cur_bx_in]; weights = Object.assign(weights, Object.fromEntries(Object.entries(input).map(e=>[e[0],Math.max(0,Math.min(1,e[1]+rng()))]))); weights = Object.assign(weights, Object.fromEntries(net.map(n=>[n.id, calc(n.in,n.iw,weights)]))); link.transition().duration(anim_step).attr("stroke",d=>color_interp(weights[d.source.id])); arrow.transition().duration(anim_step).attr("fill",d=>color_interp(weights[d.source.id])); },tick_period); yield slide` ${title}

${svg.node()}

${item1} `; }35:T2485,{ const title = md`

시스템1 운영: 첫인상

`; const item1 = md`

불완전 정보를 완전 정보로 대체
관련 내용: 연상 작용, 자기 강화, 인지적 편안

`; const colors = d3.schemeTableau10; const [w,h] = [slide_contents_dim[0], 280]; const svg = d3.create("svg").attr("width",w).attr("height",h); //svg.append("rect").attr("width",w).attr("height",h).attr("viewBox", [0, 0, w, h]) // .attr("stroke","grey").attr("fill","none"); const pad = {left:250,right:100}; svg.append("path").attr("stroke","#eee").attr("fill","none").attr("stroke-dasharray","4 4") .attr("d",`M ${pad.left} ${0} V ${h} M ${w-pad.right} ${0} V ${h}`); const net = [ {id:"재산",in:["재산요소#1","학벌","직업"],out:[]}, {id:"외모",in:["외모요소#1","직업","선호"],out:[]}, {id:"성격",in:["성격요소#1","외모","직업"],out:[]}, {id:"선호",in:["재산","외모","성격","기분"],out:["첫인상"]} ]; net.forEach(n=>{ n.out.push(...net.filter(d=>d.in.includes(n.id)).map(d=>d.id)); }); const inputs = [ {"재산요소#1":0.0,"학벌":0.0,"직업":0.0,"외모요소#1":0.9,"성격요소#1":0.0,"기분":0.0}, {"재산요소#1":0.0,"학벌":0.6,"직업":0.5,"외모요소#1":0.0,"성격요소#1":0.0,"기분":0.0}, {"재산요소#1":0.0,"학벌":0.0,"직업":0.0,"외모요소#1":0.2,"성격요소#1":0.2,"기분":0.8}, ]; let state = "pause"; let cur_bx_in = 0; const bx_ins = d3.range(3).map(i=>({x:20,y:4+i*30,w:120,h:30})); 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","6").attr("fill-opacity",0) .style("cursor","pointer").style("user-select", "none") .on("click",_=>{ cur_bx_in = bi; weights = Object.fromEntries(Object.entries(weights).map(e=>[e[0],0])); update_input(); }); 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 g_bx_in = svg.append("rect") .attr("x",bx_ins[cur_bx_in].x).attr("y",bx_ins[cur_bx_in].y).attr("width",bx_ins[cur_bx_in].w).attr("height",bx_ins[cur_bx_in].h) .attr("fill","none").attr("stroke","#eee").attr("stroke-width","4"); const g_bx_in_line = svg.append("path") .attr("fill","none").attr("stroke","#eee").attr("stroke-width","4"); const g_bx_in_arrow = svg.append("path") .attr("transform",`translate(${pad.left-10},${10})`) .attr("fill","#eee") .attr("d",`M 0 -6 L 12 0 L 0 6 z`); const svg_play = d3.select(fa_play).clone(true).remove().attr("fill","#eee").on("click",_=>{ state="play"; update_input(); }); const svg_pause = d3.select(fa_pause).clone(true).remove().attr("fill","#eee").on("click",_=>{ state="pause"; update_input(); }); const g_btn = svg.append("g").attr("transform", `translate(${pad.left-(pad.left-bx_ins[0].x-bx_ins[0].w)/4-16} ${14})`); g_btn.append(_=>svg_play.node()); g_btn.append(_=>svg_pause.node()); function update_input() { const [bx_in_0,bx_in] = [bx_ins[0],bx_ins[cur_bx_in]]; g_bx_ins.forEach((g,gi)=>{g.select("text").transition().duration(anim_step/2).attr("fill",cur_bx_in==gi?"#eee":"#888");}); g_bx_in_line.transition().duration(anim_step/2) .attr("d", d3.line().curve(d3.curveStep)([[bx_in.x+bx_in.w,bx_in.y+bx_in.h/2],[pad.left-6,10]])); g_bx_in.transition().duration(anim_step/2).attr("y",bx_in.y); svg_play.attr("visibility",state=="play"?"hidden":"visible"); svg_pause.attr("visibility",state=="pause"?"hidden":"visible"); } update_input(); const inodes = net.map(d=>Object.assign({id:d.id,type:"internal",in:d.in},d.id=="선호"?({fx:w/2+200,fy:h/2}):({}))); const inodes_inv = new Set(inodes.map(d=>d.id)); const in_nodes = [...new Set(net.map(_=>_.in.filter(d=>!inodes_inv.has(d)).map(d=>d)).flat())] .map(d=>({id:d, fx:pad.left, type:"in", in:[]})); const out_nodes = [...new Set(net.map(_=>_.out.filter(d=>!inodes_inv.has(d)).map(d=>d)).flat())] .map(d=>({id:d, fx:w-pad.right, type:"out", in:net.filter(n=>n.out.includes(d)).map(n=>n.id).flat()})); const nodes = inodes.concat(in_nodes,out_nodes); const hidden = svg.append("g").attr("visibility","hidden"); const node_size = (n=>n.type=="internal"?30:16); nodes.forEach(n=>{ n.ht = hidden.append("text") .attr("font-size",node_size(n)) .attr("dominant-baseline","middle").attr("text-anchor","middle").text(n.id); }); yield svg.node(); nodes.forEach(n=>{ n.bb = n.ht.node().getBBox(); n.bb.r = n.bb.x+n.bb.width; n.bb.b = n.bb.y+n.bb.height; }); const in_links = net.map(t=>t.in.map(s=>({source:s,target:t.id}))).flat(); const out_links = net.map(s=>s.out.map(t=>({source:s.id,target:t}))).flat(); const links = in_links.concat(out_links); let weights = Object.fromEntries(links.map(l=>[l.source,0])); // Add a line for each link, and a circle for each node. const link = svg.append("g").selectAll("path") .data(links) .join("path") .attr("stroke-width", 2).attr("fill","none").attr("stroke",d=>color_interp(weights[d.source])); const arrow = svg.append("g").selectAll("path") .data(links) .join("path") .attr("d",`M 0 -4 L 8 0 L 0 4 z`) .attr("fill",d=>color_interp(weights[d.source])); const node = svg.append("g").attr("stroke", "#eee").attr("stroke-width", 2).selectAll("rect") .data(nodes) .join("rect") .attr("x",d=>d.bb.x).attr("y",d=>d.bb.y).attr("width",d=>d.bb.width).attr("height",d=>d.bb.height) .attr("rx",4).attr("fill", "#333").attr("fill-opacity",d=>d.type=="internal"?0:1); const label = svg.append("g") .attr("fill","#eee").attr("pointer-events", "none") .attr("text-anchor","middle").attr("dominant-baseline","middle").selectAll("text") .data(nodes) .join("text") .attr("font-size",d=>node_size(d)-4) .text(d=>d.id); node.call(d3.drag() .on("start", dragstarted) .on("drag", dragged) .on("end", dragended)); const line = d3.line().x(d => d.x).y(d => d.y).curve(d3.curveBasis); function pop_line(d,hl) { const [x1,y1,x2,y2] = [ d.source.x+d.source.bb.r, d.source.y, d.target.x+d.target.bb.x, d.target.y+d.target.bb.y+d.target.bb.height*(d.target.in.indexOf(d.source.id)+1)/(d.target.in.length+1)]; return [{x:x1,y:y1},{x:x1+hl,y:y1},{x:x2-hl,y:y2},{x:x2,y:y2}]; } function ticked() { link.attr("d", d=>line(pop_line(d,70))); arrow.attr("transform",d=>`translate(${pop_line(d,0)[3].x-8},${pop_line(d,0)[3].y})`); node.attr("transform",d=>`translate(${d.x} ${d.y})`); label.attr("transform",d=>`translate(${d.x} ${d.y})`); } function dragstarted(event) { if (!event.active) simulation.alphaTarget(0.3).restart(); event.subject._fx = event.subject.hasOwnProperty("fx") ? event.subject.fx : null; event.subject._fy = event.subject.hasOwnProperty("fy") ? event.subject.fy : null; event.subject.fx = event.subject.x; event.subject.fy = event.subject.y; } function dragged(event) { event.subject.fx = event.subject._fx !== null ? event.subject._fx : event.x; event.subject.fy = event.subject._fy !== null ? event.subject._fy : event.y; } function dragended(event) { if (!event.active) simulation.alphaTarget(0); event.subject.fx = event.subject._fx != null ? event.subject._fx : null; event.subject.fy = event.subject._fy != null ? event.subject._fy : null; } // Create a simulation with several forces. const simulation = d3.forceSimulation(nodes) .force("link", d3.forceLink(links).id(d => d.id)) .force("charge", d3.forceManyBody().strength(-800)) .force("center", d=>d3.forceCenter(w/2, h/2).strength(2)) .on("tick", ticked); invalidation.then(() => simulation.stop()); const rng = d3.randomNormal(0,0.07); d3.interval(elapsed=>{ if(state=="pause") return; function calc(ins, wgts) { const wsum = ins.reduce((acc,cur)=>{ acc += wgts[cur]; return acc; },0); const x = (wsum-1)*3; return 1/(1+Math.exp(-x)); } const input = inputs[cur_bx_in]; weights = Object.assign(weights, Object.fromEntries(Object.entries(input).map(e=>[e[0],Math.max(0,Math.min(1,e[1]+rng()))]))); weights = Object.assign(weights, Object.fromEntries(net.map(n=>[n.id, calc(n.in,weights)]))); link.transition().duration(anim_step).attr("stroke",d=>color_interp(weights[d.source.id])); arrow.transition().duration(anim_step).attr("fill",d=>color_interp(weights[d.source.id])); },tick_period); yield slide` ${title}

${svg.node()}

${item1} `; }36:T23cf,{ const title = md`

시스템1 운영: 소방관(전문가)의 판단

`; const item1 = md`

어떤식이든 기존에 연상 관계를 체득시
직관에 의해 상황에 맞는 즉각적인 판단 가능

`; const colors = d3.schemeTableau10; const [w,h] = [slide_contents_dim[0], 280]; const svg = d3.create("svg").attr("width",w).attr("height",h); //svg.append("rect").attr("width",w).attr("height",h).attr("viewBox", [0, 0, w, h]) // .attr("stroke","grey").attr("fill","none"); const pad = {left:250,right:100}; svg.append("path").attr("stroke","#eee").attr("fill","none").attr("stroke-dasharray","4 4") .attr("d",`M ${pad.left} ${0} V ${h} M ${w-pad.right} ${0} V ${h}`); const net = [ {id:"개방 후 화재진압",in:["밀폐 화재현장","백드래프트 가능성"],iw:[2,-1],out:["실행"]}, {id:"백드래프트 가능성",in:["밀폐 화재현장","실내 공기흡입","짙은 연기","고온 표면","화염 부재"],iw:[0.8,0.3,0.3,0.3,0.3], out:["개방 후 화재진압"]}, ]; net.forEach(n=>{ n.out.push(...net.filter(d=>d.in.includes(n.id)).map(d=>d.id)); }); const inputs = [ {"밀폐 화재현장":0.9,"실내 공기흡입":0.8,"짙은 연기":0.7,"고온 표면":0.8,"화염 부재":0.6}, {"밀폐 화재현장":1.0,"실내 공기흡입":0.2,"짙은 연기":0.1,"고온 표면":0.2,"화염 부재":0.1}, ]; let state = "pause"; let cur_bx_in = 0; const bx_ins = d3.range(inputs.length).map(i=>({x:20,y:4+i*30,w:120,h:30})); 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","6").attr("fill-opacity",0) .style("cursor","pointer").style("user-select", "none") .on("click",_=>{ cur_bx_in = bi; weights = Object.fromEntries(Object.entries(weights).map(e=>[e[0],0])); update_input(); }); 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 g_bx_in = svg.append("rect") .attr("x",bx_ins[cur_bx_in].x).attr("y",bx_ins[cur_bx_in].y).attr("width",bx_ins[cur_bx_in].w).attr("height",bx_ins[cur_bx_in].h) .attr("fill","none").attr("stroke","#eee").attr("stroke-width","4"); const g_bx_in_line = svg.append("path") .attr("fill","none").attr("stroke","#eee").attr("stroke-width","4"); const g_bx_in_arrow = svg.append("path") .attr("transform",`translate(${pad.left-10},${10})`) .attr("fill","#eee") .attr("d",`M 0 -6 L 12 0 L 0 6 z`); const svg_play = d3.select(fa_play).clone(true).remove().attr("fill","#eee").on("click",_=>{ state="play"; update_input(); }); const svg_pause = d3.select(fa_pause).clone(true).remove().attr("fill","#eee").on("click",_=>{ state="pause"; update_input(); }); const g_btn = svg.append("g").attr("transform", `translate(${pad.left-(pad.left-bx_ins[0].x-bx_ins[0].w)/4-16} ${14})`); g_btn.append(_=>svg_play.node()); g_btn.append(_=>svg_pause.node()); function update_input() { const [bx_in_0,bx_in] = [bx_ins[0],bx_ins[cur_bx_in]]; g_bx_ins.forEach((g,gi)=>{g.select("text").transition().duration(anim_step/2).attr("fill",cur_bx_in==gi?"#eee":"#888");}); g_bx_in_line.transition().duration(anim_step/2) .attr("d", d3.line().curve(d3.curveStep)([[bx_in.x+bx_in.w,bx_in.y+bx_in.h/2],[pad.left-6,10]])); g_bx_in.transition().duration(anim_step/2).attr("y",bx_in.y); svg_play.attr("visibility",state=="play"?"hidden":"visible"); svg_pause.attr("visibility",state=="pause"?"hidden":"visible"); } update_input(); const inodes = net.map((d,i)=> Object.assign({id:d.id,type:"internal",in:d.in},d.id=="백드래프트 가능성"?({fx:w/2+100,fy:h/2}):({}))); const inodes_inv = new Set(inodes.map(d=>d.id)); const in_nodes = [...new Set(net.map(_=>_.in.filter(d=>!inodes_inv.has(d)).map(d=>d)).flat())] .map(d=>({id:d, fx:pad.left, type:"in", in:[]})); const out_nodes = [...new Set(net.map(_=>_.out.filter(d=>!inodes_inv.has(d)).map(d=>d)).flat())] .map(d=>({id:d, fx:w-pad.right, type:"out", in:net.filter(n=>n.out.includes(d)).map(n=>n.id).flat()})); const nodes = inodes.concat(in_nodes,out_nodes); const hidden = svg.append("g").attr("visibility","hidden"); const node_size = (n=>n.type=="internal"?30:16); nodes.forEach(n=>{ n.ht = hidden.append("text") .attr("font-size",node_size(n)) .attr("dominant-baseline","middle").attr("text-anchor","middle").text(n.id); }); yield svg.node(); nodes.forEach(n=>{ n.bb = n.ht.node().getBBox(); n.bb.r = n.bb.x+n.bb.width; n.bb.b = n.bb.y+n.bb.height; }); const in_links = net.map(t=>t.in.map(s=>({source:s,target:t.id}))).flat(); const out_links = net.map(s=>s.out.map(t=>({source:s.id,target:t}))).flat(); const links = in_links.concat(out_links); let weights = Object.fromEntries(links.map(l=>[l.source,0])); // Add a line for each link, and a circle for each node. const link = svg.append("g").selectAll("path") .data(links) .join("path") .attr("stroke-width", 2).attr("fill","none").attr("stroke",d=>color_interp(weights[d.source])); const arrow = svg.append("g").selectAll("path") .data(links) .join("path") .attr("d",`M 0 -4 L 8 0 L 0 4 z`) .attr("fill",d=>color_interp(weights[d.source])); const node = svg.append("g").attr("stroke", "#eee").attr("stroke-width", 2).selectAll("rect") .data(nodes) .join("rect") .attr("x",d=>d.bb.x).attr("y",d=>d.bb.y).attr("width",d=>d.bb.width).attr("height",d=>d.bb.height) .attr("rx",4).attr("fill", "#333").attr("fill-opacity",d=>d.type=="internal"?0:1); const label = svg.append("g") .attr("fill","#eee").attr("pointer-events", "none") .attr("text-anchor","middle").attr("dominant-baseline","middle").selectAll("text") .data(nodes) .join("text") .attr("font-size",d=>node_size(d)-4) .text(d=>d.id); node.call(d3.drag() .on("start", dragstarted) .on("drag", dragged) .on("end", dragended)); const line = d3.line().x(d => d.x).y(d => d.y).curve(d3.curveBasis); function pop_line(d,hl) { const [x1,y1,x2,y2] = [ d.source.x+d.source.bb.r, d.source.y, d.target.x+d.target.bb.x, d.target.y+d.target.bb.y+d.target.bb.height*(d.target.in.indexOf(d.source.id)+1)/(d.target.in.length+1)]; return [{x:x1,y:y1},{x:x1+hl,y:y1},{x:x2-hl,y:y2},{x:x2,y:y2}]; } function ticked() { link.attr("d", d=>line(pop_line(d,70))); arrow.attr("transform",d=>`translate(${pop_line(d,0)[3].x-8},${pop_line(d,0)[3].y})`); node.attr("transform",d=>`translate(${d.x} ${d.y})`); label.attr("transform",d=>`translate(${d.x} ${d.y})`); } function dragstarted(event) { if (!event.active) simulation.alphaTarget(0.3).restart(); event.subject._fx = event.subject.hasOwnProperty("fx") ? event.subject.fx : null; event.subject._fy = event.subject.hasOwnProperty("fy") ? event.subject.fy : null; event.subject.fx = event.subject.x; event.subject.fy = event.subject.y; } function dragged(event) { event.subject.fx = event.subject._fx !== null ? event.subject._fx : event.x; event.subject.fy = event.subject._fy !== null ? event.subject._fy : event.y; } function dragended(event) { if (!event.active) simulation.alphaTarget(0); event.subject.fx = event.subject._fx != null ? event.subject._fx : null; event.subject.fy = event.subject._fy != null ? event.subject._fy : null; } // Create a simulation with several forces. const simulation = d3.forceSimulation(nodes) .force("link", d3.forceLink(links).id(d => d.id)) .force("charge", d3.forceManyBody().strength(-800)) .force("center", d=>d3.forceCenter(w/2+100, h/2).strength(2)) .on("tick", ticked); invalidation.then(() => simulation.stop()); const rng = d3.randomNormal(0,0.02); d3.interval(elapsed=>{ if(state=="pause") return; function calc(ins,iw,lw) { const wsum = Math.max(0,ins.reduce((acc,cur,i)=>{ acc += iw[i]*lw[cur]; return acc; },0)); const x = (wsum-1)*4; return 1/(1+Math.exp(-x)); } const input = inputs[cur_bx_in]; weights = Object.assign(weights, Object.fromEntries(Object.entries(input).map(e=>[e[0],Math.max(0,Math.min(1,e[1]+rng()))]))); weights = Object.assign(weights, Object.fromEntries(net.map(n=>[n.id, calc(n.in,n.iw,weights)]))); link.transition().duration(anim_step).attr("stroke",d=>color_interp(weights[d.source.id])); arrow.transition().duration(anim_step).attr("fill",d=>color_interp(weights[d.source.id])); },tick_period); yield slide` ${title}

${svg.node()}

${item1} `; }37:[] 31:{"id":"e74b56fc2d0718d3","slug":"hl-like-ml-system-1","title":"휴먼러닝이 머신러닝이라면: 시스템 1","thumbnail":"77798488ecf776bca7cb2f7b2d732348100a841d9ad6d81122080cee95cf9ad3","access_level":"public","create_time":"$D2026-07-16T04:33:07.589Z","update_time":"$D2026-08-04T09:16:40.557Z","view_time":null,"first_public_time":"$D2026-08-03T00:29:53.878Z","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":857,"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":"휴먼러닝이 머신러닝이라면: 시스템 1","cells":[{"id":0,"value":"# 휴먼러닝이 머신러닝이라면: 시스템 1","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":5,"value":"---\n## 슬라이드 사용법\n\n* 전체화면 보기: 우상단 메뉴 클릭 후 **View** > **View in Fullscreen** 실행\n* 키보드: 화살표 키 '→' 또는 '↓'로 진행, 화살표 키 '←' 또는 '↑'로 역행\n* 마우스: 슬라이드 영역 클릭시 해당 슬라이드 위치로 스크롤 이동","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":24,"value":"first_slide = {\n\nconst title = md`

행동경제학편
휴먼러닝이 머신러닝이라면?

`;\nconst item1 = md`

이론의 재구성
\n\n 이론:『생각에 관한 생각』에서 부분 발췌
\n 재구성: 가상의 \"모델 네트워크\"로 사례를 모사\n

Dual Process Theory

`;\n const table = md`

\n\n\n\n \n \n \n\n

System 1 (Type 1)	System 2 (Type 2)
빠르고 즉각적	느리고 신중한
무의식적 직관	의식적 논리
일상의 판단	복잡한 임무

`;\n const item1 = md`

하나의 물리적 사고 체계, 두가지 사고 과정

`;\n return slide`\n${title}\n${table}\n${item1}\n`\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":780,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":483,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":27,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":511,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":579,"value":"{\n\nconst title = md`

시스템1 = [상시모드] 판단의 생산 공장

`;\nconst item1 = md`

\n\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":814,"value":"---\n## Reference\n* [『생각에 관한 생각』(원제: Thinking, Fast and Slow)](https://product.kyobobook.co.kr/detail/S000000597589)\n* [Dual process theory - Wikipedia](https://en.wikipedia.org/wiki/Dual_process_theory)\n\n

\n\n## Attribution\n* [Circle Play Filled Icon | Font Awesome](https://fontawesome.com/icons/classic/solid/circle-play)\n* [Circle Pause Filled Icon | Font Awesome](https://fontawesome.com/icons/classic/solid/circle-pause)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":855,"value":"---\n## 부연설명 동영상\n\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":8,"value":"---\n## Appendix","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":20,"value":"anim_step = 1000","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":427,"value":"tick_period = 1000","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"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"},{"id":29,"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":14,"value":"import_style","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":663,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":316,"value":"color_interp = d3.piecewise(d3.interpolateRgb, [\"grey\", d3.interpolateRdYlBu(0.5), d3.interpolateRdGy(0)]);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":390,"value":"fa_play = svg``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":394,"value":"fa_pause = svg``","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"}],"files":"$W37","stdlib":"1","titling":"auto"}} 32:"$31:body"