Created
May 1, 2019 21:28
-
-
Save fractalytics/495b63cf671b4c487bc40801366384e0 to your computer and use it in GitHub Desktop.
Visualize sickit-learn decision trees with d3.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<meta charset="utf-8"> | |
<head> | |
<style> | |
.node { | |
cursor: pointer; | |
} | |
.node circle { | |
fill: #fff; | |
stroke: steelblue; | |
stroke-width: 1.5px; | |
} | |
.node text { | |
font: 10px sans-serif; | |
} | |
.link { | |
fill: none; | |
stroke:#6ff800; | |
} | |
.legends{ | |
position: fixed; | |
top: 1px; | |
z-index: -1; | |
left:5px; | |
} | |
.main{ | |
position: relative; | |
top: 99px; | |
z-index: 5 | |
} | |
.tlink{ | |
stroke: rgb(158, 156, 156); | |
font-family: Verdana; | |
font-size: 12px; | |
stroke-width: 0.04em; | |
} | |
</style> | |
</head> | |
<body> | |
<script src="http://d3js.org/d3.v3.min.js"></script> | |
<script> | |
var label_names; | |
var TOTAL_SIZE; | |
default_colors=[ | |
"#c25975","#d26bff","#2d5a47","#093868","#fcdfe6","#94a2fa","#faec94","#decaee","#daeeca","#b54c0a","#dc1818","#18dcdc","#000000","#340000","#86194c","#fef65b","#ff9b6f","#491b47","#171717","#e8efec","#1c6047","#a2bae0","#4978c3","#f8fee0","#dcfb66","#91fb66","#29663b","#b4b7be","#0088b2","#88b200","#c43210","#f06848","#f0bc48","#d293a2","#cccccc","#59596a","#fafae6","#ffc125","#ff4e50","#f0e6fa","#f6c1c3","#363636" | |
] | |
//************************************* Options******************************************************// | |
var file_name="structureC1.json" // generator_1 | |
var file_namev2="structureC2.json" // generator_2 | |
var version2 = true // if true json from generator_2 will be used | |
var tree_branch = false // if the thickness of the branches depend on the value of targt + color * / | |
var tree_branch_parent = true // true: thickness from the root if not the direct parent | |
var tree_branch_color = "black" | |
var strokeness = 120 // the degree of separation between the nodes | |
var default_strokeness = 50 | |
var hover_percent_parent = false // if the display percentage depends on the direct parent or the root | |
var square = false | |
var rect_percent = true //display the percentage or the value in the small rectangles of the labels | |
var value_percent_top = true /// if we display the value and the percentage above the rectangle / | |
var dict_leaf_y = {1:0, 2:-17.5, 3:-35, 4:-52.5,5:-70,6:-87.5,6:-105,7:-122.5,8:-140,9:-157.5,10:-175} | |
/****************************************************************************************************** */ | |
getDepth = function (obj) { | |
var depth = 0; | |
if (obj.children) { | |
obj.children.forEach(function (d) { | |
var tmpDepth = getDepth(d) | |
if (tmpDepth > depth) { | |
depth = tmpDepth | |
} | |
}) | |
} | |
return 1 + depth | |
} | |
var margin = {top: 20, right: 120, bottom: 20, left: 180}, | |
width = 2000 + 960 - margin.right - margin.left, | |
height = 800 - margin.top - margin.bottom; | |
var i = 0, | |
duration = 550, | |
root; | |
var tree | |
var diagonal | |
var svg | |
var filetochoose = version2 ? file_namev2 : file_name | |
d3.json(filetochoose, function(error, flare) { | |
if (error) throw error; | |
console.log(getDepth(flare)) | |
tree = d3.layout.tree() | |
.separation(function(a, b) { return ((a.parent == root) && (b.parent == root)) ? strokeness : strokeness; }) | |
.size([height, getDepth(flare)*width/8]); | |
diagonal = d3.svg.diagonal() | |
.projection(function(d) { return [d.y, d.x]; }); | |
svg = d3.select("body").append("svg") | |
.attr("width", getDepth(flare)*width/8 + margin.right + margin.left) | |
.attr("height", height + margin.top + margin.bottom) | |
.append("g") | |
.attr("transform", "translate(" + margin.left + "," + margin.top + ")"); | |
TOTAL_SIZE = flare.size | |
l = flare.pred.replace(/of/g,"").split(', ') | |
for( var j=0; j < l.length; j++){ | |
l[j] = l[j].split(' ')[2] | |
} | |
label_names = l | |
root = flare; | |
root.x0 = height / 2; | |
root.y0 = 0; | |
function collapse(d) { | |
if (d.children) { | |
d._children = d.children; | |
d._children.forEach(collapse); | |
d.children = null; | |
} | |
} | |
root.children.forEach(collapse); | |
update(root,l.length); | |
createLabels(l); | |
}); | |
d3.select(self.frameElement).style("height", "480px"); | |
function update(source,n_labels) { | |
// Compute the new tree layout. | |
var nodes = tree.nodes(root).reverse(), | |
links = tree.links(nodes); | |
tpaths = tree.links(nodes); | |
// Normalize for fixed-depth. | |
nodes.forEach(function(d) { d.y = d.depth * 180; }); | |
// Update the nodes… | |
var node = svg.selectAll("g.node") | |
.data(nodes, function(d) { return d.id || (d.id = ++i); }); | |
// Enter any new nodes at the parent's previous position. | |
var nodeEnter = node.enter().append("g") | |
.attr("class", "node") | |
.attr("transform", function(d) { return "translate(" + source.y0 + "," + source.x0 + ")"; }) | |
.on("click", click); | |
nodeEnter.append("circle") | |
.attr("r", 1e-6) | |
.style("fill", function(d) { | |
return d._children ? "lightsteelblue" : "#fff"; | |
}); | |
// nodeEnter.append("text") | |
// .attr("x", function(d) { return (d.children || d._children) || version2 ? -10 : 10; }) | |
// .attr("dy", ".35em") | |
// .attr("text-anchor", function(d) { return (d.children || d._children) || version2 ? "end" : "start"; }) | |
// .text(function(d) { return d.pred ? d.name+' '+d.pred : d.name; }) | |
// .style("fill-opacity", 1e-6); | |
function getTextWidth(text, fontSize, fontFace) { | |
var a = document.createElement('canvas'); | |
var b = a.getContext('2d'); | |
b.font = fontSize + 'px ' + fontFace; | |
return b.measureText(text).width; | |
} | |
var rect = nodeEnter.append("rect") | |
.attr("width", 133 + 8) | |
.attr("height", 70) | |
.attr("x",-80) | |
.attr("y",-80) | |
.attr("rx",6) | |
.attr("ry",6) | |
.style("fill",function(d){return (d.children || d._children) || version2 ? "#f0f0f0" : "#ffffff"}) | |
.style("stroke",function(d){return (d.children || d._children) || version2 ? "rgb(155, 155, 155)" : "#ffffff"}) | |
.style("visibility", function(d){return (d.children || d._children) || version2 ? "visible" : "hidden"}) | |
nodeEnter.append("svg:image") | |
.attr("xlink:href", function(d){return ((d.children || d._children) || version2) && d.type=='categorical' ? 'http://fractalytics.io/wp-content/uploads/2019/05/cat.png' : 'http://fractalytics.io/wp-content/uploads/2019/05/num.png'}) | |
.attr("x", "-76") | |
.attr("y", "-74") | |
.attr("width", "20") | |
.attr("height", "20") | |
.style("visibility", function(d){ | |
if(d.name.match(/(.*?)(<|>|=|!=|<=|>=|=<|=>)/i)){ | |
return d.name.match(/(.*?)(<|>|=|!=|<=|>=|=<|=>)/i)[1] == 'Root ' ? 'hidden' : 'visible' | |
} | |
else return (d.children || d._children) || version2 ? "visible" : "hidden" | |
}); | |
nodeEnter.append("text") | |
.attr("x", function(d) { | |
ttr = 13 | |
if(default_colors.length > 5){ | |
ttr = (40*default_colors.length)/2 | |
} | |
return (d.children || d._children) || version2 ? -75 - ( ( getTextWidth(d.size+" / "+(d.size*100/TOTAL_SIZE).toFixed(0)+"%",10,'Verdana')+5.7 ) - (133+8) ) / 2 : ttr | |
}) | |
.attr("y",function(d){ | |
ttr = dict_leaf_y[label_names.length] - 15 | |
if(default_colors.length > 5){ | |
ttr = -20 | |
} | |
return (d.children || d._children) || version2 ? -87 : ttr; | |
}) | |
.attr("dy", ".35em") | |
.attr("text-anchor", "start" ) | |
.style("font-size","10px") | |
.style("font-family","Verdana") | |
.style("stroke","#c2c2c2") | |
.style("stroke-width","0.05em") | |
.text(function(d) { return true ? d.size+" / "+(d.size*100/TOTAL_SIZE).toFixed(0)+"%" : ""; }) | |
.attr('visibility',function(){ | |
return value_percent_top ? 'visible' : 'hidden' | |
}) | |
nodeEnter.append("text") | |
.attr("x", function(d) { | |
if(((d.children || d._children) || version2) && d.name.match(/(.*?)(<|>|=|!=|<=|>=|=<|=>)/i)[1].length <= 11){ | |
return (d.children || d._children) || version2 ? -75 - ( ( getTextWidth(d.name.match(/(.*?)(<|>|=|!=|<=|>=|=<|=>)/i)[1],14,'Verdana')+5.7 ) - (133+8) ) / 2 : 0 | |
} | |
else return (d.children || d._children) || version2 ? -75 - ( ( getTextWidth(d.name.match(/(.*?)(<|>|=|!=|<=|>=|=<|=>)/i)[1].substring(0, 11),14,'Verdana')+5.7 ) - (133+8) ) / 2 : 0 | |
}) | |
.attr("y",function(d){ | |
if(!d.name.match(/(.*?)(<|>|=|!=|<=|>=|=<|=>)/i)) return -65 | |
else return d.name.match(/(.*?)(<|>|=|!=|<=|>=|=<|=>)/i)[1] == 'Root ' ? -55 : -65 | |
}) | |
.attr("dy", ".35em") | |
.attr("text-anchor", "start" ) | |
.style("font-size","14px") | |
.style("font-family","Verdana") | |
.style("stroke","black") | |
.style("stroke-width","0.05em") | |
.text(function(d) { | |
if((d.children || d._children) || version2){ | |
return d.name.match(/(.*?)(<|>|=|!=|<=|>=|=<|=>)/i)[1].length <=15 ? d.name.match(/(.*?)(<|>|=|!=|<=|>=|=<|=>)/i)[1] : (d.name.match(/(.*?)(<|>|=|!=|<=|>=|=<|=>)/i)[1]).substring(0, 13)+'..' | |
} | |
else return ""; | |
}) | |
.append('svg:title') | |
.text(function(d){ | |
return (d.children || d._children) || version2 ? d.name.match(/(.*?)(<|>|=|!=|<=|>=|=<|=>)/i)[1] : "" | |
}) | |
nodeEnter.append("text") | |
.attr("x", function(d) { return (d.children || d._children) || version2 ? -75 - ( ( getTextWidth(d.name.replace(d.name.match(/(.*?)(<|>|=|!=|<=|>=|=<|=>)/i)[1],'').replace('=',''),14,'Verdana')+5.7 ) - (133+8) ) / 2 :0}) | |
.attr("y",-45) | |
.attr("dy", ".35em") | |
.attr("text-anchor", "start" ) | |
.style("font-size","12px") | |
.style("font-family","Verdana") | |
.style("stroke","black") | |
.style("stroke-width","0.04em") | |
.text(function(d) { | |
var toreturn = (d.children || d._children) || version2 ? d.name.replace(d.name.match(/(.*?)(<|>|=|!=|<=|>=|=<|=>)/i)[1],'').replace('!=','not').replace(/=|\!=/g,'').replace('<','<=') : ""; | |
if(!d.name.match(/(.*?)(<|>|=|!=|<=|>=|=<|=>)/i)) return toreturn | |
return d.name.match(/(.*?)(<|>|=|!=|<=|>=|=<|=>)/i)[1] == 'Root ' ? '' : toreturn | |
}) | |
var labels_w = 133/ n_labels | |
for( var j=0; j < n_labels; j++){ | |
var curr = j | |
nodeEnter.append("rect") | |
.attr("width",function(d) { | |
var v; | |
if(d.pred){ | |
console.log(parseInt(d.pred.split(",")[curr].match(/\d+/)[0]),' *133/',d.size) | |
v = parseInt(d.pred.split(",")[curr].match(/\d+/)[0]) *133/d.size ; | |
} | |
else if(! d.children){ | |
v = 40 | |
} | |
if(square) return (d.children || d._children) || version2 ? 133/label_names.length -4: 40 | |
else return (d.children || d._children) || version2 ? v : 40 | |
}) | |
.attr("height", 20) | |
.attr('rx',function(d){ return square ? 0 :4}) | |
.attr('ry',function(d){ return square ? 0 :4}) | |
.attr("x",function(d) { | |
var v; | |
var ttl = 0 | |
if(curr > 0){ | |
for(var l =0; l<= curr-1;l++){ | |
if(d.pred){ | |
v = parseInt(d.pred.split(",")[l].match(/\d+/)[0]); | |
} | |
else if(! d.children) v = parseInt(d.name.split(",")[l].match(/\d+/)[0]); | |
ttl = ttl + v*133/d.size | |
} | |
}else{ | |
ttl=0 | |
} | |
ttr= 13 | |
if(default_colors.length > 5){ | |
ttr = 10 + j*45 | |
} | |
if(square) return (d.children || d._children) || version2 ? -76 + j*(133/label_names.length) : ttr | |
else return (d.children || d._children) || version2 ? -76 + ttl : ttr | |
}) | |
.attr("y",(function(d) { | |
console.log(default_colors.length) | |
if(default_colors.length > 5){ | |
return (d.children || d._children) || version2 ? -34: -10 | |
}else return (d.children || d._children) || version2 ? -34: dict_leaf_y[label_names.length]-4 + 20*j +j*4; | |
}) ) | |
.style("fill",function(d) { | |
if (default_colors.length == 0){ | |
return default_colors[j] | |
}else{ | |
return default_colors[j] | |
} | |
} | |
) | |
.attr('visibility',function(d){ | |
if(d.pred){ | |
v = parseInt(d.pred.split(",")[curr].match(/\d+/)[0]); | |
} | |
else if(! d.children) v = parseInt(d.name.split(",")[curr].match(/\d+/)[0]); | |
v = v*133/d.size | |
return v != 0 || !d.children? "visible": "hidden" | |
}) | |
.attr('opacity',function(d){ | |
var val | |
if(d.pred){ | |
// console.log(d.pred.split(",")[curr].match(/\d+/)[0]) | |
val = (parseInt(d.pred.split(",")[curr].match(/\d+/)[0])*100/d.size).toFixed(0) | |
} | |
else if(! d.children) val = (parseInt(d.name.split(",")[curr].match(/\d+/)[0])*100/d.size).toFixed(0) | |
return (d.children || d._children) || version2 ? 1 : val/100 +0.3 | |
}) | |
.append("svg:title") | |
.text(function(d) { | |
if(d.pred){ | |
// console.log(d.pred.split(",")[curr].match(/\d+/)[0]) | |
return !rect_percent ? d.pred.split(",")[curr].match(/\d+/)[0] : (parseInt(d.pred.split(",")[curr].match(/\d+/)[0])*100/d.size).toFixed(0) +"%" | |
} | |
else if(! d.children) return !rect_percent ? d.name.split(",")[curr].match(/\d+/)[0] : (parseInt(d.name.split(",")[curr].match(/\d+/)[0])*100/d.size).toFixed(0)+"%" | |
}) | |
var subg = nodeEnter.append("g") | |
.attr("width", labels_w) | |
.attr("height", 20) | |
.attr("x",function(d){ | |
var v; | |
var ttl = 0 | |
if(curr > 0){ | |
for(var l =0; l<= curr-1;l++){ | |
if(d.pred){ | |
v = parseInt(d.pred.split(",")[l].match(/\d+/)[0]); | |
} | |
else if(! d.children) v = parseInt(d.name.split(",")[l].match(/\d+/)[0]); | |
ttl = ttl + v*133/d.size | |
} | |
}else{ | |
ttl=0 | |
} | |
return -80 + ttl | |
}) | |
.attr("y",-30 ) | |
subg.append("text") | |
.text(function(d) { | |
if(d.pred){ | |
// console.log(d.pred.split(",")[curr].match(/\d+/)[0]) | |
return !rect_percent ? d.pred.split(",")[curr].match(/\d+/)[0] : (parseInt(d.pred.split(",")[curr].match(/\d+/)[0])*100/d.size).toFixed(0) +"%" | |
} | |
else if(! d.children) return !rect_percent ? d.name.split(",")[curr].match(/\d+/)[0] : (parseInt(d.name.split(",")[curr].match(/\d+/)[0])*100/d.size).toFixed(0)+"%" | |
}) | |
.attr("x",(function(d) { | |
var v; | |
var ttl = 0 | |
if(curr > 0){ | |
for(var l =0; l<= curr-1;l++){ | |
if(d.pred){ | |
v = parseInt(d.pred.split(",")[l].match(/\d+/)[0]); | |
} | |
else if(! d.children) v = parseInt(d.name.split(",")[l].match(/\d+/)[0]); | |
ttl = ttl + v*133/d.size | |
} | |
}else{ | |
ttl=0 | |
} | |
ttr= 18 | |
if(default_colors.length > 5){ | |
ttr = 14 + j*45 | |
} | |
if(square) return (d.children || d._children) || version2 ? -71 + j*(133/label_names.length) : ttr | |
else return (d.children || d._children) || version2 ? -71 + ttl : ttr | |
}) ) | |
.attr("y",(function(d) { | |
ttr= dict_leaf_y[label_names.length]+10 + 20*j +j*4 | |
if(default_colors.length > 5){ | |
ttr = 5 | |
} | |
return (d.children || d._children) || version2 ? -19: ttr; | |
}) ) | |
.style("fill","white") | |
.style("font-size","12px") | |
.attr('visibility',function(d){ | |
if(d.pred && !square){ | |
// console.log(d.pred.split(",")[curr].match(/\d+/)[0]) | |
return (parseInt(d.pred.split(",")[curr].match(/\d+/)[0])*100/d.size).toFixed(0) > 20 ?"vivible":"hidden" | |
} | |
}) | |
.append("svg:title") | |
.text(function(d) { | |
if(d.pred){ | |
// console.log(d.pred.split(",")[curr].match(/\d+/)[0]) | |
return !rect_percent ? d.pred.split(",")[curr].match(/\d+/)[0] : (parseInt(d.pred.split(",")[curr].match(/\d+/)[0])*100/d.size).toFixed(0) +"%" | |
} | |
else if(! d.children) return !rect_percent ? d.name.split(",")[curr].match(/\d+/)[0] : (parseInt(d.name.split(",")[curr].match(/\d+/)[0])*100/d.size).toFixed(0)+"%" | |
}) | |
subg.append('text') | |
.text(function(d) { | |
if(d.pred){ | |
return '' | |
} | |
else if(! d.children) { | |
return label_names[curr] | |
} | |
}) | |
.attr("x",(function(d) { | |
ttr= 60 | |
if(default_colors.length > 5){ | |
ttr = 18 + j*45 | |
} | |
return (d.children || d._children) || version2 ? -66 + j*labels_w : ttr | |
}) ) | |
.attr("y",(function(d) { | |
ttr= dict_leaf_y[label_names.length] + 10+ 20*j +j*4 | |
if(default_colors.length > 5){ | |
ttr = 25 | |
} | |
return (d.children || d._children) || version2 ? -15: ttr; | |
}) ) | |
.style("font-size","14px") | |
.style("fill","rgb(78, 74, 74)") | |
.attr('transform', function(d){ | |
return default_colors.length <= 5 ? '' : 'translate('+(-30 +j*20)+','+(10 +j*(-37))+') rotate(55 50 50)' | |
}) | |
} | |
// nodeEnter.append("text") | |
// .attr("x", function(d) { return (d.children || d._children) || version2 ? -10 : 10; }) | |
// .attr("dy", ".35em") | |
// .attr("text-anchor", function(d) { return (d.children || d._children) || version2 ? "end" : "start"; }) | |
// .text(function(d) { return d.pred ? d.pred : ''; }) | |
// .style("fill-opacity", 1e-6) | |
// Transition nodes to their new position. | |
var nodeUpdate = node.transition() | |
.duration(duration) | |
.attr("transform", function(d) { return "translate(" + d.y + "," + d.x + ")"; }); | |
nodeUpdate.select("circle") | |
.attr("r", 10) | |
.style("fill", function(d) { return d._children ? "lightsteelblue" : "#fff"; }); | |
nodeUpdate.select("text") | |
.style("fill-opacity", 1); | |
// Transition exiting nodes to the parent's new position. | |
var nodeExit = node.exit().transition() | |
.duration(duration) | |
.attr("transform", function(d) { return "translate(" + source.y + "," + source.x + ")"; }) | |
.remove(); | |
nodeExit.select("circle") | |
.attr("r", 1e-6); | |
nodeExit.select("text") | |
.style("fill-opacity", 1e-6); | |
// Update the links… | |
var link = svg.selectAll("path.link") | |
.data(links, function(d) { return d.target.id; }); | |
if(tree_branch) var link_stoke_scale = d3.scale.linear().domain([0, 100]).range([1.5, default_strokeness]); | |
else var link_stoke_scale = d3.scale.linear().domain([0, 100]).range([1.5, 8]); | |
var color = d3.scale.linear() | |
.domain([0, 50, 100]) | |
.range(["rgb(2, 255, 219)", "blue"]); | |
// Enter any new links at the parent's previous position. | |
link.enter().insert("path", "g") | |
.attr("class", "link") | |
.attr("id",function(d) { return d.target.id; }) | |
.attr("d", function(d) { | |
var o = {x: source.x0, y: source.y0}; | |
return diagonal({source: o, target: o}); | |
}) | |
.style("stroke-width", function(d) { | |
if(!d.target){ | |
return link_stoke_scale(50) | |
} | |
else { | |
if (tree_branch) { | |
// console.log(d.target.size,'*100/',TOTAL_SIZE,link_stoke_scale(d.target.size*100/TOTAL_SIZE),tree_branch_parent) | |
// console.log(d.target.size,'*100/',d.source.size,link_stoke_scale(d.target.size*100/d.source.size),tree_branch_parent) | |
return tree_branch_parent ? link_stoke_scale(d.target.size*100/TOTAL_SIZE) : link_stoke_scale(d.target.size*100/d.source.size) | |
}else{ | |
return link_stoke_scale(50) | |
} | |
} | |
}) | |
.style("stroke", function(d) { | |
if(!d.target){ | |
return "#fff" | |
} | |
else return tree_branch_color; | |
}) | |
.append("svg:title") | |
.text(function(d, i) { | |
if(hover_percent_parent){ | |
var val = ( (d.target.size/TOTAL_SIZE) * 100 ).toFixed(2); | |
}else{ | |
var val = ( (d.target.size/d.source.size) * 100 ).toFixed(2); | |
} | |
return val+"%" | |
}) | |
var tlink = svg.selectAll("text.tlink") | |
.data(tpaths, function(d) { return d.target.id; }); | |
tlink.enter().insert("text", "g") | |
.attr("class", "tlink") | |
.attr("dy",function(d) { return d.target.side == "left" ? -10 : 15 ; }) | |
.append('textPath') | |
.attr("xlink:href", function(d) { return '#'+d.target.id; }) //place the ID of the path here | |
.style("text-anchor","middle") //place the text halfway on the arc | |
.attr("startOffset", "45%") | |
.text(function(d) { return d.target.side == "left" ? "No" : "Yes" ; }) | |
.attr('visibility', function(d) { return d.target.depth == 1 && !version2 ? 'visible' : 'hidden'}) | |
tlink.exit().transition() | |
.duration(duration) | |
.attr("d", function(d) { | |
var o = {x: source.x, y: source.y}; | |
return diagonal({source: o, target: o}); | |
}) | |
.remove(); | |
// Transition links to their new position. | |
link.transition() | |
.duration(duration) | |
.attr("d", diagonal) | |
.style("stroke-width", function(d) { | |
if(!d.target){ | |
return link_stoke_scale(50) | |
} | |
else { | |
if (tree_branch) { | |
// console.log(d.target.size,'*100/',TOTAL_SIZE,link_stoke_scale(d.target.size*100/TOTAL_SIZE),tree_branch_parent) | |
// console.log(d.target.size,'*100/',d.source.size,link_stoke_scale(d.target.size*100/d.source.size),tree_branch_parent) | |
return tree_branch_parent ? link_stoke_scale(d.target.size*100/TOTAL_SIZE) : link_stoke_scale(d.target.size*100/d.source.size) | |
}else{ | |
return link_stoke_scale(50) | |
} | |
} | |
}); | |
// Transition exiting nodes to the parent's new position. | |
link.exit().transition() | |
.duration(duration) | |
.attr("d", function(d) { | |
var o = {x: source.x, y: source.y}; | |
return diagonal({source: o, target: o}); | |
}) | |
.remove(); | |
// Stash the old positions for transition. | |
nodes.forEach(function(d) { | |
d.x0 = d.x; | |
d.y0 = d.y; | |
}); | |
// Toggle children on click. | |
function click(d) { | |
if (d.children) { | |
d._children = d.children; | |
d.children = null; | |
} else { | |
d.children = d._children; | |
d._children = null; | |
} | |
update(d,n_labels); | |
} | |
} | |
function createLabels(labels) { | |
var Size = 400 | |
var svg1 = d3.select("body") | |
.append("svg") | |
.attr("width",Size) | |
.attr("height", Size) | |
.attr("class","legends"); | |
console.log(labels.length) | |
console.log(default_colors.slice(0,labels.length)) | |
default_colors = default_colors.slice(0,labels.length) | |
if(default_colors.length == 2) default_colors.push('') | |
if (default_colors.length == 0){ | |
var c_l = default_colors | |
}else{ | |
var c_l = default_colors | |
} | |
for(i=0; i< c_l.length; i++){ | |
console.log(labels[i],"",c_l[i]) | |
var legendG = svg1 | |
.append("g") | |
.attr("transform", function(d){ | |
return "translate("+0+"," + ( 30*i + Size/33 + Size/50) + ")"; // place each legend on the right and bump each one down 15 pixels | |
}) | |
.attr("class", "legend"); | |
legendG.append("rect") // make a matching color rect | |
.attr("width", 15) | |
.attr("height", 15) | |
.attr("fill", c_l[i]) | |
.style('visibility',function(){ | |
return labels[i] ? "visible": "hidden" | |
}) | |
legendG.append("text") // add the text | |
.text(labels[i]) | |
.style("font-size", 30) | |
.attr("y", 12) | |
.attr("x", 21) | |
} | |
} | |
</script> | |
</body> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
{ | |
"name": "Root >", | |
"pred": "4000 of no, 521 of yes", | |
"children": [ | |
{ | |
"children": [ | |
{ | |
"children": [ | |
{ | |
"children": [ | |
{ | |
"children": [ | |
{ | |
"name": "balance > 662.5", | |
"pred": "7 of no, 8 of yes", | |
"type": "numerical", | |
"side": "right", | |
"size": 15.0 | |
}, | |
{ | |
"name": "balance <= 662.5", | |
"pred": "1 of no, 11 of yes", | |
"type": "numerical", | |
"side": "left", | |
"size": 12.0 | |
} | |
], | |
"name": "campaign > 3.5", | |
"side": "right", | |
"type": "numerical", | |
"size": 27.0, | |
"pred": "8 of no, 19 of yes" | |
}, | |
{ | |
"children": [ | |
{ | |
"name": "job = technician", | |
"pred": "2 of no, 7 of yes", | |
"type": "categorical", | |
"side": "right", | |
"size": 9.0 | |
}, | |
{ | |
"name": "job != technician", | |
"pred": "49 of no, 34 of yes", | |
"type": "categorical", | |
"side": "left", | |
"size": 83.0 | |
} | |
], | |
"name": "campaign <= 3.5", | |
"side": "left", | |
"type": "numerical", | |
"size": 92.0, | |
"pred": "51 of no, 41 of yes" | |
} | |
], | |
"name": "contact = cellular", | |
"side": "right", | |
"type": "categorical", | |
"size": 119.0, | |
"pred": "59 of no, 60 of yes" | |
}, | |
{ | |
"children": [ | |
{ | |
"children": [ | |
{ | |
"name": "poutcome = success", | |
"pred": "1 of no, 0 of yes", | |
"type": "categorical", | |
"side": "right", | |
"size": 1.0 | |
}, | |
{ | |
"name": "poutcome != success", | |
"pred": "0 of no, 7 of yes", | |
"type": "categorical", | |
"side": "left", | |
"size": 7.0 | |
} | |
], | |
"name": "job = retired", | |
"side": "right", | |
"type": "categorical", | |
"size": 8.0, | |
"pred": "1 of no, 7 of yes" | |
}, | |
{ | |
"children": [ | |
{ | |
"name": "duration > 1249.5", | |
"pred": "4 of no, 7 of yes", | |
"type": "numerical", | |
"side": "right", | |
"size": 11.0 | |
}, | |
{ | |
"name": "duration <= 1249.5", | |
"pred": "56 of no, 11 of yes", | |
"type": "numerical", | |
"side": "left", | |
"size": 67.0 | |
} | |
], | |
"name": "job != retired", | |
"side": "left", | |
"type": "categorical", | |
"size": 78.0, | |
"pred": "60 of no, 18 of yes" | |
} | |
], | |
"name": "contact != cellular", | |
"side": "left", | |
"type": "categorical", | |
"size": 86.0, | |
"pred": "61 of no, 25 of yes" | |
} | |
], | |
"name": "marital = married", | |
"side": "right", | |
"type": "categorical", | |
"size": 205.0, | |
"pred": "120 of no, 85 of yes" | |
}, | |
{ | |
"children": [ | |
{ | |
"children": [ | |
{ | |
"children": [ | |
{ | |
"name": "duration > 1020.5", | |
"pred": "3 of no, 15 of yes", | |
"type": "numerical", | |
"side": "right", | |
"size": 18.0 | |
}, | |
{ | |
"name": "duration <= 1020.5", | |
"pred": "24 of no, 15 of yes", | |
"type": "numerical", | |
"side": "left", | |
"size": 39.0 | |
} | |
], | |
"name": "day > 19.5", | |
"side": "right", | |
"type": "numerical", | |
"size": 57.0, | |
"pred": "27 of no, 30 of yes" | |
}, | |
{ | |
"children": [ | |
{ | |
"name": "age > 55.5", | |
"pred": "5 of no, 3 of yes", | |
"type": "numerical", | |
"side": "right", | |
"size": 8.0 | |
}, | |
{ | |
"name": "age <= 55.5", | |
"pred": "11 of no, 51 of yes", | |
"type": "numerical", | |
"side": "left", | |
"size": 62.0 | |
} | |
], | |
"name": "day <= 19.5", | |
"side": "left", | |
"type": "numerical", | |
"size": 70.0, | |
"pred": "16 of no, 54 of yes" | |
} | |
], | |
"name": "day > 7.5", | |
"side": "right", | |
"type": "numerical", | |
"size": 127.0, | |
"pred": "43 of no, 84 of yes" | |
}, | |
{ | |
"children": [ | |
{ | |
"name": "previous > 1.5", | |
"pred": "0 of no, 3 of yes", | |
"type": "numerical", | |
"side": "right", | |
"size": 3.0 | |
}, | |
{ | |
"children": [ | |
{ | |
"name": "duration > 678.5", | |
"pred": "16 of no, 6 of yes", | |
"type": "numerical", | |
"side": "right", | |
"size": 22.0 | |
}, | |
{ | |
"name": "duration <= 678.5", | |
"pred": "0 of no, 2 of yes", | |
"type": "numerical", | |
"side": "left", | |
"size": 2.0 | |
} | |
], | |
"name": "previous <= 1.5", | |
"side": "left", | |
"type": "numerical", | |
"size": 24.0, | |
"pred": "16 of no, 8 of yes" | |
} | |
], | |
"name": "day <= 7.5", | |
"side": "left", | |
"type": "numerical", | |
"size": 27.0, | |
"pred": "16 of no, 11 of yes" | |
} | |
], | |
"name": "marital != married", | |
"side": "left", | |
"type": "categorical", | |
"size": 154.0, | |
"pred": "59 of no, 95 of yes" | |
} | |
], | |
"name": "duration > 645.5", | |
"side": "right", | |
"type": "numerical", | |
"size": 359.0, | |
"pred": "179 of no, 180 of yes" | |
}, | |
{ | |
"children": [ | |
{ | |
"children": [ | |
{ | |
"children": [ | |
{ | |
"children": [ | |
{ | |
"name": "duration > 339.0", | |
"pred": "1 of no, 4 of yes", | |
"type": "numerical", | |
"side": "right", | |
"size": 5.0 | |
}, | |
{ | |
"name": "duration <= 339.0", | |
"pred": "6 of no, 1 of yes", | |
"type": "numerical", | |
"side": "left", | |
"size": 7.0 | |
} | |
], | |
"name": "month = may", | |
"side": "right", | |
"type": "categorical", | |
"size": 12.0, | |
"pred": "7 of no, 5 of yes" | |
}, | |
{ | |
"children": [ | |
{ | |
"name": "pdays > 35.5", | |
"pred": "11 of no, 62 of yes", | |
"type": "numerical", | |
"side": "right", | |
"size": 73.0 | |
}, | |
{ | |
"name": "pdays <= 35.5", | |
"pred": "1 of no, 0 of yes", | |
"type": "numerical", | |
"side": "left", | |
"size": 1.0 | |
} | |
], | |
"name": "month != may", | |
"side": "left", | |
"type": "categorical", | |
"size": 74.0, | |
"pred": "12 of no, 62 of yes" | |
} | |
], | |
"name": "duration > 180.5", | |
"side": "right", | |
"type": "numerical", | |
"size": 86.0, | |
"pred": "19 of no, 67 of yes" | |
}, | |
{ | |
"children": [ | |
{ | |
"children": [ | |
{ | |
"name": "job = technician", | |
"pred": "2 of no, 1 of yes", | |
"type": "categorical", | |
"side": "right", | |
"size": 3.0 | |
}, | |
{ | |
"name": "job != technician", | |
"pred": "0 of no, 6 of yes", | |
"type": "categorical", | |
"side": "left", | |
"size": 6.0 | |
} | |
], | |
"name": "education = tertiary", | |
"side": "right", | |
"type": "categorical", | |
"size": 9.0, | |
"pred": "2 of no, 7 of yes" | |
}, | |
{ | |
"children": [ | |
{ | |
"name": "marital = divorced", | |
"pred": "0 of no, 1 of yes", | |
"type": "categorical", | |
"side": "right", | |
"size": 1.0 | |
}, | |
{ | |
"name": "marital != divorced", | |
"pred": "18 of no, 1 of yes", | |
"type": "categorical", | |
"side": "left", | |
"size": 19.0 | |
} | |
], | |
"name": "education != tertiary", | |
"side": "left", | |
"type": "categorical", | |
"size": 20.0, | |
"pred": "18 of no, 2 of yes" | |
} | |
], | |
"name": "duration <= 180.5", | |
"side": "left", | |
"type": "numerical", | |
"size": 29.0, | |
"pred": "20 of no, 9 of yes" | |
} | |
], | |
"name": "poutcome = success", | |
"side": "right", | |
"type": "categorical", | |
"size": 115.0, | |
"pred": "39 of no, 76 of yes" | |
}, | |
{ | |
"children": [ | |
{ | |
"children": [ | |
{ | |
"children": [ | |
{ | |
"name": "balance > 5477.5", | |
"pred": "1 of no, 0 of yes", | |
"type": "numerical", | |
"side": "right", | |
"size": 1.0 | |
}, | |
{ | |
"name": "balance <= 5477.5", | |
"pred": "0 of no, 11 of yes", | |
"type": "numerical", | |
"side": "left", | |
"size": 11.0 | |
} | |
], | |
"name": "pdays > 373.0", | |
"side": "right", | |
"type": "numerical", | |
"size": 12.0, | |
"pred": "1 of no, 11 of yes" | |
}, | |
{ | |
"children": [ | |
{ | |
"name": "month = oct", | |
"pred": "11 of no, 16 of yes", | |
"type": "categorical", | |
"side": "right", | |
"size": 27.0 | |
}, | |
{ | |
"name": "month != oct", | |
"pred": "1207 of no, 173 of yes", | |
"type": "categorical", | |
"side": "left", | |
"size": 1380.0 | |
} | |
], | |
"name": "pdays <= 373.0", | |
"side": "left", | |
"type": "numerical", | |
"size": 1407.0, | |
"pred": "1218 of no, 189 of yes" | |
} | |
], | |
"name": "duration > 222.5", | |
"side": "right", | |
"type": "numerical", | |
"size": 1419.0, | |
"pred": "1219 of no, 200 of yes" | |
}, | |
{ | |
"children": [ | |
{ | |
"children": [ | |
{ | |
"name": "day > 19.5", | |
"pred": "6 of no, 9 of yes", | |
"type": "numerical", | |
"side": "right", | |
"size": 15.0 | |
}, | |
{ | |
"name": "day <= 19.5", | |
"pred": "20 of no, 1 of yes", | |
"type": "numerical", | |
"side": "left", | |
"size": 21.0 | |
} | |
], | |
"name": "month = oct", | |
"side": "right", | |
"type": "categorical", | |
"size": 36.0, | |
"pred": "26 of no, 10 of yes" | |
}, | |
{ | |
"children": [ | |
{ | |
"name": "month = mar", | |
"pred": "21 of no, 9 of yes", | |
"type": "categorical", | |
"side": "right", | |
"size": 30.0 | |
}, | |
{ | |
"name": "month != mar", | |
"pred": "2516 of no, 46 of yes", | |
"type": "categorical", | |
"side": "left", | |
"size": 2562.0 | |
} | |
], | |
"name": "month != oct", | |
"side": "left", | |
"type": "categorical", | |
"size": 2592.0, | |
"pred": "2537 of no, 55 of yes" | |
} | |
], | |
"name": "duration <= 222.5", | |
"side": "left", | |
"type": "numerical", | |
"size": 2628.0, | |
"pred": "2563 of no, 65 of yes" | |
} | |
], | |
"name": "poutcome != success", | |
"side": "left", | |
"type": "categorical", | |
"size": 4047.0, | |
"pred": "3782 of no, 265 of yes" | |
} | |
], | |
"name": "duration <= 645.5", | |
"side": "left", | |
"type": "numerical", | |
"size": 4162.0, | |
"pred": "3821 of no, 341 of yes" | |
} | |
], | |
"side": "right", | |
"size": 4521.0 | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment