boosted_trees = { const tnodes = trees[tree_index].tnodes; const root = d3.stratify() .id((d) => d.nid) .parentId((d) => d.pid) (tnodes); const splits = tnodes.filter(tn=>!tn.hasOwnProperty("lv")); const leaves = tnodes.filter(tn=>tn.hasOwnProperty("lv")); const max_nid_split = d3.max(splits, d=>d.nid); const descendants = root.descendants(); const padding = 2; const dx = 30; const dy = 90; const tm_n = trees.length; const tm_size = treemap_size+10; const tm_width = width/tm_n; const sp_n = (columns.length-1); const sp_size = width/sp_n; const sp_margin = {left:10,right:5,top:10,bottom:32}; d3.tree().nodeSize([dx,dy])(root); const ex = d3.extent(root, d=>d.x); const ey = d3.extent(root, d=>d.y); const height = tm_size+ey[1]-ey[0]+dy*1.5+sp_size*2; const curve = d3.curveBumpY; const svg = d3.create("svg") .attr("viewBox", [0,0,width, height]) .attr("width", width) .attr("height", height) .attr("font-size", 10); const y = d3.scaleLinear().domain(ext.y).range([sp_size-sp_margin.bottom, sp_margin.top]); const yd = d3.scaleLinear().domain(ext.y).range([sp_size*2-sp_margin.bottom, sp_size+sp_margin.top]); const xs = d3.range(sp_n).map(i=>d3.scaleLinear().domain(ext.fv[i]).range([sp_margin.left, sp_size-sp_margin.right])); const slider_range = d3.range(0, d3.max(splits,d=>d.nid)+1); const slider = d3_slider.sliderBottom().min(slider_range[0]).max(slider_range[slider_range.length-1]).step(1).value(slider_range[0]) .tickValues(slider_range) .tickFormat(i=>`${i+1}번째 분할`) .value(-1).width(width-dx*2).fill("grey").on("onchange", () => update(slider.value())); const g_splitslider = svg.append("g").attr("class","node-split-seq").attr("transform",`translate(${dx},${20+tm_size})`); g_splitslider.call(slider); const g_tm = svg.append("g"); const treemaps = trees.map((tree,i)=>{ const g_local_tm = g_tm.append("g").attr("transform",`translate(${tm_width*i+tm_width/2},${5})`); const rect_path = `M ${0} ${0} H ${tm_size/2} V ${tm_size} H ${-tm_size/2} V ${0} H ${0}`; if(i>0) { g_local_tm.append("text") .attr("text-anchor","middle").attr("dominant-baseline","middle").attr("font-size",40) .attr("x",-tm_width/2).attr("y",tm_size/2).text("+"); } const g_tm_rect_bg = g_local_tm.append("path") .attr("fill","none").attr("stroke","black").attr("stroke-width",4).attr("stroke-linejoin","round") .attr("opacity",0.2) .attr("d",rect_path); const g_tm_rect = g_local_tm.append("path") .attr("fill","none").attr("stroke","black").attr("stroke-width",4).attr("stroke-linejoin","round") .attr("d",rect_path); const g_tm_rect_len = g_tm_rect.node().getTotalLength(); g_tm_rect.attr("stroke-dasharray",g_tm_rect_len).attr("stroke-dashoffset",0); const g_treemap = g_local_tm.selectAll("rect") .data(tree.treemap) .join("rect") .attr("fill", d=>leaf_color(d.data.lv)) .attr("x",d=>d.x0-tm_size/2+5).attr("y",d=>d.y0+5) .attr("width", d=>d.x1-d.x0).attr("height", d=>d.y1-d.y0) g_tm_rect.attr("visibility",i>tree_index?"hidden":"visible"); g_treemap.attr("opacity",i>=tree_index?0:1); return {tm:g_treemap, rect:g_tm_rect, rect_len:g_tm_rect_len} }); const g_sp = svg.append("g"); g_sp.attr("transform",`translate(${0},${height-sp_size*2})`) const g_best_split = g_sp.append("rect") .attr("y",-2) .attr("width",sp_size).attr("height",sp_size*2-10) .attr("stroke-width",4).attr("stroke","black").attr("fill","none"); const subplots = d3.range(sp_n).map(i=>{ const g_cl = g_sp.append("g").attr("transform",`translate(${sp_size*i},0)`); //g_cl.append("rect").attr("width",sp_size).attr("height",sp_size).attr("fill","none").attr("stroke","lightgrey"); g_cl.append("text").attr("x",sp_size/2).attr("y",sp_size-4).attr("text-anchor","middle").attr("dominant-baseline","auto").text(col_name_map[columns[i]]); g_cl.append("g") .attr("transform",`translate(0,${sp_size-sp_margin.bottom})`) .call(d3.axisBottom(xs[i]).ticks(3).tickFormat(v=>number_formatter.format(v))); g_cl.append("g") .attr("transform",`translate(${sp_margin.left},0)`) .call(d3.axisLeft(y)); g_cl.append("g") .attr("transform",`translate(0,${sp_size*2-sp_margin.bottom})`) .call(d3.axisBottom(xs[i]).ticks(3).tickFormat(v=>number_formatter.format(v))); const axis_yd = d3.axisLeft(yd).tickFormat(d=>d==0?0:''); const g_axis_yd = g_cl.append("g") .attr("transform",`translate(${sp_margin.left},0)`) .call(axis_yd); const yd_scale_ticks = axis_yd.scale().ticks(); const g_ticks = g_axis_yd.selectAll("g.tick"); g_ticks.select("line").attr("stroke",(_,i)=>yd_scale_ticks[i]==0?"black":yd_scale_ticks[i]<0?"blue":"red"); const g_absdot = g_cl.append("g"); g_absdot.diff = g_absdot.append("g").attr("stroke-width",1).attr("stroke","black").attr("stroke-opacity",0.4).attr("fill","none"); g_absdot.dot = g_absdot.append("g").attr("stroke-width",1).attr("stroke","black").attr("stroke-opacity",0.4).attr("fill-opacity",0.5); const g_reldot = g_cl.append("g"); g_reldot.diff = g_reldot.append("g").attr("stroke-width",1).attr("stroke","black").attr("stroke-opacity",0.4).attr("fill","none"); g_reldot.dot = g_reldot.append("g").attr("stroke-width",1).attr("stroke","black").attr("stroke-opacity",0.4).attr("fill-opacity",0.5); const g_bs = g_cl.append("g"); g_bs.gline = g_bs.append("path").attr("stroke-width",2).attr("stroke",d3.color(feature_colors[i]).darker()).attr("stroke-dasharray","4 4"); g_bs.gtext = g_bs.append("text").attr("text-anchor","middle").attr("dominant-baseline","auto").attr("dy",-2); return {adot:g_absdot,rdot:g_reldot, bs:g_bs}; }); const g_graph = svg.append("g").attr("transform",`translate(${width/2-dx},${dy+tm_size})`); const g_proj = g_graph.append("path").attr("stroke","black").attr("fill","grey").attr("opacity",0.1); const link = g_graph.append("g") .attr("fill", "none") .attr("stroke", "#555") .attr("stroke-opacity", 0.8) .attr("stroke-width", 1.5) .selectAll("path") .data(root.links()) .join("path") .attr("d", d3.link(curve).x(d => d.x).y(d => d.y)) .attr("stroke",d=>d.source.data.left==d.target.data.nid?d3.schemeCategory10[2]:d3.schemeCategory10[3]); const snode = g_graph.append("g").selectAll("a") .data(root.descendants().filter(node=>!node.data.hasOwnProperty("lv"))) .join("a") .attr("transform", d => `translate(${d.x},${d.y})`); const lnode = g_graph.append("g").selectAll("a") .data(root.descendants().filter(node=>node.data.hasOwnProperty("lv"))) .join("a") .attr("transform", d => `translate(${d.x},${d.y})`); lnode.append("circle") .attr("stroke", d => "#999") .attr("fill", d => leaf_color(d.data.lv)) .attr("r", d => Math.sqrt(d.data.ds.length)); snode.append("circle") .attr("stroke", "none").attr("fill", "#999").attr("r", d => Math.sqrt(d.data.ds.length)); const snode_text = snode.append("g"); const [nw,nh] = [56,32]; //(split) note width snode_text.append("path") .attr("fill","white").attr("stroke",d=>feature_colors[d.data.si]).attr("stroke-width",2).attr("stroke-linecap","square") .attr("d",`M ${-nw/2} ${-nh} V ${-6} H ${-4} L ${0} ${0} L ${4} ${-6} H ${nw/2} V ${-nh} H ${-nw/2}`); lnode.append("text") .attr("dx", 6).attr("dy", 4).attr("text-anchor", "start").attr("font-size","larger") .attr("paint-order", "stroke").attr("stroke", "#fff").attr("stroke-width", 3) .attr("transform",`rotate(90)`) .text((d, i)=>`${d.data.lv<0?"":"+"}${d.data.lv.toFixed(3)}`); snode_text.append("text") .attr("dy", -20) .attr("text-anchor", "middle").attr("font-size","larger") .text((d, i) => `${col_name_map[columns[d.data.si]]}`); snode_text.append("text") .attr("dy", d => -8) .attr("text-anchor", "middle").attr("font-size","larger") .text((d, i) =>`< ${number_formatter.format(d.data.sv)}`); function update(sel_nid) { const node = tnodes[sel_nid]; const dur = anim_step_ms; const split_dur = dur/subplots.length*2; subplots.forEach((g,i)=>{ const dot_data = { abs:node.ds.map((row,ri)=>({x:row[i],y1:node.pred[ri],y2:row[row.length-1]})), rel:node.ds.map((row,ri)=>({x:row[i],y1:0,y2:row[row.length-1]-node.pred[ri]})) }; g.adot.dot.attr("opacity",0).transition().delay(dur).duration(dur).attr("opacity",1); g.adot.dot.selectAll("circle") .data(dot_data.abs) .join("circle") .attr("cx",d=>xs[i](d.x)).attr("cy",d=>y(d.y2)).attr("r",2).attr("fill",feature_colors[i]); g.adot.diff.attr("opacity",0).transition().delay(dur).duration(dur).attr("opacity",1); g.adot.diff.selectAll("path") .data(dot_data.abs) .join("path") .attr("d",d=>`M ${xs[i](d.x)} ${y(d.y2)} V ${y(d.y1)} l ${-2} ${0} h ${5}`).attr("stroke",d=>d.y1>d.y2?"blue":"red"); g.rdot.dot.attr("opacity",0).transition().delay(dur).duration(dur).attr("opacity",1); g.rdot.dot.selectAll("circle") .data(dot_data.rel) .join("circle") .attr("cx",d=>xs[i](d.x)).attr("cy",d=>yd(d.y2)).attr("r",2).attr("fill",feature_colors[i]); g.rdot.diff.attr("opacity",0).transition().delay(dur).duration(dur).attr("opacity",1); g.rdot.diff.selectAll("path") .data(dot_data.rel) .join("path") .attr("d",d=>`M ${xs[i](d.x)} ${yd(d.y2)} V ${yd(d.y1)} l ${-2} ${0} h ${5}`).attr("stroke",d=>d.y1>d.y2?"blue":"red"); g.bs.interrupt().attr("opacity",0).transition().delay(dur*2+split_dur*i).duration(split_dur).attr("opacity",1); g.bs.gline.attr("d",`M ${xs[i](node.fbests[i].sv)} ${sp_margin.top} V ${sp_size*2-sp_margin.bottom}`); g.bs.gtext.attr("x",xs[i](node.fbests[i].sv)).attr("y",sp_margin.top) .text(number_formatter.format(node.fbests[i].sv)); }); const dn = root.find(dn=>dn.data.nid == node.nid); // selected drawing node const pts = { org:{x:dn.x,y:dn.y}, lend:{x:-width/2+dx,y:height-sp_size*2-dy-tm_size}, rend:{x:width/2+dx,y:height-sp_size*2-dy-tm_size} }; g_proj.interrupt().attr("opacity",0).attr("d",` M ${pts.org.x} ${pts.org.y} C ${pts.org.x} ${pts.org.y+100}, ${pts.lend.x} ${pts.lend.y-100}, ${pts.lend.x} ${pts.lend.y} L ${pts.rend.x} ${pts.rend.y} C ${pts.rend.x} ${pts.rend.y-100}, ${pts.org.x} ${pts.org.y+100}, ${pts.org.x} ${pts.org.y}`) .transition().duration(dur).attr("opacity",0.1); g_best_split.interrupt().attr("opacity",0).attr("stroke",feature_colors[node.si]).attr("x",sp_size*node.si) .transition().delay(dur*4).duration(dur).attr("opacity",1); snode_text.interrupt().attr("opacity",d=>d.data.nidd.data.nid<=node.nid?1:0); link.interrupt().attr("opacity",d=>d.target.data.nidd.source.data.nid<=node.nid?1:0); snode.interrupt().attr("opacity",d=>d.data.nidd.data.nid<=node.right?1:0); lnode.interrupt().attr("opacity",d=>d.data.nidd.data.nid<=node.right?1:0); const g_local_tm = treemaps[tree_index]; g_local_tm.tm.interrupt().attr("opacity",0) .transition().delay(dur*7).duration(dur).attr("opacity",node.nid == max_nid_split?1:0); g_local_tm.rect.interrupt().attr("stroke-dashoffset",(1-node.nid/(max_nid_split+1))*g_local_tm.rect_len) .transition().ease(d3.easeLinear).duration(dur*8).attr("stroke-dashoffset",(1-(node.nid+1)/(max_nid_split+1))*g_local_tm.rect_len); } update(0); return svg.node(); }