2d:null 2e:["$","title",null,{"children":"짧은 머신러닝 안내서 - 협업 필터링 (Collaborative Filtering) | Humble Data Miner | Observable"}] 33:T4b0,{ const [titems,tusers] = [simple_world.items, simple_world.users]; const [litems,lusers] = [W[curr_slide_learn][0],W[curr_slide_learn][1]]; const lvectors = litems.concat(lusers).map((x,i)=>{x.color=colors[i]; return x;}); const qitems = Array.from({length:tusers[0].length}, (x,i)=> "?"); const data = JSON.parse(JSON.stringify(simple_world.data)); let [item_count,user_count] = [0,0]; for (let row of data) if (!row.hasOwnProperty("type")) row.items = qitems; else if (row.type == "user") row.items = lusers[user_count++]; else if (row.type == "item") row.items = litems[item_count++]; let rc = Array.from(titems, (item,r)=> Array.from(tusers, (user,c)=> { return [ litems[r].map((x,i)=>litems[r][i]*lusers[c][i]).reduce((p,c)=>p+c,0) ,item.map((x,i)=>item[i]*user[i]).reduce((p,c)=>p+c,0)]; }) ); console.log(rc); return html`

${make_svg_table(data).node()}

${make_svg_matrix(titems, tusers, rc, 300).node()}

${make_svg_vector3d(lvectors, 400).node()}

`; }34:T4f1,simple_world = { const tableitems = [ {border:false, items:["단맛", "짠맛", "신맛"]}, {type:"item", labelcolor:colors[0], label:"망고", border:true, items:[1, 0, 0]}, {type:"item", labelcolor:colors[1], label:"프레첼", border:true, items:[0, 1, 0]}, {type:"item", labelcolor:colors[2], label:"레몬", border:true, items:[0, 0, 1]}, {border:false, items:["단맛", "짠맛", "신맛"]}, {type:"user", labelcolor:colors[3], label:"단짠광", border:true, items:[0.707,0.707,0]}, {type:"user", labelcolor:colors[4], label:"단신광", border:true, items:[0.707,0,0.707]}, {type:"user", labelcolor:colors[5], label:"짠신광", border:true, items:[0,0.707,0.707]}, ]; let vectors = []; let items = []; let users = []; for (const item of tableitems) { if (!item.hasOwnProperty("type") || !["user","item"].find(x=> x === item.type)) continue; let new_item = item.items; new_item.color = item.labelcolor; vectors.push(new_item); new_item.name = item.label; (item.type == "item" ? items : item.type == "user" ? users:[]).push(new_item); } const ops = ["dot","=","×","+","×","+","×","="]; return {data:tableitems, vector:vectors, users:users, items:items, operations:ops}; }35:Tc62,function make_svg_table(tableitems, pair=[], ops=[], width=300, height=300) { const svg = d3.create("svg").attr("width", width).attr("height", height); const g = svg.append("g").attr("transform", `translate(0,0)`); const maxitems = Math.max(...tableitems.map(x=>x.items.length)); const rw = 275; // row-width const lw = 75; // label-width const bw = rw-lw; // border-width const cw = bw/maxitems; // cell-width const rh = 35; // row-height const cm = 5; // cell-margin const ch = rh-cm; // cell-height let cy = 0; let g_rows = []; // group of labeled rows for (const row of tableitems) { g_rows.push(g.append("g")); const g_row = g_rows[g_rows.length-1]; if (row.border) { g_row.append("rect") .attr("x",lw).attr("width",bw).attr("y",cy).attr("height",ch).attr("rx",5).attr("ry",5) .attr("fill","none").attr("stroke","black"); for (let i = 1; i < maxitems; i++) g_row.append("line").attr("x1",lw+i*cw).attr("y1",cy).attr("x2",lw+i*cw).attr("y2",cy+ch).attr("stroke","black"); } if (row.hasOwnProperty("label")) { if (row.hasOwnProperty("labelcolor")) g_row.append("rect").attr("x",0).attr("width",10).attr("y",cy+(rh-ch)/2).attr("height",ch).attr("fill",row.labelcolor); g_row.append("text").attr("x",10).attr("y",cy+25).attr("font-size",20).text(row.label); } const textoff_y = row.hasOwnProperty("label") ? 25:30; for (const [i,item] of row.items.entries()) { g_row.append("text").attr("x",lw+i*cw+cw/2).attr("y",cy+textoff_y).attr("font-size",20).attr("text-anchor","middle").text(item); } cy += rh; } const op_lw = 3; const g_op = g.append("g"); function add_op_text(g,dx,dy,x,y,text) { return g.append("text") .attr("dominant-baseline","central").attr("text-anchor","middle") .attr("font-weight","bold").attr("font-size",text.length>1?"medium":"x-large").text(text) .attr("dx",dx).attr("dy",dy).attr("x",x).attr("y",y); } if (pair.length==2 && ops.length>=(maxitems+1)*2) { const ly1 = (pair[0]+1)*rh-cm/2; const ly2 = pair[1]*rh-cm/2; const mid_y = (ly1+ly2)/2; g_op.append("line").attr("stroke","black").attr("stroke-width", op_lw) .attr("x1",lw/2).attr("x2",lw/2).attr("y1",ly1).attr("y2",ly2); g_op.append("circle").attr("stroke","black").attr("stroke-width", op_lw).attr("fill","white") .attr("cx",lw/2).attr("cy",mid_y).attr("r",rh/2); add_op_text(g_op,0,0,lw/2,mid_y,ops[0]); add_op_text(g_op,0,0,(3*lw+cw)/4,mid_y,ops[1]); for (let i = 0; i < maxitems; i++) { g_op.append("line").attr("stroke","black").attr("stroke-width", op_lw) .attr("x1",lw+i*cw+cw/2).attr("x2",lw+i*cw+cw/2).attr("y1",ly2).attr("y2",ly1); g_op.append("circle").attr("stroke","black").attr("stroke-width", op_lw).attr("fill","white") .attr("cx",lw+i*cw+cw/2).attr("cy",mid_y).attr("r",rh/2); add_op_text(g_op,0,0,lw+i*cw+cw/2,mid_y,ops[(i+1)*2]) add_op_text(g_op,0,0,lw+(i+1)*cw,mid_y,ops[(i+1)*2+1]) } for (const [i, g_row] of Object.entries(g_rows)) g_row.attr("opacity", pair.find(x=>x==i) ? 1.0 : 0.2); } return svg; }36:Ta48,function make_svg_matrix(items, users, rc, width=300, height=300) { const svg = d3.create("svg").attr("width", width).attr("height", height); const g = svg.append("g"); const rw = 275; // row-width const lw = 75; // label-width (horizontal) const lh = 80; // label-height (vertical) const cs = 55; // cell-size (rectangle) const cm = 10; // cell-margin const rh = cs+cm; // row-height const cw = cs+cm; // column-width let y = lh; for (let r = 0; r < items.length; r++) { const item = items[r]; g.append("rect").attr("x",0).attr("width",10).attr("y",y+cm/2).attr("height",cs).attr("fill",item.color); g.append("text").attr("x",10).attr("y",y+rh/2).attr("dominant-baseline","central").attr("font-size",20).text(item.name); y += rh; } let x = lw; for (let c = 0; c < users.length; c++) { const user = users[c]; const g_vl = g.append("g"); // vertical label g_vl.append("rect").attr("x",5+x).attr("width",10).attr("y",lh+cm/2).attr("height",cs).attr("fill",user.color); g_vl.append("text").attr("x",5+x+10).attr("y",lh+cw/2).attr("dominant-baseline","central").attr("font-size",20).text(user.name); g_vl.attr("transform",`rotate(-90,${x},${lh})`) x += cw; } g.append("rect") .attr("x",lw).attr("width",cw*users.length).attr("y",lh).attr("height",rh*items.length) .attr("stroke","black").attr("fill","none"); for (let i = 1; i < users.length; i++) g.append("line").attr("x1",lw+i*cw).attr("x2",lw+i*cw).attr("y1",lh).attr("y2",lh+rh*items.length).attr("stroke","black"); for (let i = 1; i < items.length; i++) g.append("line").attr("x1",lw).attr("x2",lw+cw*users.length).attr("y1",lh+i*rh).attr("y2",lh+i*rh).attr("stroke","black"); for (let r = 0; r < items.length; r++) { for (let c = 0; c < users.length; c++) { const res = rc[r][c]; const fill_opacity = res[0] != null && res[1] !== null ? Math.min(Math.abs(res[0]-res[1]),1) : 0; g.append("path").attr("fill","red").attr("fill-opacity",fill_opacity).attr("stroke","black") .attr("d",`M ${lw+c*cw} ${lh+(r+1)*rh} v ${-rh} h ${cw} l ${-cw} ${rh}`); if (res[0] !== null) g.append("text").attr("dx",3).attr("x",lw+c*cw+cw/4).attr("y",lh+r*rh+rh/4) .attr("dominant-baseline","central").attr("text-anchor","middle").attr("font-size","medium").text(res[0].toFixed(3)); if (res[1] !== null) g.append("text").attr("dx",-3).attr("x",lw+c*cw+cw*3/4).attr("y",lh+r*rh+rh*3/4) .attr("dominant-baseline","central").attr("text-anchor","middle").attr("font-size","medium").text(res[1].toFixed(3)); } } return svg; }37:Tb7c,function make_svg_vector3d(vectors, width=300, height=300) { const half = Math.min(width,height)/2; const arrowsize = 1/25; const arrowheight = arrowsize*Math.sqrt(3); const scale = half; const origin = [40+half/2,10+half]; const startAngle = {x:-Math.PI/4+Math.PI, y:Math.PI*2.5/4, z:0}; const svg = d3.create("svg").attr("width", width).attr("height", height); svg.call(d3.drag().on('drag', dragged).on('start', dragStart).on('end', dragEnd)); let lines = []; let pts = vectors; for (const v of vectors) { let line = [[0,0,0], [v[0],v[1],v[2]]]; line.color = v.color; lines.push(line); } const axispts = [ [[0,0,0],[1,0,0]], [[0,0,0],[0,1,0]], [[0,0,0],[0,0,1]] ]; var line3d = d33d._3d() .shape('LINE_STRIP').origin(origin).scale(scale) .rotateX(startAngle.x).rotateY(startAngle.y).rotateZ(startAngle.z); var point3d = d33d._3d() .x(d=>d[0]).y(d=>d[1]).z(d=>d[2]) .origin(origin).scale(scale) .rotateX(startAngle.x).rotateY(startAngle.y).rotateZ(startAngle.z); const drawings = {point: point3d(pts), axis: line3d(axispts), vector: line3d(lines)}; const axis = svg.selectAll('path.axis').attr('class', '_3d axis') .data(drawings.axis).join('path').attr('stroke', "black").attr("d", line3d.draw); const line = svg.selectAll('path.line').attr('class','_3d line') .data(drawings.vector).join('path').attr('stroke', d=>d.color).attr("d", line3d.draw); const point = svg.selectAll('circle.point').attr('class', '_3d point') .data(drawings.point).join('circle') .attr('cx',d=>d.projected.x).attr('cy',d=>d.projected.y) .attr('r',3).attr('fill',d=>d.color).attr('stroke','black'); const text = svg.selectAll('text.vector').attr('class', '_3d vector') .data(drawings.point).join('text') .attr('x', d=>d.projected.x).attr('y', d=>d.projected.y) .attr('font-size', 'small').attr('dx','.3em') .text(d=>`(${d[0]}, ${d[1]}, ${d[2]})`); var mx, my, mouseX, mouseY; function dragStart(e){ mx = e.x; my = e.y; } function dragged(e){ mouseX = mouseX || 0; mouseY = mouseY || 0; const rX = (e.y-my+mouseY)*Math.PI/-230+startAngle.x; const rY = (e.x-mx+mouseX)*Math.PI/-230+startAngle.y; const rZ = startAngle.z; const rotated = {point:point3d.rotateX(rX).rotateY(rY).rotateZ(rZ)(pts), axis: line3d.rotateX(rX).rotateY(rY).rotateZ(rZ)(axispts), vector: line3d.rotateX(rX).rotateY(rY).rotateZ(rZ)(lines)}; axis.data(rotated.axis).merge(axis).attr("d", line3d.draw); line.data(rotated.vector).merge(line).attr("d", line3d.draw); point.data(rotated.point).merge(point).attr('cx',d=>d.projected.x).attr('cy',d=>d.projected.y); text.data(rotated.point).merge(text).attr('x', d=>d.projected.x).attr('y', d=>d.projected.y); } function dragEnd(e){ mouseX = e.x - mx + mouseX; mouseY = e.y - my + mouseY; } return svg; }38:T845,function make_svg_model(input,hidden,output,layout=[1/6,5/6], width=300,height=300) { const svg = d3.create("svg").attr("width",width).attr("height",height); svg.append("rect") .attr("x", width*layout[0]).attr("y", 0).attr("width", width*(layout[1]-layout[0])).attr("height", height).attr("rx",15).attr("ry",15) .attr("fill","none").attr("stroke","black").attr("stroke-width",3); for (let i = 0; i < hidden.length; i++) { const px = width*(layout[0]+layout[1])/2; const py = (i+1)*height/(hidden.length+1); svg.append("text") .attr("x",px).attr("y",py) .attr("font-size","large").attr("dominant-baseline","central").attr("text-anchor","middle").text(hidden[i]); } // See https://developer.mozilla.org/en-US/docs/Web/SVG/Element/marker svg .append('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'); for (let i = 0; i < input.length; i++) { const py = (i+1)*height/(input.length+1); svg.append("text") .attr("x",width*layout[0]/2).attr("y",py).attr("dy",-4) .attr("font-size","large").attr("text-anchor","middle").text(input[i]); svg.append('path') .attr('d', d3.line()([[0, py], [width*layout[0]-5, py]])) .attr('stroke', 'black') .attr('marker-end', 'url(#arrow)') .attr('fill', 'none'); } for (let i = 0; i < output.length; i++) { const px = width*layout[1]; const py = (i+1)*height/(output.length+1); svg.append("text") .attr("x",(px+width)/2).attr("y",py).attr("dy",-4) .attr("font-size","large").attr("text-anchor","middle").text(output[i]); if (output[i] == "") continue; svg.append('path') .attr('d', d3.line()([[px, py], [width-5, py]])) .attr('stroke', 'black') .attr('marker-end', 'url(#arrow)') .attr('fill', 'none'); } return svg; }39:[{"id":"37f053e5c132c158558904c5754f3ff3fd5fbcdadeb9a171ffae946b2131bc33f922f529e9b1998bef3e93b474dc759f0774987235e5abf7f329a07b88d42b61","href":"https://static.observableusercontent.com/files/37f053e5c132c158558904c5754f3ff3fd5fbcdadeb9a171ffae946b2131bc33f922f529e9b1998bef3e93b474dc759f0774987235e5abf7f329a07b88d42b61","name":"simple_world_weight_history@8.json","type":"application/json","lastModified":1647423166509.61,"size":2920}] 31:{"id":"0b585d236609686e","slug":"collaborative-filtering","title":"짧은 머신러닝 안내서 - 협업 필터링 (Collaborative Filtering)","thumbnail":"7b06c31522ba4565e0335adeeb7418836090a3c197d34d9b5ef0b785378615e8","access_level":"public","create_time":"$D2022-03-03T17:04:51.462Z","update_time":"$D2022-10-24T12:47:03.241Z","view_time":null,"first_public_time":"$D2022-03-16T12:10:30.192Z","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":1109,"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":"짧은 머신러닝 안내서 - 협업 필터링 (Collaborative Filtering)","cells":[{"id":0,"value":"# 짧은 머신러닝 안내서 - 협업 필터링 (Collaborative Filtering)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":42,"value":"---\n## 추천시스템?\n* 사용자의 기존응답에 근거해 새로운 항목을 추천해주는 시스템\n* 예를들어 넷플릭스 시청영상에 설정한 좋아요(👍), 싫어요(👎)에 따라 다른 영상을 추천\n\n## 협업필터링(Collaborative Filtering)\n* 추천시스템을 만드는 대표적인 머신러닝 알고리즘\n* 항목과 사용자 사이의 연관관계를 통해 각항목과 사용자의 특성(취향)을 학습\n\n## 설명의 흐름\n1. 특성의 표현\n2. 특성으로부터 선호도 계산\n3. (독자퀴즈) 선호도로부터 특성을 추정\n4. (기계학습) 선호도로부터 특성을 역산\n5. 현실의 응용사례\n6. 생각해볼만한것들","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":72,"value":"---\n## 1. 특성의 표현\n* **\"이세계의 맛\"** (설명을 위해 단순한 세계를 상정)\n * 음식에 3가지 서로 다른 맛만 존재하는 세계\n * 망고(단맛), 프레첼(짠맛), 레몬(신맛)\n * 사람의 취향도 3가지 맛의 조합으로만 존재\n * 단짠광, 단신광, 짠신광","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":555,"value":"{\n return html`\n

${make_svg_table(simple_world.data).node()}

${make_svg_vector3d(simple_world.vector,400).node()}

`\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":628,"value":"---\n## 2. 특성으로부터 선호도 계산\n* 선호도는 두 특성의 dot연산으로 계산\n * 같은 특성끼리 곱한것들을 서로 더한다\n * 예를들어 **망고**와 **단짠광** 사이의 선호도는 0.5이다\n * 1\\*0.5 + 0\\*0.5 + 0*0 = 0.5\n * 모든 조합의 선호도를 계산해 선호도표를 만들수 있다","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":732,"value":"viewof curr_slide_pref = Inputs.range([0, simple_world.items.length*simple_world.users.length+1], {label:\"현재 슬라이드\", step: 1, value: 0, format: x => x+1});","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":729,"value":"{\n const [data,items,users,ops] = [simple_world.data, simple_world.items, simple_world.users, simple_world.operations];\n const curpos = curr_slide_pref-1;\n let pair = curpos >= 0 && curpos < items.length*users.length ? [\n data.findIndex(x => x.label == items[Math.floor(curpos/users.length)].name),\n data.findIndex(x => x.label == users[curpos%users.length].name)] : [];\n\n let rc = Array.from(items, (item,r)=>\n Array.from(users, (user,c)=> [\n (r*users.length+c)<=curpos ?\n item.map((x,i)=>item[i]*user[i]).reduce((p,c)=>p+c,0):null\n , null])\n );\n console.log(rc);\n return html`\n

${make_svg_table(data, pair, ops).node()}

${make_svg_matrix(items, users, rc).node()}

`\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":773,"value":"---\n## 3. (독자퀴즈) 선호도로부터 특성을 추정\n* 만약 선호도만 알고 특성이 알려지지 않았다면 거꾸로 추정할수 있을까?","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":804,"value":"viewof show_trivial_answer = Inputs.toggle({label: \"가장 뻔한 답 보기\", value: false})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":793,"value":"{\n const [items,users, vectors] = [simple_world.items, simple_world.users, simple_world.vector];\n const data = JSON.parse(JSON.stringify(simple_world.data));\n const qitems = Array.from({length:users[0].length}, (x,i)=> \"?\")\n for (let row of data)\n if (!show_trivial_answer || !row.hasOwnProperty(\"type\"))\n row.items = qitems;\n \n let rc = Array.from(items, (item,r)=>\n Array.from(users, (user,c)=> { const dot = item.map((x,i)=>item[i]*user[i]).reduce((p,c)=>p+c,0); return [show_trivial_answer?dot:null, dot]; })\n );\n console.log(rc);\n return html`\n

${make_svg_table(data).node()}

${make_svg_matrix(items, users, rc, 300).node()}

${show_trivial_answer ? make_svg_vector3d(vectors, 400).node() : \"\"}

\n`\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":833,"value":"---\n## 4. (기계학습) 선호도로부터 특성을 역산\n* 만약 선호도만 알고 특성이 알려지지 않았다면 거꾸로 역산할수 있을까?\n * 초기특성값(**weights**): 모르므로 임의로 초기화\n * 오류(**loss**): 현재특성값으로 예상된 선호도와 실제 선호도 값의 차이\n * 일반적으로 결과 차이의 제곱합을 사용\n * 학습과정: 오류(**loss**)를 최소화(**minimize**)하는 특성값(**weights**)을 찾는다","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":841,"value":"viewof curr_slide_learn = Inputs.range([0, W.length-1], {label:\"현재 슬라이드\", step: 1, value: 0, format: x => x+1});","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":864,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":895,"value":"* **학습된 특성값**과 **원래의 특성**값이 다르게보여도 결국 **같은결과**이다\n * 특성공간을 회전시킨것과 같으며 특성간의 관계는 유지된다\n* 알고리즘의 이름이 **협업필터링**인 이유?\n * 음식(item)과 사람(user)의 특성을 동시에 상호조정하기 때문이다","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":920,"value":"---\n## 5. 현실의 응용사례 (어느정도의 추정을 포함)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":927,"value":"{\n return html`\n

${make_svg_model([\"게임\",\"사용자\"],[\"소박한데광부\",\"메타크리틱 게임점수기반\",\"게임추천모델\"],[\"평점\"],[1/6,5/6],350,200).node()}

${make_svg_model([\"영화\",\"시청자\"],[\"넷플릭스\",\"추천(👍)/비추천(👎)기반\",\"영화취향일치 표시\"],[\"적합도(%)\"],[1/6,3/4],350,200).node()}

${make_svg_model([\"동영상\",\"시청자\"],[\"유튜브\",\"광고수익기반\",\"추천알고리즘\"],[\"광고기여점수\"],[1/6,2/3],350,200).node()}

`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1028,"value":"1. 소박한데광부의 [메타크리틱 게임점수 추천시스템](https://observablehq.com/@humble-data-miner/metacritic-game-score-recommendation-system)\n2. (**추정**) 넷플릭스의 취향일치 표시\n3. (**추정**) 유튜브의 동영상 우선순위 기준설정","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1035,"value":"---\n## 6. 생각해볼만한 것들\n* 알고리즘에 대해서\n * 선호도 미할당 아이템이 증가할수록 가능한 특성의 가짓수 증가\n * 과적합에 의해 생기는 극단적인 예측값의 증가를 막을 방안\n * 선호도가 최대나 최소값으로 편향된 아이템/사용자의 예측\n * 기존에 알려진 아이템 특성을 활용할 방안\n* 추천시스템의 부작용\n * 자발적인 편향\n * 자신이 선호하는것과 유사한 컨텐츠만 지속적 소비\n * 예를들어 특정장르의 영화만 시청, 특정단체를 맹목적으로 지지\n * 자발적인 선택으로 인한것이기 때문에 딱히 문제로 볼수 없는가?\n * 비자발적인 편향\n * 기업이나 단체의 이해관계에 맞는 컨텐츠를 지속적으로 추천받음\n * 예를들어 지속적인 가짜뉴스의 노출은 사회의 양극화를 초래하지만 기업의 수익에는 도움이 될수 있음\n * 기업에 의해 길들여진 선호와 사고가 가능한가?\n * 기업은 이런 추천시스템을 이해하고있으며 사회적 대응이 가능한가?","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1071,"value":"---\n## 참고자료\n* 활용한 머신러닝 알고리즘: [Wikipedia - Collaborative Filtering](https://en.wikipedia.org/wiki/Collaborative_filtering)\n* 활용한 python 모듈: [Github - pyrecmd](https://github.com/otterrrr/pyrecmd)\n* 활용한 d3.js 플러그인: [Github - d3-3d (D3.js plugin for 3d visualization)](https://github.com/Niekes/d3-3d)\n* 비자발적 편향 관련 영상: [Netflix - The Social Dilemma](https://www.netflix.com/kr-en/title/81254224)\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1108,"value":"---\n## 부연설명 동영상\n\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1084,"value":"---\n## 부록","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":12,"value":"html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":856,"value":"W = FileAttachment(\"simple_world_weight_history@8.json\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"margin = ({top: 20, right: 20, bottom: 20, left: 20})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":242,"value":"d33d = require('https://unpkg.com/d3-3d/build/d3-3d.min.js')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":459,"value":"colors = d3.schemeCategory10","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":613,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":92,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":650,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":249,"value":"$37","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":925,"value":"$38","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W39","stdlib":"1","titling":"auto"}} 32:"$31:body"