2e:null 2f:["$","title",null,{"children":"휴먼러닝이 머신러닝이라면: 데이터 공간 | Humble Data Miner | Observable"}] 34:T16b5,{ const title = md`

오늘의 재료

`; const item1 = md`

이번화에서는 입력(데이터공간)만을 다룸

`; const [h,w,cs] = [grid.height(), grid.width(), grid.cellsize()]; const svg = d3.create("svg").attr("viewBox", [0, 0, w, h+cs]); //const g_guidelines = draw_guidelines(svg,grid); const svg_defs = svg.append("defs"); svg_defs.append("marker") .attr("id", "arrowhead") // Unique ID for the marker .attr("viewBox", "0 -5 10 10") // Define the coordinate system for the marker .attr("refX", 1) // X-coordinate of the point where the marker connects to the path .attr("refY", 0) // Y-coordinate of the point where the marker connects to the path .attr("markerWidth", 2) // Width of the marker .attr("markerHeight", 2) // Height of the marker .attr("orient", "auto-start-reverse") // Automatically orient the marker along the path .append("path") .attr("d", "M0,-5L10,0L0,5") // Path data for the arrowhead shape .attr("fill", "#eee"); // Fill color of the arrowhead const bx_br = box([5,7],[5,13]); svg.append("path") .attr("opacity",0.5) .attr("stroke","#eee").attr("stroke-width",4).attr("fill","none") .attr("d",makeCurlyBrace(bx_br.x+4,bx_br.y+10,bx_br.x+bx_br.w-4,bx_br.y+10,40,0.5)); const cell_label1 = grid(5,10); svg.append("text") .attr("text-anchor","middle") .attr("transform",`translate(${cell_label1.cx},${cell_label1.bottom+cs-10})`) .attr("fill","#eee").text("입력 (순차데이터)").attr("font-size","30"); const cell_label2 = grid(5,16); svg.append("text") .attr("opacity",0.5) .attr("text-anchor","middle") .attr("transform",`translate(${cell_label2.cx},${cell_label2.bottom+cs-10})`) .attr("fill","#eee").text("모델").attr("font-size",30); const fv_label = d3.range(6).map(i=>`특성#${i+1}`); const bx_cm = box([1,15],[3,17]); const radar_cm = mvp_radar(cs*3/2,10); const cm_fv = fv_label.map(_=>8); const g_cm = svg.append("g") .attr("transform",`translate(${bx_cm.x+bx_cm.w/2},${bx_cm.y+bx_cm.h/2})`); const g_cm_area = g_cm.append("path") .attr("fill","#888") .attr("d",radar_cm.star(cm_fv)); const g_cm_axis_label = g_cm.selectAll("text") .data(radar_cm.point(cm_fv)) .join("text") .attr("x",d=>d[0]).attr("y",d=>d[1]) .attr("text-anchor","middle").attr("dominant-baseline","middle") .attr("font-size",14) .attr("fill","#eee") .text((_,i)=>fv_label[i]); const bx_m = box([1,14],[5,18]); const g_bx_m = svg.append("g"); g_bx_m.append("rect").attr("x",bx_m.x).attr("y",bx_m.y).attr("width",bx_m.w).attr("height",bx_m.h) .attr("fill","none").attr("stroke","#eee").attr("stroke-width","0.5vw").attr("rx","1vw").attr("ry","1vw"); const bx_gen = box([4,6],[4,6]); const g_bx_gen = svg.append("g"); g_bx_gen.append("rect").attr("x",bx_gen.x).attr("y",bx_gen.y).attr("width",bx_gen.w).attr("height",bx_gen.h) .attr("fill","none").attr("stroke","#eee").attr("stroke-width","0.5vw"); const fcnt = fv_label.length; const belt = [[4,6],[4,7],[4,8],[4,9],[4,10],[4,11],[4,12],[4,13],[4,14]]; let id_cnt = 0; let items = d3.range(belt.length).map(i=>({iloc:i,id:belt.length-i-1,fv:d3.range(fcnt).map(fi=>d3.randomInt(8)())})); const g_belt = svg.append("g").attr("clip-path", "url(#clippath-belt2)"); function update() { g_belt.selectChildren("g") .data(items,d=>d.id) .join( enter=> { const g = enter.append("g"); g.attr("transform",d=>{const b=grid.at(belt[d.iloc]); return `translate(${b.left},${b.top})`;}); g.append("path") .attr("stroke","#eee").attr("stroke-width",6).attr("fill","none") .attr("marker-end", "url(#arrowhead)") .attr("d",d=>{const b=grid.at(belt[d.iloc]); return `M ${6} ${b.bottom-b.top} H ${b.right-b.left-10}`}); const g_shape = g.append("g").attr("id","shape"); g_shape.append("path") .attr("transform",d=>`translate(${cs/2},${cs/2})`) .attr("fill",d=>d3.color("cyan")) .attr("d",d=>radar.star(d.fv)); g_shape.append("text") .attr("text-anchor","end") .attr("fill","#eee").attr("font-size",10) .attr("transform",d=>`translate(${cs-4},${cs-6})`) .text(d=>d.id+1); g_shape.append("path") .attr("opacity",0.5) .attr("stroke","#eee").attr("stroke-width",4) .attr("marker-end","url(#arrowhead)") .attr("d",`M ${cs/2} ${-cs+6} v ${cs-18}`); g_shape.append("text") .attr("text-anchor","middle") .attr("font-size",12).attr("fill","#eee") .attr("transform",`translate(${cs/2},${-cs-24})`) .text(d=>`원본`); g_shape.append("text") .attr("text-anchor","middle") .attr("font-size",12).attr("fill","#eee") .attr("transform",`translate(${cs/2},${-cs-10})`) .text(d=>`데이터`); g_shape.append("text") .attr("text-anchor","middle") .attr("font-size",12).attr("fill","#eee") .attr("transform",`translate(${cs/2},${-cs})`) .text(d=>`#${d.id+1}`); }, update=>{ update.transition().duration(tick_period/2) .attr("transform",d=>{ const b=grid.at(belt[d.iloc]); return `translate(${b.left},${b.top})`; }); }, exit=>{ exit.transition().duration(tick_period/2).style("opacity",0).remove() }, ); } update(); return slide` ${title} ${svg.node()} ${item1} `; }35:T1cdb,{ const title = md`

음식 (가장 좁은 데이터 공간)

`; const item1 = md`

탐닉: 기존 음식에 고착, 디테일이 중요
외연: 차별화를 위한 시각, 후각적 요소

`; let cur_fb = 0; const fv_label = ["단맛","짠맛","신맛","쓴맛","감칠맛","매운맛"]; const fvs = [ {b:[7,8,1,1,4,1],c:"orange",n:5}, {b:[6,2,1,1,5,8],c:"tomato",n:6}, {b:[1,1,4,9,1,1],c:"saddlebrown",n:3} ]; const [h,w,cs] = [grid.height(), grid.width(), grid.cellsize()]; const svg = d3.create("svg").attr("viewBox", [0, 0, w, h]); //const g_guidelines = draw_guidelines(svg,grid); let pause = false; const get_play_char = ()=>pause?"▶":"⏸"; svg.append("text").attr("x",grid(0,0).left).attr("y",grid(0,0).bottom+16).attr("fill","#eee").text(get_play_char()) .style("cursor","pointer").style("user-select", "none") .on("click",function(){ pause=!pause; d3.select(this).attr("font-size",pause?"smaller":"").text(get_play_char()); }); const bx_cm = box([1,15],[3,17]); const radar_cm = mvp_radar(cs*3/2,10); const cm_fv = fv_label.map(_=>8); const g_cm = svg.append("g") .attr("transform",`translate(${bx_cm.x+bx_cm.w/2},${bx_cm.y+bx_cm.h/2})`); const g_cm_area = g_cm.append("path") .attr("fill","#888") .attr("d",radar_cm.star(cm_fv)); const g_cm_axis_label = g_cm.selectAll("text") .data(radar_cm.point(cm_fv)) .join("text") .attr("x",d=>d[0]).attr("y",d=>d[1]) .attr("text-anchor","middle").attr("dominant-baseline","middle") .attr("font-size",14) .attr("fill","#eee") .text((_,i)=>fv_label[i]); const bx_belt = box([0,7],[5,13]); const svg_defs = svg.append("defs"); svg_defs.append("defs") .append("clipPath") .attr("id", "clippath-belt1") .append("rect").attr("x",bx_belt.x).attr("y",bx_belt.y).attr("width",bx_belt.w).attr("height",bx_belt.h+10); svg_defs.append("marker") .attr("id", "arrowhead1") // Unique ID for the marker .attr("viewBox", "0 -5 10 10") // Define the coordinate system for the marker .attr("refX",10) // X-coordinate of the point where the marker connects to the path .attr("refY", 0) // Y-coordinate of the point where the marker connects to the path .attr("markerWidth", 3) // Width of the marker .attr("markerHeight", 3) // Height of the marker .attr("orient", "auto-start-reverse") // Automatically orient the marker along the path .append("path") .attr("d", "M0,-5L10,0L0,5") // Path data for the arrowhead shape .attr("fill", "#eee"); // Fill color of the arrowhead const bx_ins = [box([2,2],[2,4]), box([3,2],[3,4]), box([4,2],[4,4])]; const g_bx_ins = bx_ins.map((bx,bi)=>{ const g = svg.append("g"); g.append("rect").attr("x",bx.x).attr("y",bx.y).attr("width",bx.w).attr("height",bx.h) .attr("fill","black").attr("stroke","#888").attr("stroke-width","0.5vw").attr("fill-opacity",0) .style("cursor","pointer").style("user-select", "none") .on("click",_=>{ cur_fb = bi; items = []; id_cnt = 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 bx_in = bx_ins[0]; const g_bx_in = svg.append("rect") .attr("x",bx_in.x).attr("y",bx_in.y).attr("width",bx_in.w).attr("height",bx_in.h) .attr("fill","none").attr("stroke","#eee").attr("stroke-width","0.5vw"); const bx_gen = box([4,6],[4,6]); const g_bx_gen = svg.append("g"); g_bx_gen.append("rect").attr("x",bx_gen.x).attr("y",bx_gen.y).attr("width",bx_gen.w).attr("height",bx_gen.h) .attr("fill","none").attr("stroke","#eee").attr("stroke-width","0.5vw"); const line_in_gen = d3.line().curve(d3.curveStep); const line_points = [[bx_in.x+bx_in.w,bx_in.y+bx_in.h/2],[bx_gen.x,bx_gen.y+bx_gen.h/2]]; const g_line_in_gen = svg.append("path") .attr("fill","none").attr("stroke","#eee").attr("stroke-width","0.4vw") .attr("marker-end", "url(#arrowhead1)") .attr("d",line_in_gen(line_points)); const bx_m = box([1,14],[5,18]); const g_bx_m = svg.append("g"); g_bx_m.append("rect").attr("x",bx_m.x).attr("y",bx_m.y).attr("width",bx_m.w).attr("height",bx_m.h) .attr("fill","none").attr("stroke","#eee").attr("stroke-width","0.5vw").attr("rx","1vw").attr("ry","1vw"); const fcnt = fvs[0].b.length; const belt = [[4,6],[4,7],[4,8],[4,9],[4,10],[4,11],[4,12],[4,13],[4,14]]; let id_cnt = 0; let items = []; const g_belt = svg.append("g").attr("clip-path", "url(#clippath-belt1)"); function update_input() { g_bx_ins.forEach((g,gi)=>{g.select("text").transition().duration(tick_period/2).attr("fill",cur_fb==gi?"#eee":"#888");}); const bx_in = bx_ins[cur_fb]; const line_points = [[bx_in.x+bx_in.w,bx_in.y+bx_in.h/2],[bx_gen.x,bx_gen.y+bx_gen.h/2]]; g_line_in_gen.transition().duration(tick_period/2).attr("d", line_in_gen(line_points)); g_bx_in.transition().duration(tick_period/2).attr("x",bx_in.x).attr("y",bx_in.y); } function update() { g_belt.selectChildren("g") .data(items,d=>d.id) .join( enter=> { const g = enter.append("g"); g.attr("transform",d=>{const b=grid.at(belt[d.iloc]); return `translate(${b.left},${b.top})`;}); g.append("path") .attr("stroke","#eee").attr("stroke-width","0.5vw").attr("fill","none") .attr("d",d=>{const b=grid.at(belt[d.iloc]); return `M ${6} ${b.bottom-b.top} H ${b.right-b.left-6}`}); const g_shape = g.append("g").attr("id","shape"); g_shape.append("path") .attr("transform",d=>`translate(${cs/2},${cs/2})`) .attr("fill",d=>d3.color(fvs[cur_fb].c)) .attr("stroke-width",1) .attr("d",d=>radar.star(d.fv)); g_shape.append("text") .attr("text-anchor","end") .attr("fill","#eee").attr("font-size",10) .attr("transform",d=>`translate(${cs-4},${cs-4})`) .text(d=>d.id+1); }, update=>{ update.transition().duration(tick_period/2) .attr("transform",d=>{ const b=grid.at(belt[d.iloc]); return `translate(${b.left},${b.top})`; }); }, exit=>{ exit.transition().duration(tick_period/2).style("opacity",0).remove() }, ); } update_input(); update(); d3.interval(elapsed=>{ if(pause) return; update(); if(items.length > 0 && items[0].iloc == (belt.length-1) && items[0].id == (fvs[cur_fb].n-1)) { items = []; id_cnt = 0; } items.forEach(item=>item.iloc+=1); items = items.filter(item=>item.ilocfv.b[fi]*(1-id_cnt/fv.n))}); id_cnt += 1; } },tick_period); return slide` ${title} ${svg.node()} ${item1} ` }36:T1eaf,{ const title = md`

음악 (좁은 데이터 공간)

`; const item1 = md`

탐닉: 특정 장르 특화, 익숙한 유행의 반복
외연: 차별화를 위한 퍼포먼스, 메세지 추가

`; let cur_fb = 0; const fv_label = musics.label; const fvs = musics.fvs; const nts = musics.nts; const fcolor = ["tomato","yellow","steelblue"]; const [h,w,cs] = [grid.height(), grid.width(), grid.cellsize()]; const svg = d3.create("svg").attr("viewBox", [0, 0, w, h]); //const g_guidelines = draw_guidelines(svg,grid); let pause = false; const get_play_char = ()=>pause?"▶":"⏸"; svg.append("text").attr("x",grid(0,0).left).attr("y",grid(0,0).bottom+16).attr("fill","#eee").text(get_play_char()) .style("cursor","pointer").style("user-select", "none") .on("click",function(){ pause=!pause; d3.select(this).attr("font-size",pause?"smaller":"").text(get_play_char()); }); const bx_nt = box([1,7],[3,13]); const w_nt = bx_nt.h/7; svg.append("g").selectAll("path") .data([2,3,4,5,6]) .join("path") .attr("fill","none").attr("stroke","#888").attr("stroke-width",4) .attr("d",i=>`M ${bx_nt.x} ${bx_nt.y+bx_nt.h-i*w_nt} H ${bx_nt.x+bx_nt.w}`); const bx_cm = box([1,15],[3,17]); const radar_cm = mvp_radar(cs*3/2,10); const cm_fv = fv_label.map(_=>8); const g_cm = svg.append("g") .attr("transform",`translate(${bx_cm.x+bx_cm.w/2},${bx_cm.y+bx_cm.h/2})`); const g_cm_area = g_cm.append("path") .attr("fill","#888").attr("stroke","none") .attr("d",radar_cm.star(cm_fv)); const g_cm_axis_label = g_cm.selectAll("text") .data(radar_cm.point(cm_fv)) .join("text") .attr("x",d=>d[0]).attr("y",d=>d[1]) .attr("text-anchor","middle").attr("dominant-baseline","middle") .attr("font-size",14) .attr("fill","#eee") .text((_,i)=>fv_label[i]); const bx_belt = box([0,7],[5,13]); const svg_defs = svg.append("defs"); svg_defs.append("defs") .append("clipPath") .attr("id", "clippath-belt2") .append("rect").attr("x",bx_belt.x).attr("y",bx_belt.y).attr("width",bx_belt.w).attr("height",bx_belt.h+10); svg_defs.append("marker") .attr("id", "arrowhead2") // Unique ID for the marker .attr("viewBox", "0 -5 10 10") // Define the coordinate system for the marker .attr("refX",10) // X-coordinate of the point where the marker connects to the path .attr("refY", 0) // Y-coordinate of the point where the marker connects to the path .attr("markerWidth", 3) // Width of the marker .attr("markerHeight", 3) // Height of the marker .attr("orient", "auto-start-reverse") // Automatically orient the marker along the path .append("path") .attr("d", "M0,-5L10,0L0,5") // Path data for the arrowhead shape .attr("fill", "#eee"); // Fill color of the arrowhead const bx_ins = [box([2,2],[2,4]), box([3,2],[3,4]), box([4,2],[4,4])]; const g_bx_ins = bx_ins.map((bx,bi)=>{ const g = svg.append("g"); g.append("rect").attr("x",bx.x).attr("y",bx.y).attr("width",bx.w).attr("height",bx.h) .attr("fill","black").attr("stroke","#888").attr("stroke-width","0.5vw").attr("fill-opacity",0) .style("cursor","pointer").style("user-select", "none") .on("click",_=>{ cur_fb = bi; items = []; id_cnt = 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 bx_in = bx_ins[0]; const g_bx_in = svg.append("rect") .attr("x",bx_in.x).attr("y",bx_in.y).attr("width",bx_in.w).attr("height",bx_in.h) .attr("fill","none").attr("stroke","#eee").attr("stroke-width","0.5vw"); const bx_gen = box([4,6],[4,6]); const g_bx_gen = svg.append("g"); g_bx_gen.append("rect").attr("x",bx_gen.x).attr("y",bx_gen.y).attr("width",bx_gen.w).attr("height",bx_gen.h) .attr("fill","none").attr("stroke","#eee").attr("stroke-width","0.5vw"); const line_in_gen = d3.line().curve(d3.curveStep); const line_points = [[bx_in.x+bx_in.w,bx_in.y+bx_in.h/2],[bx_gen.x,bx_gen.y+bx_gen.h/2]]; const g_line_in_gen = svg.append("path") .attr("fill","none").attr("stroke","#eee").attr("stroke-width","0.4vw") .attr("marker-end", "url(#arrowhead2)") .attr("d",line_in_gen(line_points)); const bx_m = box([1,14],[5,18]); const g_bx_m = svg.append("g"); g_bx_m.append("rect").attr("x",bx_m.x).attr("y",bx_m.y).attr("width",bx_m.w).attr("height",bx_m.h) .attr("fill","none").attr("stroke","#eee").attr("stroke-width","0.5vw").attr("rx","1vw").attr("ry","1vw"); const fcnt = fv_label.length; const belt = [[4,6],[4,7],[4,8],[4,9],[4,10],[4,11],[4,12],[4,13],[4,14]]; let id_cnt = 0; let items = []; const g_belt = svg.append("g").attr("clip-path", "url(#clippath-belt2)"); function update_input() { g_bx_ins.forEach((g,gi)=>{g.select("text").transition().duration(tick_period/2).attr("fill",cur_fb==gi?"#eee":"#888");}); const bx_in = bx_ins[cur_fb]; const line_points = [[bx_in.x+bx_in.w,bx_in.y+bx_in.h/2],[bx_gen.x,bx_gen.y+bx_gen.h/2]]; g_line_in_gen.transition().duration(tick_period/2).attr("d", line_in_gen(line_points)); g_bx_in.transition().duration(tick_period/2).attr("x",bx_in.x).attr("y",bx_in.y); } function update() { g_belt.selectChildren("g") .data(items,d=>d.id) .join( enter=> { const g = enter.append("g"); g.attr("transform",d=>{const b=grid.at(belt[d.iloc]); return `translate(${b.left},${b.top})`;}); g.append("path") .attr("stroke","#eee").attr("stroke-width","0.5vw").attr("fill","none") .attr("d",d=>{const b=grid.at(belt[d.iloc]); return `M ${6} ${b.bottom-b.top} H ${b.right-b.left-6}`}); const g_shape = g.append("g").attr("id","shape"); g_shape.append("path") .attr("transform",d=>`translate(${cs/2},${cs/2})`) .attr("fill",d=>d3.color(fcolor[cur_fb])) .attr("d",d=>radar.star(d.fv)); g_shape.append("text") .attr("text-anchor","end") .attr("fill","#eee").attr("font-size",10) .attr("transform",d=>`translate(${cs-4},${cs-4})`) .text(d=>d.id+1); g_shape.append("ellipse") .attr("transform",d=>`translate(${cs/2},${-d.nt*w_nt/2})`) .attr("visibility",d=>d.nt<0?"hidden":"visible") .attr("rx",w_nt/2).attr("ry",w_nt/3) .attr("fill","none").attr("stroke","#eee").attr("stroke-width",4); }, update=>{ update.transition().duration(tick_period/2) .attr("transform",d=>{ const b=grid.at(belt[d.iloc]); return `translate(${b.left},${b.top})`; }); }, exit=>{ exit.transition().duration(tick_period/2).style("opacity",0).remove() }, ); } update_input(); update(); d3.interval(elapsed=>{ if(pause) return; update(); if(items.length > 0 && items[0].iloc == (belt.length-1) && items[0].id == (fvs[cur_fb].length-1)) { items = []; id_cnt = 0; } items.forEach(item=>item.iloc+=1); items = items.filter(item=>item.iloc영상 (넓은 데이터 공간)

`; const item1 = md`

탐색: 다량의 동시 정보, 미량의 순차 변화
외연: 대사와 음성, 음향효과를 이용한 보조

`; let cur_fb = 0; const lv_dim = videos[0].l.width*videos[0].l.height; const lvr = videos.map(v=>v.lvr); const lvg = videos.map(v=>v.lvg); const lvb = videos.map(v=>v.lvb); const [h,w,cs] = [grid.height(), grid.width(), grid.cellsize()]; const svg = d3.create("svg").attr("viewBox", [0, 0, w, h]); //const g_guidelines = draw_guidelines(svg,grid); let pause = false; const get_play_char = ()=>pause?"▶":"⏸"; svg.append("text").attr("x",grid(0,0).left).attr("y",grid(0,0).bottom+16).attr("fill","#eee").text(get_play_char()) .style("cursor","pointer").style("user-select", "none") .on("click",function(){ pause=!pause; d3.select(this).attr("font-size",pause?"smaller":"").text(get_play_char()); }); const bx_cm = box([1,15],[3,17]); const radar_cm = mvp_radar(cs*3/2,10); const pad = d3.range(lv_dim).map(_=>0); const rep = d3.range(lv_dim).map((_,i)=>i%3==0?8:i%2==0?7:6); const g_cm = svg.append("g") .attr("transform",`translate(${bx_cm.x+bx_cm.w/2},${bx_cm.y+bx_cm.h/2})`); const g_cm_r = g_cm.append("path") .attr("fill",d3.color("tomato").brighter()).attr("stroke","none").attr("stroke-width",1) .attr("d",radar_cm.line(rep.concat(pad).concat(pad))); const g_cm_g = g_cm.append("path") .attr("fill",d3.color("lime").brighter()).attr("stroke","none").attr("stroke-width",1) .attr("d",radar_cm.line(pad.concat(rep).concat(pad))); const g_cm_b = g_cm.append("path") .attr("fill",d3.color("steelblue").brighter()).attr("stroke","none").attr("stroke-width",1) .attr("d",radar_cm.line(pad.concat(pad).concat(rep))); const bx_belt = box([0,7],[5,13]); const svg_defs = svg.append("defs"); svg_defs.append("defs") .append("clipPath") .attr("id", "clippath-belt3") .append("rect").attr("x",bx_belt.x).attr("y",bx_belt.y).attr("width",bx_belt.w).attr("height",bx_belt.h+10); svg_defs.append("marker") .attr("id", "arrowhead3") // Unique ID for the marker .attr("viewBox", "0 -5 10 10") // Define the coordinate system for the marker .attr("refX",10) // X-coordinate of the point where the marker connects to the path .attr("refY", 0) // Y-coordinate of the point where the marker connects to the path .attr("markerWidth", 3) // Width of the marker .attr("markerHeight", 3) // Height of the marker .attr("orient", "auto-start-reverse") // Automatically orient the marker along the path .append("path") .attr("d", "M0,-5L10,0L0,5") // Path data for the arrowhead shape .attr("fill", "#eee"); // Fill color of the arrowhead const bx_ins = [box([2,2],[2,4]), box([3,2],[3,4]), box([4,2],[4,4])]; const g_bx_ins = bx_ins.map((bx,bi)=>{ const g = svg.append("g"); g.append("rect").attr("x",bx.x).attr("y",bx.y).attr("width",bx.w).attr("height",bx.h) .attr("fill","black").attr("stroke","#888").attr("stroke-width","0.5vw").attr("fill-opacity",0) .style("cursor","pointer").style("user-select", "none") .on("click",_=>{ cur_fb = bi; items = []; id_cnt = 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 bx_in = bx_ins[0]; const g_bx_in = svg.append("rect") .attr("x",bx_in.x).attr("y",bx_in.y).attr("width",bx_in.w).attr("height",bx_in.h) .attr("fill","none").attr("stroke","#eee").attr("stroke-width","0.5vw"); const bx_gen = box([4,6],[4,6]); const g_bx_gen = svg.append("g"); g_bx_gen.append("rect").attr("x",bx_gen.x).attr("y",bx_gen.y).attr("width",bx_gen.w).attr("height",bx_gen.h) .attr("fill","none").attr("stroke","#eee").attr("stroke-width","0.5vw"); const line_in_gen = d3.line().curve(d3.curveStep); const line_points = [[bx_in.x+bx_in.w,bx_in.y+bx_in.h/2],[bx_gen.x,bx_gen.y+bx_gen.h/2]]; const g_line_in_gen = svg.append("path") .attr("fill","none").attr("stroke","#eee").attr("stroke-width","0.4vw") .attr("marker-end", "url(#arrowhead3)") .attr("d",line_in_gen(line_points)); const bx_m = box([1,14],[5,18]); const g_bx_m = svg.append("g"); g_bx_m.append("rect").attr("x",bx_m.x).attr("y",bx_m.y).attr("width",bx_m.w).attr("height",bx_m.h) .attr("fill","none").attr("stroke","#eee").attr("stroke-width","0.5vw").attr("rx","1vw").attr("ry","1vw"); const belt = [[4,6],[4,7],[4,8],[4,9],[4,10],[4,11],[4,12],[4,13],[4,14]]; let id_cnt = 0; let items = []; const g_belt = svg.append("g").attr("clip-path", "url(#clippath-belt3)"); function update_input() { g_bx_ins.forEach((g,gi)=>{g.select("text").transition().duration(tick_period/2).attr("fill",cur_fb==gi?"#eee":"#888");}); const bx_in = bx_ins[cur_fb]; const line_points = [[bx_in.x+bx_in.w,bx_in.y+bx_in.h/2],[bx_gen.x,bx_gen.y+bx_gen.h/2]]; g_line_in_gen.transition().duration(tick_period/2).attr("d", line_in_gen(line_points)); g_bx_in.transition().duration(tick_period/2).attr("x",bx_in.x).attr("y",bx_in.y); } function update() { g_belt.selectChildren("g") .data(items,d=>d.id) .join( enter=> { const g = enter.append("g"); g.attr("transform",d=>{const b=grid.at(belt[d.iloc]); return `translate(${b.left},${b.top})`;}); g.append("path") .attr("stroke","#eee").attr("stroke-width","0.5vw").attr("fill","none") .attr("d",d=>{const b=grid.at(belt[d.iloc]); return `M ${6} ${b.bottom-b.top} H ${b.right-b.left-6}`}); const g_shape = g.append("g").attr("id","shape"); g_shape.append("path") .attr("transform",d=>`translate(${cs/2},${cs/2})`) .attr("fill",d=>d3.color("tomato").brighter()) .attr("d",d=>radar.line(d.lvr)); g_shape.append("path") .attr("transform",d=>`translate(${cs/2},${cs/2})`) .attr("fill",d=>d3.color("lime").brighter()) .attr("d",d=>radar.line(d.lvg)); g_shape.append("path") .attr("transform",d=>`translate(${cs/2},${cs/2})`) .attr("fill",d=>d3.color("steelblue").brighter()) .attr("d",d=>radar.line(d.lvb)); g_shape.append("text") .attr("text-anchor","end") .attr("fill","#eee").attr("font-size",10) .attr("transform",d=>`translate(${cs-4},${cs-4})`) .text(d=>d.id+1); g_shape.append("image") .attr("transform",d=>`translate(${0},${-cs})`) .attr("href",d=>d.url) .attr("width",cs) .attr("height",cs); }, update=>{ update.transition().duration(tick_period/2) .attr("transform",d=>{ const b=grid.at(belt[d.iloc]); return `translate(${b.left},${b.top})`; }); }, exit=>{ exit.transition().duration(tick_period/2).style("opacity",0).remove() }, ); } update_input(); update(); d3.interval(elapsed=>{ if(pause) return; update(); if(items.length > 0 && items[0].iloc == (belt.length-1) && items[0].id == (videos[cur_fb].n-1)) { items = []; id_cnt = 0; } items.forEach(item=>item.iloc+=1); items = items.filter(item=>item.iloc문서 (가장 넓은 데이터 공간)

`; const item1 = md`

탐색: 명확한 단일 개념, 완전한 순차 변화
외연: 이해를 돕기 위한 삽화, 도표로 보조

`; let cur_fb = 0; const dict = docs.dict; const edocs = docs.edocs; const wdocs = docs.wdocs; const fcolor = ["wheat","silver","gold"]; const [h,w,cs] = [grid.height(), grid.width(), grid.cellsize()]; const svg = d3.create("svg").attr("viewBox", [0, 0, w, h]); //const g_guidelines = draw_guidelines(svg,grid); let pause = false; const get_play_char = ()=>pause?"▶":"⏸"; svg.append("text").attr("x",grid(0,0).left).attr("y",grid(0,0).bottom+16).attr("fill","#eee").text(get_play_char()) .style("cursor","pointer").style("user-select", "none") .on("click",function(){ pause=!pause; d3.select(this).attr("font-size",pause?"smaller":"").text(get_play_char()); }); const bx_cm = box([1,15],[3,17]); const radar_cm = mvp_radar(cs*3/2,10); const cm_fv = d3.range(Math.min(dict.length,150)).map(_=>8); const g_cm = svg.append("g") .attr("transform",`translate(${bx_cm.x+bx_cm.w/2},${bx_cm.y+bx_cm.h/2})`); const g_cm_area = g_cm.append("path") .attr("fill","#888").attr("stroke","#888").attr("stroke-width",0.2) .attr("d",radar_cm.star(cm_fv)); const cm_pts = radar_cm.point(d3.range(8).map(_=>8)); const cm_labels = d3.range(8).map(i=>({ pt:cm_pts[i], w:dict[Math.floor(dict.length/9*i)] })); const g_cm_axis_label = g_cm.selectAll("text") .data(cm_labels) .join("text") .attr("x",d=>d.pt[0]).attr("y",d=>d.pt[1]) .attr("text-anchor","middle").attr("dominant-baseline","middle") .attr("font-size",14) .attr("fill","#eee") .text(d=>d.w); const bx_belt = box([0,7],[5,13]); const svg_defs = svg.append("defs"); svg_defs.append("defs") .append("clipPath") .attr("id", "clippath-belt4") .append("rect").attr("x",bx_belt.x).attr("y",bx_belt.y).attr("width",bx_belt.w).attr("height",bx_belt.h+10); svg_defs.append("marker") .attr("id", "arrowhead4") // Unique ID for the marker .attr("viewBox", "0 -5 10 10") // Define the coordinate system for the marker .attr("refX",10) // X-coordinate of the point where the marker connects to the path .attr("refY", 0) // Y-coordinate of the point where the marker connects to the path .attr("markerWidth", 3) // Width of the marker .attr("markerHeight", 3) // Height of the marker .attr("orient", "auto-start-reverse") // Automatically orient the marker along the path .append("path") .attr("d", "M0,-5L10,0L0,5") // Path data for the arrowhead shape .attr("fill", "#eee"); // Fill color of the arrowhead const bx_ins = [box([2,2],[2,4]), box([3,2],[3,4]), box([4,2],[4,4])]; const g_bx_ins = bx_ins.map((bx,bi)=>{ const g = svg.append("g"); g.append("rect").attr("x",bx.x).attr("y",bx.y).attr("width",bx.w).attr("height",bx.h) .attr("fill","black").attr("stroke","#888").attr("stroke-width","0.5vw").attr("fill-opacity",0) .style("cursor","pointer").style("user-select", "none") .on("click",_=>{ cur_fb = bi; items = []; id_cnt = 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 bx_in = bx_ins[0]; const g_bx_in = svg.append("rect") .attr("x",bx_in.x).attr("y",bx_in.y).attr("width",bx_in.w).attr("height",bx_in.h) .attr("fill","none").attr("stroke","#eee").attr("stroke-width","0.5vw"); const bx_gen = box([4,6],[4,6]); const g_bx_gen = svg.append("g"); g_bx_gen.append("rect").attr("x",bx_gen.x).attr("y",bx_gen.y).attr("width",bx_gen.w).attr("height",bx_gen.h) .attr("fill","none").attr("stroke","#eee").attr("stroke-width","0.5vw"); const line_in_gen = d3.line().curve(d3.curveStep); const line_points = [[bx_in.x+bx_in.w,bx_in.y+bx_in.h/2],[bx_gen.x,bx_gen.y+bx_gen.h/2]]; const g_line_in_gen = svg.append("path") .attr("fill","none").attr("stroke","#eee").attr("stroke-width","0.4vw") .attr("marker-end", "url(#arrowhead4)") .attr("d",line_in_gen(line_points)); const bx_m = box([1,14],[5,18]); const g_bx_m = svg.append("g"); g_bx_m.append("rect").attr("x",bx_m.x).attr("y",bx_m.y).attr("width",bx_m.w).attr("height",bx_m.h) .attr("fill","none").attr("stroke","#eee").attr("stroke-width","0.5vw").attr("rx","1vw").attr("ry","1vw"); const belt = [[4,6],[4,7],[4,8],[4,9],[4,10],[4,11],[4,12],[4,13],[4,14]]; let id_cnt = 0; let items = []; const g_belt = svg.append("g").attr("clip-path", "url(#clippath-belt4)"); function update_input() { g_bx_ins.forEach((g,gi)=>{g.select("text").transition().duration(tick_period/2).attr("fill",cur_fb==gi?"#eee":"#888");}); const bx_in = bx_ins[cur_fb]; const line_points = [[bx_in.x+bx_in.w,bx_in.y+bx_in.h/2],[bx_gen.x,bx_gen.y+bx_gen.h/2]]; g_line_in_gen.transition().duration(tick_period/2).attr("d", line_in_gen(line_points)); g_bx_in.transition().duration(tick_period/2).attr("x",bx_in.x).attr("y",bx_in.y); } function update() { g_belt.selectChildren("g") .data(items,d=>d.id) .join( enter=> { const g = enter.append("g"); g.attr("transform",d=>{const b=grid.at(belt[d.iloc]); return `translate(${b.left},${b.top})`;}); g.append("path") .attr("stroke","#eee").attr("stroke-width","0.5vw").attr("fill","none") .attr("d",d=>{const b=grid.at(belt[d.iloc]); return `M ${6} ${b.bottom-b.top} H ${b.right-b.left-6}`}); const g_shape = g.append("g").attr("id","shape"); g_shape.append("path") .attr("transform",d=>`translate(${cs/2},${cs/2})`) .attr("fill",d=>d3.color(fcolor[cur_fb])) .attr("stroke",d=>d3.color(fcolor[cur_fb])).attr("stroke-width",1) .attr("d",d=>radar.star(d.fv)); g_shape.append("text") .attr("text-anchor","end") .attr("fill","#eee").attr("font-size",10) .attr("transform",d=>`translate(${cs-4},${cs-4})`) .text(d=>d.id+1); g_shape.append("text") .attr("text-anchor","middle") .attr("fill","#eee").attr("font-size",12) .attr("transform",d=>`translate(${cs/2},${-cs/2})`) .text(d=>d.w); }, update=>{ update.transition().duration(tick_period/2) .attr("transform",d=>{ const b=grid.at(belt[d.iloc]); return `translate(${b.left},${b.top})`; }); }, exit=>{ exit.transition().duration(tick_period/2).style("opacity",0).remove() }, ); } update_input(); update(); d3.interval(elapsed=>{ if(pause) return; update(); if(items.length > 0 && items[0].iloc == (belt.length-1) && items[0].id == (edocs[cur_fb].length-1)) { items = []; id_cnt = 0; } items.forEach(item=>item.iloc+=1); items = items.filter(item=>item.iloci==edocs[cur_fb][id_cnt]?8:0)}); id_cnt += 1; } },tick_period); return slide` ${title} ${svg.node()} ${item1} ` }39:T1538,{ const title = md`

데이터 공간의 크기별 특성 비교

`; const item1 = md`

좁은 공간 → 기발견된 답안의 미세조정
넓은 공간 → 미발견된 답안을 광역탐색

`; const [h,w,cs] = [grid.height(), grid.width(), grid.cellsize()]; const svg = d3.create("svg").attr("viewBox", [0, 0, w, h]).attr("transform",`translate(${0},${cs/2})`); //const g_guidelines = draw_guidelines(svg,grid); const g_global = svg.append("g").attr("transform",`translate(${-cs/2} ${0})`); const bx_ld = box([0,0],[5,2]); svg.append("foreignObject") .attr("x",bx_ld.x).attr("y",bx_ld.y).attr("width",bx_ld.w).attr("height",bx_ld.h) .append("xhtml:div") .style("font-size","30px") .style("display","flex") .style("text-align","center").style("justify-content","center").style("align-items","center").style("height","100%") .html("소수답안
유사성
세부발달
고착화
외연확장"); const bx_rd = box([0,18],[5,20]); svg.append("foreignObject") .attr("x",bx_rd.x).attr("y",bx_rd.y).attr("width",bx_rd.w).attr("height",bx_rd.h) .append("xhtml:div") .style("font-size","30px") .style("display","flex") .style("text-align","center").style("justify-content","center").style("align-items","center").style("height","100%") .html("다수답안
차별성
탐색확장
다변화
외연보조"); const bx_al = box([4,4],[4,17]); const svg_defs = svg.append("defs"); svg_defs.append("marker") .attr("id", "arrowhead5") // Unique ID for the marker .attr("viewBox", "0 -5 10 10") // Define the coordinate system for the marker .attr("refX", 0) // X-coordinate of the point where the marker connects to the path .attr("refY", 0) // Y-coordinate of the point where the marker connects to the path .attr("markerWidth", 6) // Width of the marker .attr("markerHeight", 6) // Height of the marker .attr("orient", "auto-start-reverse") // Automatically orient the marker along the path .append("path") .attr("d", "M0,-5L10,0L0,5") // Path data for the arrowhead shape .attr("fill", "#eee"); // Fill color of the arrowhead g_global.append("path") .attr("fill","none").attr("stroke","#eee").attr("stroke-width",4) .attr("marker-start", "url(#arrowhead5)").attr("marker-end", "url(#arrowhead5)") .attr("d",`M ${bx_al.x} ${bx_al.y} h ${bx_al.w}`); g_global.append("text") .attr("transform",`translate(${bx_al.x},${bx_al.y-8})`) .attr("text-anchor","start").attr("font-size",20).attr("fill","#eee") .text("좁은"); g_global.append("text") .attr("transform",`translate(${bx_al.x+bx_al.w},${bx_al.y-8})`) .attr("text-anchor","end").attr("font-size",20).attr("fill","#eee") .text("넓은"); function append_labels(g,bx,ht,bt) { g.append("text") .attr("transform",`translate(${0},${-bx.h/2})`) .attr("text-anchor","middle").attr("font-size",30) .attr("fill","#eee") .text(ht); g.append("text") .attr("transform",`translate(${0},${bx.h/2+cs/3})`) .attr("text-anchor","middle").attr("dominant-baseline","hanging").attr("font-size",20) .attr("fill","#eee") .text(bt); } const radar_cm = mvp_radar(cs*3/2,10); const bx_fd = box([1,5],[3,7]); const fv_fd = d3.range(6).map(_=>8); const g_fd = g_global.append("g") .attr("transform",`translate(${bx_fd.x+bx_fd.w/2},${bx_fd.y+bx_fd.h/2})`); g_fd.append("path") .attr("fill","#eee").attr("stroke","#eee").attr("stroke-width",0.2) .attr("d",radar_cm.star(fv_fd)); append_labels(g_fd,bx_fd,"음식","(몇 초)"); const bx_ms = box([1,8],[3,10]); const fv_ms = d3.range(7).map(_=>8); const g_ms = g_global.append("g") .attr("transform",`translate(${bx_ms.x+bx_ms.w/2},${bx_ms.y+bx_ms.h/2})`); g_ms.append("path") .attr("fill","#eee").attr("stroke","#eee").attr("stroke-width",0.2) .attr("d",radar_cm.star(fv_ms)); append_labels(g_ms,bx_ms,"음악","(몇 분)"); const bx_vd = box([1,11],[3,13]); const lv_dim = videos[0].l.width*videos[0].l.height; const pad = d3.range(lv_dim).map(_=>0); const rep = d3.range(lv_dim).map((_,i)=>i%3==0?8:i%2==0?7:6); const g_vd = g_global.append("g") .attr("transform",`translate(${bx_vd.x+bx_vd.w/2},${bx_vd.y+bx_vd.h/2})`); g_vd.append("path").attr("fill","tomato") .attr("d",radar_cm.line(rep.concat(pad).concat(pad))); g_vd.append("path").attr("fill","lime") .attr("d",radar_cm.line(pad.concat(rep).concat(pad))); g_vd.append("path").attr("fill","steelblue") .attr("d",radar_cm.line(pad.concat(pad).concat(rep))); append_labels(g_vd,bx_vd,"영상","(몇 분~몇 시간)") const bx_dc = box([1,14],[3,16]); const fv_dc = d3.range(Math.min(docs.dict.length,150)).map(_=>8); const g_dc = g_global.append("g") .attr("transform",`translate(${bx_dc.x+bx_dc.w/2},${bx_dc.y+bx_dc.h/2})`); g_dc.append("path") .attr("fill","#eee").attr("stroke","#eee").attr("stroke-width",0.2) .attr("d",radar_cm.star(fv_dc)); append_labels(g_dc,bx_dc,"문서","(몇 분~몇 일)"); return slide` ${title} ${svg.node()} ${item1} ` }3a:T5cb,videos = { const videos = [ {h:new GifReader(new Uint8Array(homer_100)),l:new GifReader(new Uint8Array(homer_10))}, {h:new GifReader(new Uint8Array(snorlax_100)),l:new GifReader(new Uint8Array(snorlax_10))}, {h:new GifReader(new Uint8Array(cat_100)),l:new GifReader(new Uint8Array(cat_10))}, ]; videos.forEach(v=>{ v.n = v.h.numFrames(); const himg = new ImageData(v.h.width,v.h.height); v.himgurls = d3.range(v.n).map(fi=>{ v.h.decodeAndBlitFrameRGBA(fi,himg.data); let canvas = document.createElement('canvas'); canvas.width = v.h.width; canvas.height = v.h.height; canvas.getContext('2d').putImageData(himg, 0, 0); return canvas.toDataURL(); }); const limg = new ImageData(v.l.width,v.l.height); v.limgs = d3.range(v.n).map(fi=>{ v.l.decodeAndBlitFrameRGBA(fi,limg.data); const newimg = new ImageData(v.l.width,v.l.height); newimg.data.forEach((_,i)=>{ newimg.data[i]=limg.data[i]; }); return newimg; }); const n_px = v.l.width*v.l.height; const pad = d3.range(n_px).fill(0); v.lvr = v.limgs.map(img=>{ return d3.range(n_px).map(i=>img.data[i*4+0]*8/255).concat(pad).concat(pad); }); v.lvg = v.limgs.map(img=>{ return pad.concat(d3.range(n_px).map(i=>img.data[i*4+1]*8/255)).concat(pad); }); v.lvb = v.limgs.map(img=>{ return pad.concat(pad).concat(d3.range(n_px).map(i=>img.data[i*4+2]*8/255)); }); }); return videos; }3b:T989,docs = { const src = [ "나라말이 중국과 달라 한문 한자와 서로 통하지 아니하므로 이런 까닭으로 어리석은 백성들이 말하고자 하는 바가 있어도 마침내 제 뜻을 펴지 못하는 사람이 많으니라 내가 이를 가엾이 여겨 새로 스물 여덟 글자를 만드노니 사람마다 하여금 쉬이 익혀 날로 씀에 편하게 하고자 할 따름이니라", "인류의 역사에서 한 민족이 다른 한 민족과의 정치적 결합을 해체하고 세계의 여러 나라 사이에서 자연법과 자연의 신의 법이 부여한 독립 평등의 지위를 차지하는 것이 필요하게 되었을 때 인류의 신념에 대한 엄정한 고려는 우리로 하여금 독립을 요청하는 여러 원인을 선언하지 않을 수 없게 한다 우리들은 다음과 같은 것을 자명한 진리라고 생각한다 즉 모든 사람은 평등하게 태어났으며 조물주는 몇 개의 양도할 수 없는 권리를 부여했으며 그 권리 중에는 생명과 자유와 행복의 추구가 있다", "유구한 역사와 전통에 빛나는 우리 대한국민은 3ㆍ1운동으로 건립된 대한민국임시정부의 법통과 불의에 항거한 4ㆍ19민주이념을 계승하고, 조국의 민주개혁과 평화적 통일의 사명에 입각하여 정의 인도와 동포애로써 민족의 단결을 공고히 하고 모든 사회적 폐습과 불의를 타파하며 자율과 조화를 바탕으로 자유민주적 기본질서를 더욱 확고히 하여 정치 경제 사회 문화의 모든 영역에 있어서 각인의 기회를 균등히 하고 능력을 최고도로 발휘하게 하며 자유와 권리에 따르는 책임과 의무를 완수하게 하여 안으로는 국민생활의 균등한 향상을 기하고 밖으로는 항구적인 세계평화와 인류공영에 이바지함으로써 우리들과 우리들의 자손의 안전과 자유와 행복을 영원히 확보할 것을 다짐하면서 1948년 7월 12일에 제정되고 8차에 걸쳐 개정된 헌법을 이제 국회의 의결을 거쳐 국민투표에 의하여 개정한다", ]; const wdocs = src.map(s=>s.split(/\s+/)); const words = [...new Set(wdocs.flat())].toSorted((a,b)=>d3.ascending(a,b)); const word_map = Object.fromEntries(words.map((w,i)=>[w,i])); return {dict:words, dict_inv:word_map, wdocs:wdocs, edocs:wdocs.map(doc=>doc.map(w=>word_map[w])) }; }3c:[{"id":"bf2005454e5f54f2d0a390bbdb85e9bb3149eae91b44bb0d4c95113c0fe81c2a9307b3b97ef64d8a1aa4a1a09a00458d5fbaa4151ac63bdb2b2928615044a6bc","href":"https://static.observableusercontent.com/files/bf2005454e5f54f2d0a390bbdb85e9bb3149eae91b44bb0d4c95113c0fe81c2a9307b3b97ef64d8a1aa4a1a09a00458d5fbaa4151ac63bdb2b2928615044a6bc","name":"homer_crop_100.gif","type":"image/gif","lastModified":1774351292807.744,"size":22302},{"id":"e2a67d25e650cbaa96311e15648a39f42bae0cfe95554161393cf43a96bfa524df83fd73b90497c7ccc77fb4853f990ff5f443a70503de0d76dddb73c6e57f48","href":"https://static.observableusercontent.com/files/e2a67d25e650cbaa96311e15648a39f42bae0cfe95554161393cf43a96bfa524df83fd73b90497c7ccc77fb4853f990ff5f443a70503de0d76dddb73c6e57f48","name":"cat_crop_100.gif","type":"image/gif","lastModified":1774353760035.592,"size":158380},{"id":"03e6be30c9347d7129548f99571e42314614a9bce4ac67a8b2ca8133d08627b15d7f6389a3617e935675b1f0f637d625dffcc507e6f5690d81234bf7bb696757","href":"https://static.observableusercontent.com/files/03e6be30c9347d7129548f99571e42314614a9bce4ac67a8b2ca8133d08627b15d7f6389a3617e935675b1f0f637d625dffcc507e6f5690d81234bf7bb696757","name":"homer_crop_10.gif","type":"image/gif","lastModified":1774370372744.613,"size":1139},{"id":"5cfac87dbc051294feff58dbc80060104a60d6e91192e3fcd1ed2f7a691d5c9cf76f76bf73bf6057787b4e4f69b915446e01c98afceb4c2aaad1dd584729d64a","href":"https://static.observableusercontent.com/files/5cfac87dbc051294feff58dbc80060104a60d6e91192e3fcd1ed2f7a691d5c9cf76f76bf73bf6057787b4e4f69b915446e01c98afceb4c2aaad1dd584729d64a","name":"cat_crop_10.gif","type":"image/gif","lastModified":1774370372792.88,"size":18105},{"id":"2c926aab0e12a107ebd4820f152cf081353be9651438ce031f3c8855ea796af0a413d9b557e1e6ff638514ecf45628a447ce7fcbc01843d81285470bd141794b","href":"https://static.observableusercontent.com/files/2c926aab0e12a107ebd4820f152cf081353be9651438ce031f3c8855ea796af0a413d9b557e1e6ff638514ecf45628a447ce7fcbc01843d81285470bd141794b","name":"snorlax_crop_100.gif","type":"image/gif","lastModified":1774353741196.909,"size":48139},{"id":"1ebb1f9f968feddbfcb14f9feb7362b155a739a99ae356704eae165748391ec2d3d4609391d7e8cf3a18f4a0521d63b1c9016aa07424f0a5daf355efee1b0c1a","href":"https://static.observableusercontent.com/files/1ebb1f9f968feddbfcb14f9feb7362b155a739a99ae356704eae165748391ec2d3d4609391d7e8cf3a18f4a0521d63b1c9016aa07424f0a5daf355efee1b0c1a","name":"snorlax_crop_10.gif","type":"image/gif","lastModified":1774370372792.998,"size":2215}] 32:{"id":"b962c198cb968454","slug":"hl-like-ml-loseless-data-space-comparison","title":"휴먼러닝이 머신러닝이라면: 데이터 공간","thumbnail":"5947e46f3af54d179e0003ab2dd3dd13b5ddcc0ef83db9c271313677e7c111b0","access_level":"public","create_time":"$D2026-03-22T16:05:23.597Z","update_time":"$D2026-03-26T09:32:44.612Z","view_time":null,"first_public_time":"$D2026-03-25T20:55:46.837Z","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":663,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"4e2fc41e06361cc3","login":"humble-data-miner","name":"Humble Data Miner","avatar_url":"https://avatars-next.observableusercontent.com/3046b1bea86c5e825baea7c0c403d90ad9690b5396b11b5d02b3a0839fbcb946","tier":null}],"members":[{"type":"individual","id":"4e2fc41e06361cc3","login":"humble-data-miner","name":"Humble Data Miner","avatar_url":"https://avatars-next.observableusercontent.com/3046b1bea86c5e825baea7c0c403d90ad9690b5396b11b5d02b3a0839fbcb946","tier":null,"role":"editor"},{"type":"team","id":"50faa4da52a9ff9b","login":"humble-data-miner","name":"Humble Data Miner","avatar_url":"https://avatars-next.observableusercontent.com/3046b1bea86c5e825baea7c0c403d90ad9690b5396b11b5d02b3a0839fbcb946","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":{"id":"2f4cd6bfe331467c","slug":"bamboo-forest","title":"Bamboo Forest","owner":{"id":"50faa4da52a9ff9b","login":"humble-data-miner","name":"Humble Data Miner"}},"type":"notebook","body":{"title":"휴먼러닝이 머신러닝이라면: 데이터 공간","cells":[{"id":0,"value":"# 휴먼러닝이 머신러닝이라면: 데이터 공간","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":15,"value":"---\n## 슬라이드 사용법\n\n* 전체화면 보기: 우상단 메뉴 클릭 후 **View** > **View in Fullscreen** 실행\n* 키보드: 화살표 키 '→' 또는 '↓'로 진행, 화살표 키 '←' 또는 '↑'로 역행\n* 마우스: 슬라이드 영역 클릭시 해당 슬라이드 위치로 스크롤 이동","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":29,"value":"first_slide ={\n\nconst title = md`

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

`;\nconst item1 = md`

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

(결손없는) 데이터 공간

`;\n const item1 = md`

공간의 크기에 따라 다른 반응
\n\n 좁은 공간 = 탐색(explore)보다 탐닉(exploit)
\n 넓은 공간 = 탐닉(exploit)보다 탐색(explore)\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":555,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":66,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":166,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":318,"value":"$37","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":376,"value":"$38","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":451,"value":"$39","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":662,"value":"---\n## 부연설명 동영상\n\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":650,"value":"---\n## Reference\n\n* function [makeCurlyBrace(x1,y1,x2,y2,w,q)](https://gist.github.com/alexhornbake/6005176)\n* Animated GIFs\n 1. [Homer Bush GIF | Tenor](https://tenor.com/ko/search/homer-bush-gifs)\n 2. [Snorlax Eat GIF | Tenor](https://tenor.com/ko/view/snorlax-eat-in-my-belly-get-in-my-belly-gif-21366346)\n 3. [Cat Sneaking GIF | Tenor](https://tenor.com/ko/view/cat-sneaking-gif-27366734)\n* GIFReader [GitHub - deanm/omggif: JavaScript implementation of a GIF 89a encoder and decoder](https://github.com/deanm/omggif)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":17,"value":"---\n## Appendix","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":47,"value":"tick_period = 1000","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":32,"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":35,"value":"grid = mvp_grid(slide_contents_dim[0],280,45)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":41,"value":"box = mvp_box(grid)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":43,"value":"radar = mvp_radar(grid.cellsize()/2,10,10/20)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":360,"value":"box([1,15],[3,17])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":181,"value":"musics = {\n const notes = [\n \"GEE FDD CDEFGGG GEEEFDD CEGGEEE \",\n \"EDCDEEE DDD EEE EDCDEEE DDEDC \",\n \"GGAAGGE GGEED GGAAGGE GEDEC \",\n ];\n const vol = 8;\n const fv_map = Object.fromEntries([...\"CDEFGAB \"].map((c,ci)=>[c,d3.range(7).map(vi=>ci==vi?vol:1)]));\n const nt_map = Object.fromEntries([...\"CDEFGAB \"].map((c,ci)=>[c,c==\" \"?-1:ci+2]));\n return {\n label:[\"도(C)\",\"레(D)\",\"미(E)\",\"파(F)\",\"솔(G)\",\"라(A)\",\"시(B)\"],\n fvs:notes.map(seq=>[...seq].map(c=>fv_map[c])),\n nts:notes.map(seq=>[...seq].map(c=>nt_map[c])),\n };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":243,"value":"$3a","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":391,"value":"$3b","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":37,"value":"import {grid as mvp_grid, box as mvp_box, radar as mvp_radar, draw_guidelines} from \"@humble-data-miner/mod-mvp\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"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":626,"value":" function makeCurlyBrace(x1,y1,x2,y2,w,q)\n {\n //Calculate unit vector\n var dx = x1-x2;\n var dy = y1-y2;\n var len = Math.sqrt(dx*dx + dy*dy);\n dx = dx / len;\n dy = dy / len;\n\n //Calculate Control Points of path,\n var qx1 = x1 + q*w*dy;\n var qy1 = y1 - q*w*dx;\n var qx2 = (x1 - .25*len*dx) + (1-q)*w*dy;\n var qy2 = (y1 - .25*len*dy) - (1-q)*w*dx;\n var tx1 = (x1 - .5*len*dx) + w*dy;\n var ty1 = (y1 - .5*len*dy) - w*dx;\n var qx3 = x2 + q*w*dy;\n var qy3 = y2 - q*w*dx;\n var qx4 = (x1 - .75*len*dx) + (1-q)*w*dy;\n var qy4 = (y1 - .75*len*dy) - (1-q)*w*dx;\n\n return ( \"M \" + x1 + \" \" + y1 +\n \" Q \" + qx1 + \" \" + qy1 + \" \" + qx2 + \" \" + qy2 + \n \" T \" + tx1 + \" \" + ty1 +\n \" M \" + x2 + \" \" + y2 +\n \" Q \" + qx3 + \" \" + qy3 + \" \" + qx4 + \" \" + qy4 + \n \" T \" + tx1 + \" \" + ty1 );\n }","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":23,"value":"import_style","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":220,"value":"homer_100 = await FileAttachment(\"homer_crop_100.gif\").arrayBuffer()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":256,"value":"homer_10 = await FileAttachment(\"homer_crop_10.gif\").arrayBuffer()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":260,"value":"snorlax_100 = await FileAttachment(\"snorlax_crop_100.gif\").arrayBuffer()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":263,"value":"snorlax_10 = await FileAttachment(\"snorlax_crop_10.gif\").arrayBuffer()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":266,"value":"cat_100 = await FileAttachment(\"cat_crop_100.gif\").arrayBuffer()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":268,"value":"cat_10 = await FileAttachment(\"cat_crop_10.gif\").arrayBuffer()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":223,"value":"omggif = require('https://bundle.run/omggif@1.0.10')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":227,"value":"GifReader = omggif.GifReader","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":249,"value":"{\n const cs = grid.cellsize();\n const w = videos[0].n*cs;\n const h = cs;\n const svg = d3.create(\"svg\").attr(\"width\",w).attr(\"viewBox\", [0, 0, w, h]);\n\n svg.append(\"g\").selectAll(\"image\")\n .data(videos[0].himgurls)\n .join(\"image\")\n .attr(\"href\",(d,i)=>d)\n .attr(\"x\",(d,i)=>cs*i)\n .attr(\"width\",cs)\n .attr(\"height\",cs);\n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":26,"value":"install_key_bindings_to_document","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W3c","stdlib":"1","titling":"auto"}} 33:"$32:body"