2d:null 2e:["$","title",null,{"children":"머신러닝 맛보기 #2: 사람의 신경체계를 흉내내다 | Humble Data Miner | Observable"}] 33:T1316,{ const tbl = Inputs.table(ball_dataset,{ rows:13, header:{0:"(발사각-45°)/100",1:"사거리(m)/10"}, format:{0:x=>x.toFixed(2),1:x=>x.toFixed(2)}, }); const height = 800; const svg_vis = d3.create("svg").attr("viewBox", [0, 0, width, height]); const defs = svg_vis.append("defs"); defs.append('marker') .attr('id', 'cannon-arrow') .attr('viewBox', [0, 0, 20, 20]) .attr('refX', 10).attr('refY', 10).attr('markerWidth', 20).attr('markerHeight', 20) .attr('orient', 'auto-start-reverse') .append('path') .attr('d', d3.line()([[0, 0], [0, 20], [20, 10]])) .attr('stroke', 'black'); defs.append('marker') .attr('id', 'cannon-open-arrow') .attr('viewBox', [0, 0, 20, 20]) .attr('refX', 20).attr('refY', 10).attr('markerWidth', 10).attr('markerHeight', 10) .attr('orient', 'auto-start-reverse') .append('path') .attr('d', d3.line()([[0, 0], [20, 10], [0, 20]])) .attr('stroke', 'black').attr('fill','none'); const margin = {left:50, top:20, right:20, bottom:100}; const org = {x:margin.left,y:height-margin.bottom}; const deg = 45; const rad = deg*math.PI/180; const vel = 10; svg_vis.append('path').attr('stroke','black').attr('fill','none') .attr('d',`M ${org.x} ${org.y} h ${width-30}`).attr('marker-end','url(#cannon-arrow)'); svg_vis.append('text').attr('x',width-margin.right).attr('y',org.y).attr('dy',50).attr("font-size",40) .attr('alignment-baseline','hanging').attr('text-anchor','end').text('사거리(m)'); const g_cannon = svg_vis.append('g').attr('transform',`rotate(${-deg}, ${org.x}, ${org.y})`); g_cannon.append('path').attr('stroke','black').attr('stroke-width',4).attr('fill','none') .attr('d',`M ${org.x} ${org.y} h ${200}`).attr('marker-end','url(#cannon-open-arrow)'); g_cannon.append('rect').attr('x',org.x).attr('y',org.y-20).attr('width',60).attr('height',20*2); g_cannon.append('text').attr('x',200+50).attr('y',org.y).attr('font-size',40).attr('alignment-baseline','middle').attr('text-anchor','start').text("10m/s") const traj = Array.from({length:11},(_,i)=>i).map(x=>{return{x:x,y:math.tan(rad)*x-(9.8*x**2)/(2*vel**2*math.cos(rad)**2)};}); const [xsc,ysc] = [d3.scaleLinear([0,11],[org.x,width-margin.right]),d3.scaleLinear([0,11],[org.y,margin.top])]; const trajline = d3.line().x(d=>xsc(d.x)).y(d=>ysc(d.y)); const xax = [svg_vis.append("g").attr("transform", `translate(0,${height-margin.bottom})`).call(d3.axisBottom(xsc))]; const yax = [svg_vis.append("g").attr("transform", `translate(${margin.left},0)`).call(d3.axisLeft(ysc))]; svg_vis.selectAll(".tick>text").attr('font-size',40); svg_vis.append('path').attr('stroke-width',3).attr('stroke','black').attr('fill','none').attr('stroke-dasharray','10 4') .attr('d',trajline(traj)); const arc = d3.arc().innerRadius(0).outerRadius(100).startAngle(math.PI/2).endAngle(rad); svg_vis.append('g').attr('transform',`translate(${org.x},${org.y})`).append('path') .attr('stroke-width',3).attr('stroke','black').attr('fill','none').attr('d',arc()); svg_vis.append('text').attr('x',org.x).attr('y',org.y).attr('dx',105).attr('dy',-5).text('발사각=45°') .attr('font-size',40).attr('alignment-baseline','baseline').attr('text-anchor','start'); const svg_tgt = d3.create("svg").attr("viewBox", [0, 0, width, height]); { const bd = ball_dataset; const center = {x:margin.left+(width-margin.right)/2}; const bcolor = d3.schemeCategory10[0]; const [xsc,ysc] = [d3.scaleLinear(d3.extent(bd,d=>d[0]),[org.x,width-margin.right]),d3.scaleLinear(d3.extent(bd,d=>d[1]),[org.y,margin.top])]; const xax = [svg_tgt.append("g").attr("transform", `translate(0,${height-margin.bottom})`).call(d3.axisBottom(xsc))]; const yax = [svg_tgt.append("g").attr("transform", `translate(${margin.left+(width-margin.right)/2},0)`).call(d3.axisLeft(ysc))]; svg_tgt.selectAll(".tick>text").attr('font-size',35); const line = d3.line().x(d=>xsc(d[0])).y(d=>ysc(d[1])); svg_tgt.append('path').attr('stroke',bcolor).attr('stroke-width',4).attr('fill','none').attr('d',line(bd)); svg_tgt.selectAll('circle').data(bd).join("circle").attr('cx',d=>xsc(d[0])).attr('cy',d=>ysc(d[1])).attr('r',10).attr('fill',bcolor); svg_tgt.append('text').attr('x',center.x).attr('y',height).attr('dy',-5) .attr('font-size',40).attr('alignment-baseline','baseline').attr('text-anchor','middle').text('(발사각-45°)/100'); svg_tgt.append('text').attr('x',center.x).attr('y',0).attr('dx',20).attr('dy',5) .attr('font-size',40).attr('alignment-baseline','hanging').attr('text-anchor','start').text('사거리(m)/10'); } return html`

${svg_vis.node()}

${tbl}

${svg_tgt.node()}

`; }34:T5dc,loy_dataset = { const org = [ ["B",5.4,"상",18,130,"고가",1], ["C",5.8,"중",22,160,"고가",0], ["D",6.3,"중",20,190,"중가",0], ["D",6.9,"하",24,220,"저가",0], ["B",6.5,"하",20,200,"저가",1], ["C",6.5,"중",16,210,"고가",0], ["D",5.8,"상",15,180,"고가",0], ["C",6.1,"상",17,200,"고가",0], ["B",6.1,"중",20,190,"중가",1], ]; org["header"] = ["제조사","화면크기(인치)","성능","배터리지속시간","무게","가격","선호(1)/비선호(0)"]; const nn_org = [ [1,0,0,5.4,0,0,1,18,130,0,0,1,1], [0,1,0,5.8,0,1,0,22,160,0,0,1,0], [0,0,1,6.3,0,1,0,20,190,0,1,0,0], [0,0,1,6.9,1,0,0,24,220,1,0,0,0], [1,0,0,6.5,1,0,0,20,200,1,0,0,1], [0,1,0,6.5,0,1,0,16,210,0,0,1,0], [0,0,1,5.8,0,0,1,15,180,0,0,1,0], [0,1,0,6.1,0,0,1,17,200,0,0,1,0], [1,0,0,6.1,0,1,0,20,190,0,1,0,1], ]; nn_org["header"] = ["제조사(B사)","제조사(C사)","제조사(D사)","화면크기(인치)","성능(하)","성능(중)","성능(상)","배터리지속시간","무게(g)","가격(저)","가격(중)","가격(고)","선호(1)/비선호(0)"]; const norm = nn_org.map(x=>x.map((_,i)=>i==3?_/10:i==7?_/100:i==8?_/1000:_)); norm["header"] = ["제조사(B사)","제조사(C사)","제조사(D사)","화면크기(인치/10)","성능(하)","성능(중)","성능(상)","배터리지속시간/100","무게(kg)","가격(저)","가격(중)","가격(고)","선호(1)/비선호(0)"]; return {org:org,norm:norm}; }35:T3717,function* draw_and_learn_nn_model( { ld, // layer-depth lw, // layer-width nr=30, // node-radius height=500, // viewbox height inputlabels, outputlabels, dataset=null, weightbiasconstraint = null, weighttextalign = "right", nit = 10000, // number of iterations lr = 0.003, // learning-rate relearn_trigger, updatedelayms = 0, }) { relearn_trigger; const margin = {left:10, right:10, top:50, bottom:10}; height = math.max(height,2.5*nr*lw+margin.top+margin.bottom); const awidth = width - margin.left - margin.right; const aheight = height - margin.top - margin.bottom; const dims = {input:awidth/100, output:awidth/100, inputlabel:awidth/6, outputlabel:awidth/6}; dims.rect = awidth - dims.input - dims.output - dims.inputlabel - dims.outputlabel; const nonneg = weightbiasconstraint=="nonneg"?true:false; const wta = weighttextalign; const udms = updatedelayms; // model dataset & parameters const D = dataset ? math.matrix(dataset) : math.zeros(3,inputlabels.length); const X0 = D.subset(math.index(math.range(0,D.size()[0]), math.range(0,D.size()[1]-1))); const Y = D.subset(math.index(math.range(0,D.size()[0]), D.size()[1]-1)); const randn = d3.randomNormal(0,0.5); const randu = d3.randomUniform(0,0.05); const W = Array.from({length:ld},(_,i)=>math.matrix( Array.from({length:i==ld-1?1:lw},_=> Array.from({length:i==0?inputlabels.length:lw},_=>nonneg?math.abs(randn()):randn())) )); const B = Array.from({length:ld},(_,i)=>math.matrix(Array.from({length:W[i].size()[0]},_=>randu()))); // node annotation plot const canplot = X0.size()[1] == 1; const flatX = math.flatten(math.column(X0,0)).toArray(); const flatY = math.flatten(math.column(Y,0)).toArray(); const xscale = d3.scaleLinear(d3.extent(flatX),[0,2*nr]); const yscale = d3.scaleLinear(d3.extent(flatY),[0,-2*nr]); const plotline = d3.line().x((d,i) => xscale(flatX[i])).y(d => yscale(d)); const predcolor = d3.schemeCategory10[1]; const tgtcolor = d3.schemeCategory10[0]; const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]); // See https://developer.mozilla.org/en-US/docs/Web/SVG/Element/marker const defs = svg.append("defs"); defs.append('marker') .attr('id', 'arrow') .attr('viewBox', [0, 0, 20, 20]) .attr('refX', 10).attr('refY', 10).attr('markerWidth', 10).attr('markerHeight', 10) .attr('orient', 'auto-start-reverse') .append('path') .attr('d', d3.line()([[0, 0], [0, 20], [20, 10]])) .attr('stroke', 'black'); defs.append('marker') .attr('id', 'open-arrow') .attr('viewBox', [0, 0, 20, 20]) .attr('refX', 20).attr('refY', 10).attr('markerWidth', 10).attr('markerHeight', 10) .attr('orient', 'auto-start-reverse') .append('path') .attr('d', d3.line()([[0, 0], [20, 10], [0, 20]])) .attr('stroke', 'black').attr('fill','none'); defs.append('marker') .attr('id', 'bias') .attr('viewBox',[0,0,20,20]) .attr('refX',0).attr('refY',10) .attr('markerWidth', 20).attr('markerHeight', 20) .attr('orient', 'auto-start-reverse') .append('path') .attr('d', "M 0 0 V 20 M 5 4 v 12 M 10 7 v 6") .attr('stroke','black').attr('stroke-width',2); const gnode = defs.append('g').attr('id', 'node'); gnode.append('circle').attr("r",nr).attr("fill","none").attr("stroke","black"); gnode.append('path').attr('d',`M 0 ${-nr} v ${2*nr}`).attr('stroke','black'); gnode.append('text').attr('dx',-2).attr('dy',4).attr("font-size",nr).attr('alignment-baseline','middle').attr('text-anchor','end').text('Σ'); const rnr = nr*0.7; gnode.append('path').attr('d',`M 2 ${rnr/2} h ${rnr/2} l ${rnr/2} ${-rnr}`) .attr('stroke','black').attr('stroke-width',1).attr('fill','none').attr('marker-end', 'url(#open-arrow)'); let gTxtW = []; let gTxtB = []; let gPlotPaths = []; const ginputs = svg.append("g"); const goutputs = svg.append("g"); svg.append("rect") .attr("x", margin.left+dims.input+dims.inputlabel).attr("y", margin.top) .attr("width", dims.rect).attr("height", aheight).attr("rx",15).attr("ry",15) .attr("fill","none").attr("stroke","black").attr("stroke-width",3); const ls = dims.rect/(ld+1); // layer-size in point const calc_y = (i,n)=> (margin.top+(i+1)*aheight/(n+1)-nr/2); const calc_ls = (i)=> (i==0||i==1)?ls/2:ls; for (let i = 0; i < inputlabels.length; i++) { const label = inputlabels[i]; const px = margin.left+dims.input; const py = calc_y(i,inputlabels.length); svg.append("text") .attr("x",px+dims.inputlabel/2).attr("y",py).attr("dy",-5) .attr("font-size",20).attr("alignment-baseline","baseline").attr("text-anchor","middle").text(label); const text = ginputs.append("text") .attr("x",px).attr("y",py) .attr("font-size",20).attr("alignment-baseline","middle").attr("text-anchor","end").text(""); svg.append('path') .attr('d', d3.line()([[px+10, py], [px+dims.inputlabel-10, py]])) .attr('stroke', 'black').attr('fill', 'none') .attr('marker-end', 'url(#arrow)'); } let px = margin.left+dims.input+dims.inputlabel; for (let d = 0; d <= ld; px+=calc_ls(d++)) { const cls = calc_ls(d); // curr-layer-size const [pnr, cnr] = [d==0?0:d==1?4:nr,d==0?4:nr]; // prev-node-radius, curr-node-radius if (d == 0) { // input == layer 0 const clw = W[d].size()[1]; for (let w = 0; w < clw; w++) { const py = calc_y(w,clw); const py_begin = py; svg.append('path') .attr("d", d3.line()([[px+4, py_begin], [px+ls/2-8, py]])) .attr("stroke","black").attr("fill", "none").attr("marker-end", "url(#arrow)"); svg.append('circle') .attr("cx",px+cls).attr("cy",py).attr("r",cnr).attr("fill", "black").attr("stroke","none"); } } else if (d == ld) { // output == layer ${ld} const _w = W[d-1]; const py_e = calc_y(0,1);//margin.top+aheight/2; const [px_b, px_e] = [px,px+cls]; const plw = _w.size()[1]; const pls = calc_ls(d-1); let gTxtWl = []; for (let w = 0; w < plw; w++) { const py_b = calc_y(w,plw); const rad = math.atan2(py_e-py_b, px_e-px_b); const deg = rad*180/math.PI; const [px_begin,py_begin] = [px_b+pnr*math.cos(rad),py_b+pnr*math.sin(rad)]; const [px_end,py_end] = [px_e-cnr*math.cos(rad),py_e-cnr*math.sin(rad)]; const [tx,ty] = [wta=="center"?(px_begin+px_end)/2:px_end,wta=="center"?(py_begin+py_end)/2:py_end]; svg.append('path') .attr("d", d3.line()([[px_begin, py_begin], [px_end, py_end]])) .attr("stroke","black").attr("fill", "none").attr("marker-end", "url(#arrow)"); gTxtWl.push(svg.append("text") .attr("x",tx).attr("y",ty).attr("dy",-2).attr("dx",-4) .attr("font-size",12).attr("alignment-baseline","baseline").attr("text-anchor",wta=="center"?"middle":"end") .attr("transform",`rotate(${deg},${tx},${ty})`).text(`x${_w.get([0,w]).toFixed(2)}`)); } gTxtW.push([gTxtWl]); if(canplot) { const gplot = svg.append('g').attr('transform',`translate(${px_e+nr},${py_e+nr})`); gplot.append('path').attr('d',`M 0 0 h ${2*nr} M ${nr} 0 v ${-2*nr}`).attr('stroke','grey'); gPlotPaths.push([gplot.append('path').attr('stroke-width',3).attr('stroke',predcolor).attr('fill','none')]); // plot predicted Y gPlotPaths.push(gplot.append('path').attr('stroke-width',2).attr('stroke',tgtcolor).attr('fill','none')); // plot target Y } svg.append('use').attr('xlink:href','#node').attr('x',px+cls).attr('y',py_e); const [bx, by_b, by_e] = [px_e-cnr/2,py_e+1.5*cnr,py_e+cnr]; svg.append('path') .attr("d", d3.line()([[bx,by_b],[bx,by_e]])).attr("stroke","black") .attr("marker-start","url(#bias)").attr("marker-end","url(#arrow)"); gTxtB.push([svg.append('text') .attr("x",bx).attr("y",by_e).attr("dx",4).attr("dy",nr/4) .attr("font-size",12).attr("alignment-baseline","middle").attr("text-anchor","start") .text(`${B[d-1].get([0]).toFixed(2)}`)]); svg.append('path') .attr("d", d3.line()([[px+cls+cnr+4, py_e], [px+(cls+ls)-6, py_e]])) .attr("stroke","black").attr("fill", "none").attr("marker-end", "url(#arrow)"); } else { const _w = W[d-1]; const [plw,clw] = [_w.size()[1],_w.size()[0]]; let gTxtWl = []; let gTxtBl = []; let gPlotPl = []; for (let w2 = 0; w2 < clw; w2++) { const py_e = calc_y(w2,clw); const [px_b, px_e] = [px, px+cls]; let gTxtWr = []; for (let w1 = 0; w1 < plw; w1++) { const py_b = calc_y(w1,plw);//margin.top+w1*aheight/lw+cnr; const rad = math.atan2(py_e-py_b, px_e-px_b); const deg = rad*180/math.PI; const [px_begin,py_begin] = [px_b+pnr*math.cos(rad),py_b+pnr*math.sin(rad)]; const [px_end,py_end] = [px_e-cnr*math.cos(rad),py_e-cnr*math.sin(rad)]; const [tx,ty] = [px_end, py_end]; svg.append('path') .attr("d", d3.line()([[px_begin, py_begin], [px_end, py_end]])) .attr("stroke","black").attr("fill", "none").attr("marker-end", "url(#arrow)"); gTxtWr.push(svg.append("text") .attr("x",tx).attr("y",ty).attr("dy",-2).attr("dx",-4) .attr("font-size",12).attr("alignment-baseline","baseline").attr("text-anchor","end") .attr("transform",`rotate(${deg},${tx},${ty})`).text(`x${_w.get([w2,w1]).toFixed(2)}`)); } gTxtWl.push(gTxtWr); svg.append('use').attr('xlink:href','#node').attr('x',px_e).attr('y',py_e); const [bx, by_b, by_e] = [px_e-cnr/3, py_e+1.5*cnr, py_e+cnr]; svg.append('path') .attr("d", d3.line()([[bx,by_b],[bx,by_e]])).attr("stroke","black") .attr("marker-start","url(#bias)").attr("marker-end","url(#arrow)"); gTxtBl.push(svg.append('text') .attr("x",bx).attr("y",by_e).attr("dx",4).attr("dy",nr/4) .attr("font-size",12).attr("alignment-baseline","middle").attr("text-anchor","start") .text(`${B[d-1].get([w2]).toFixed(2)}`)); if(canplot) { const gplot = svg.append('g').attr('transform',`translate(${px_e+nr},${py_e+nr})`); gplot.append('path').attr('d',`M 0 0 h ${2*nr} M ${nr} 0 v ${-2*nr}`).attr('stroke','grey'); gPlotPl.push(gplot.append('path').attr('stroke-width',3).attr('stroke',predcolor).attr('fill','none')); } } gTxtW.push(gTxtWl); gTxtB.push(gTxtBl); gPlotPaths.push(gPlotPl); } } for (let i = 0; i < outputlabels.length; i++) { const label = outputlabels[i]; const labels = label.split(/\r?\n/); const px = margin.left+awidth-dims.output; const py = calc_y(i,outputlabels.length); if(labels.length >= 1) { svg.append("text") .attr("x",px-dims.outputlabel/2).attr("y",py).attr("dy",-5) .attr("font-size",20).attr("alignment-baseline","baseline").attr("text-anchor","middle").text(labels[0]); } if(labels.length > 1) { svg.append("text") .attr("x",px-dims.outputlabels/2).attr("y",py).attr("dy",+5) .attr("font-size",15).attr("alignment-baseline","hanging").attr("text-anchor","middle").text(labels[1]); } const text = goutputs.append("text") .attr("x",px).attr("y",py).attr("dx", 10) .attr("font-size",20).attr("alignment-baseline","middle").attr("text-anchor","start").text(""); svg.append('path') .attr('d', d3.line()([[px-dims.outputlabel+10, py], [px-10, py]])) .attr('stroke', 'black').attr('fill', 'none') .attr('marker-end', 'url(#arrow)'); } function update_parameters(W,B,X) { if (canplot) gPlotPaths[ld].attr('d',plotline(flatY)); for(let d=0; d < ld; d++) { const _w = W[d]; const _b = B[d]; const _x = X[d+1]; for(let r=0; r < _w.size()[0]; r++) { for(let c=0; c < _w.size()[1]; c++) { gTxtW[d][r][c].text(`x${_w.get([r,c]).toFixed(2)}`); } gTxtB[d][r].text(`${_b.get([r]).toFixed(2)}`); if (canplot) gPlotPaths[d][r].attr('d',plotline(math.flatten(math.column(_x,r)).toArray())); } } } const iterlabel = "학습진행도(학습반복횟수):"; const losslabel = "에러제곱합:"; const itertext = svg.append("text") .attr("x",0).attr("y",0).attr("dy",5).attr("alignment-baseline","hanging").attr("text-anchor","start").text(iterlabel); yield svg.node(); const losstext = svg.append("text").attr("x",0).attr("y",itertext.node().getBBox().height).attr("dy",5).attr("alignment-baseline","hanging").attr("text-anchor","start").text(losslabel); function sleep(ms) { const wakeUpTime = Date.now() + ms; while (Date.now() < wakeUpTime) {} } for (let it = 0; it < nit; it++) { // forward propagation let X = [X0]; let R = []; // Relu mask (0 or 1 valued matrix given inputs) for (let d = 0; d < ld; d++) { const WXpB = math.apply(math.multiply(X[d],math.transpose(W[d])),1,a=>math.add(a,B[d])); // WX+B R.push(math.map(WXpB, x=>x>0?1:0)); X.push(math.dotMultiply(WXpB,R[d])); } // backward propagation with gradient update let Gx = math.subtract(X[ld],Y); const loss = math.sum(math.map(Gx,math.square)); for (let d = ld-1; d>=0; d--) { const Gh = math.dotMultiply(R[d],Gx); const Gw = math.multiply(math.transpose(Gh),X[d]); const Gb = math.apply(Gh,0,math.sum); Gx = math.multiply(Gh,W[d]); W[d] = math.subtract(W[d],math.map(Gw,x=>x*lr)); B[d] = math.subtract(B[d],math.map(Gb,x=>x*lr)); if (nonneg) { W[d] = math.map(W[d],x=>x<0?0:x); B[d] = math.map(B[d],b=>b<0?0:b); } } if (it == 0 || ((it+1) % Math.floor(nit/10) == 0)){ sleep(udms); update_parameters(W,B,X); itertext.text(`${iterlabel}${(it+1)*100/nit}%(${it+1}회)`); losstext.text(`${losslabel}${loss.toFixed(3)}`); yield svg.node(); } } return svg.node(); }36:[{"id":"3275776c5470f8e32bc70fa6251c32f514f9bd7bfdfbf1561022a2c5124bf03c8f7622748814294ccf5c549451aa8a20c47c6f9cce1cac1612737197b515aa8e","href":"https://static.observableusercontent.com/files/3275776c5470f8e32bc70fa6251c32f514f9bd7bfdfbf1561022a2c5124bf03c8f7622748814294ccf5c549451aa8a20c47c6f9cce1cac1612737197b515aa8e","name":"ArtificialNeuron.png","type":"image/png","lastModified":1666250839579.205,"size":8081},{"id":"7489ed47202bbab9bba231700e4c33f338ebb72a36fd37c91d8f7985ca27c5dca5f9b8384dfb75e803caf5c663a3e5e84259f871fb5c71eaa8b398b2dd57bb0c","href":"https://static.observableusercontent.com/files/7489ed47202bbab9bba231700e4c33f338ebb72a36fd37c91d8f7985ca27c5dca5f9b8384dfb75e803caf5c663a3e5e84259f871fb5c71eaa8b398b2dd57bb0c","name":"Neuron_by_brgfx_on_freepik.jpg","type":"image/jpeg","lastModified":1666248198842.7,"size":90327}] 31:{"id":"3e139befd8cad14d","slug":"tasting-machine-learning-part-2","title":"머신러닝 맛보기 #2: 사람의 신경체계를 흉내내다","thumbnail":"f750101f2de5a29e406e8979b390c1616490c2c866f67cbf31c6d9ea6f4e4415","access_level":"public","create_time":"$D2022-10-04T12:13:15.804Z","update_time":"$D2022-10-24T12:45:33.549Z","view_time":null,"first_public_time":"$D2022-10-20T08:49:13.667Z","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":1207,"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"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":{"id":"b886df04acb387aa","slug":"short-guide-to-machine-learning","title":"Short Guide to Machine Learning","owner":{"id":"50faa4da52a9ff9b","login":"humble-data-miner","name":"Humble Data Miner"}},"type":"notebook","body":{"title":"머신러닝 맛보기 #2: 사람의 신경체계를 흉내내다","cells":[{"id":0,"value":"# 머신러닝 맛보기 #2: 사람의 신경체계를 흉내내다","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1118,"value":"---\n## 인공 신경세포 네트워크 (인공신경망) 설명에 앞서\n\n* [머신러닝 맛보기 1부](https://observablehq.com/@humble-data-miner/tasting-machine-learning-part-1) 한줄요약: **머신러닝은 데이터기반 모델링이다**\n* 2부에서는 아래 2개 모델을 인공신경망을 이용해 체계적으로 학습해봅니다\n 1. 특정회사에 충성하는 고객모델\n 2. 탄도사거리 계산모델","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1002,"value":"---\n## 실제 신경세포와 인공 신경세포\n\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1014,"value":"{\n const neuron_img = html`

`;\n const artificial_neuron_img = html`

`;\n return html`\n

\n ${neuron_img}\n

\n ${artificial_neuron_img}\n

\n `;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1094,"value":"* 흉내내기의 과정\n 1. **(실제)**신경전달물질의 수용 → **(인공)**입력신호값 전달\n 2. **(실제)**전달된 물질들의 합성 → **(인공)**신호값의 증폭/감쇄 및 합산\n * **(인공)** 각 신호값에 가중치를 곱하고 합(Σ)한다\n * **(인공)** 입력신호1 × 0.71 + 입력신호2 × 0.95 + 입력신호3 × 0.93\n 4. **(실제)**합성된 물질을 분출 → **(인공)**합산된 결과를 제한한후 다음으로 출력\n * **(인공)** 합산결과를 제한하는 여러방식이 존재\n * **(인공)** 여기서는 출력신호값을 항상 0보다 크게 바꿔주는 제한방식 사용","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":909,"value":"---\n## 1. 특정기업에 충성하는 고객모델\n\n* [머신러닝 맛보기 1부의 두번째 사례](https://observablehq.com/@humble-data-miner/tasting-machine-learning-part-1)와 같은 문제\n * 다른조건(성능,가격 등등)에 관계없이 \"B\"사의 휴대폰만을 선호하는 모델\n* 신경세포에 맞춰서 원본데이터의 입력형태와 입력값을 수정\n * 범주형 자료는 각 범주값들을 입력으로 풀어서 표시\n * 예를들어 1개의 제조사 입력(B,C,D) → 3개의 제조사B,제조사C,제조사D 입력으로 풀어서 표시\n * 수치자료는 가능한 -1 ~ 1 사이범위내로 확대 혹은 축소해 표시\n * 예를들어 130g은 1000으로 나눠 0.13으로 표시 (-1에서 1사이)\n * 무게가 130g이라해서 신호의 세기가 130 이라하는것은 비현실적","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":934,"value":"viewof loy_show_original = Inputs.toggle({label: \"원본데이터보기\", value: true})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":925,"value":"{\n const ds = loy_show_original ? loy_dataset[\"org\"] : loy_dataset[\"norm\"];\n const hdr = ds[\"header\"].map(_=>_);\n hdr[hdr.length-1] = html`

${hdr[hdr.length-1]}

`;\n return Inputs.table(ds,\n {\n header:hdr,\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":993,"value":"## 한개의 신경세포로 특정기업선호고객을 학습\n* 학습할 모델\n * 입력(12): 제조사B,제조사C, ... , 가격(고)\n * 출력(1): 선호(1)/비선호(0)\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":945,"value":"viewof relearn_loy = Inputs.button(\"다시학습\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":940,"value":"loy_nn_model = \n{\n const ds = loy_dataset[\"norm\"];\n return draw_and_learn_nn_model(\n {\n ld:1,lw:5,\n inputlabels:ds.header.slice(0,-1),\n outputlabels:ds.header.slice(-1),\n dataset: ds,\n weightbiasconstraint:\"nonneg\",\n weighttextalign:\"center\",\n nit: 10000,\n updatedelayms:500,\n relearn_loy,\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":23,"value":"---\n## 2. 탄도사거리 계산모델\n\n* 신입포병의 탄도사거리 학습상황을 상정\n * 학습할 데이터: 포를 지면에서 0°부터 90°사이로 돌려가며 사거리(m)를 측정\n * 학습할 모델\n * 입력(1): (발사각-45°)/100\n * 출력(1): 사거리(m)/10\n* 단순함을 위한 가정들\n * 진공상에서 탄도사거리 측정(바람이나 공기저항같은 다른 변수없음)\n * 탄속은 10m/s로 고정\n * 포신의 높이 없음 (포는 지면 바로위에서 발사됨)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":652,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":834,"value":"## 신경세포들의 네트워크로 탄도사거리 학습\n* 보다 복잡해진 문제를 위해 다수의 신경세포를 조합해 모델링\n* 인공신경세포망의 구성을 변경할 인자들\n * Wide? 한개의 층을 구성하는 (같은 신호를 받는)신경세포수\n * Deep? 연결할 층들의 개수\n\n### (실습권장) 구성을 변경하거나 같은구성에서 재학습해보세요!","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":550,"value":"viewof relearn_ball = Inputs.button(\"다시학습\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":619,"value":"viewof ball_lw = Inputs.range([1, 8], {label: 'Wide?', step: 1, value: 3})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":617,"value":"viewof ball_ld = Inputs.range([1, 5], {label: 'Deep?', step: 1, value:3})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":613,"value":"draw_and_learn_nn_model(\n {\n ld:ball_ld,lw:ball_lw,\n inputlabels:[\"(발사각-45°)/100\"],\n outputlabels:[\"사거리(m)/10\"],\n dataset:ball_dataset,\n relearn_ball,\n }\n);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":869,"value":"## 탄도사거리 사례로 본 인공신경망 구성의 주안점\n* 개별 신경세포의 흥망성쇠\n * 각 신경세포는 각자 임의의 초기값을 갖고 학습을 시작한다\n * 서로다른 초기값에서 학습한 결과로 활동적인/비활동적인 신경세포로 분화\n * 적절한 초기값을 학습이전에 미리 알수없기 때문에, 비활동적일것으로 예상되는 신경세포들을 포함해 초과구성하는것이 필요\n * 탄도사거리 예에서 3×2개의 신경세포구성으로는 결과가 불확실\n * 탄도사거리 예에서 5×3개의 신경세포구성으로 웬만하면 결과가 좋다\n* 모델의 표현력에 대하여\n * 어쨌든 신경세포를 많이 쓸수록 복잡한 모델을 구성가능하다\n * 하지만 자원사용량과 학습시간도 그에따라 증가\n * Wide하게 만들면 만들수록 모델의 빌딩블록이 많아진다\n * 입력 바로다음 층에서 가장 중요하고 기초적인 빌딩블록 생성\n * Deep하게 만들어 층을 통과할수록 기초적인 블록들의 조합의 조합의 조합의 조합된 복잡한 빌딩블록이 생성된다\n * Deep Learning 이란 명칭은 이런 특성에서 기인, 이름도 거창하네!\n* 따라서 복잡한 데이터를 설명하는 모델을 구성하려면\n * 적어도 입력값들의 개수(입력차원수) 2배수 이상의 Wide구성을 가져가야함(기초적인 빌딩블럭의 확보) \n * 확보된 빌딩블럭들의 조합의 조합의 조합을 통해 복잡한 데이터를 표현할수 있도록 예를들면 3단계정도 이상의 Deep 네트워크가 필요","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":884,"value":"---\n## 마치며\n\n* 3부를 해야할지 고민중에 있습니다\n * 수학없이 설명하는건 여기까지가 한계인듯 하지만 수학은 도구일뿐\n * 하지만 모델일반화(Regularization)란 중요한 주제가 남았기때문에...\n * 추후에 생각이 정리되면 올리겠습니다. 그러나 안되면 못올립니다\n* 허나 당장에 더 알고싶으시다면 입문하기 엄청나게 좋은 강의들이 있습니다\n * [(무료)홍콩과기대 김성훈 교수님이 강의하는 \"모두를 위한 딥러닝\"](https://hunkim.github.io/ml/)\n * [(무료)Stanford대학 Andrew Ng 교수님의 머신러닝 강의](https://www.coursera.org/learn/machine-learning)\n * [(유료)Stanford대학 Andrew Ng 교수님의 딥러닝 특화코스](https://www.coursera.org/learn/neural-networks-deep-learning)\n\n### 머신러닝은 보이는것보다 가까이 있습니다\n### 우리에게 부족한건 데이터와 인프라일뿐입니다\n ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1205,"value":"---\n## 부연설명 동영상\n\n\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1010,"value":"---\n## 참고자료\n* [신경세포(Neuron) 이미지 by brgfx on freepik.com](https://www.freepik.com/free-vector/stem-cell-diagram-white-background_2480958.htm#query=neuron%20cartoon&position=0&from_view=keyword)\n* [Artificial Neural Network(인공신경망) - Wikipedia](https://en.wikipedia.org/wiki/Artificial_neural_network)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":11,"value":"---\n## 부록","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":916,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":407,"value":"ball_dataset = {\n const deg = Array.from({length:90/5+1},(_,i)=>i*5);\n const rad = deg.map(d=>d*math.PI/180);\n return rad.map((r,i)=>[(deg[i]-45)/100,2*10*math.cos(r)*math.sin(r)/9.8]);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":45,"value":"math = require(\"mathjs\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W36","stdlib":"1","titling":"auto"}} 32:"$31:body"