D3 Examples - Decision Tree Viewer (D3 and Sklearn)

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/d3@2.9.0/d3.v2.min.js"></script>
    <style type="text/css">
​
body {
  font-family: "Helvetica Neue", Helvetica;
}
​
.hint {
  font-size: 12px;
  color: #999;
}
​
.node rect {
  cursor: pointer;
  fill: #fff;
  stroke-width: 1.5px;
}
​
.node text {
  font-size: 11px;
}
​
path.link {
  fill: none;
  stroke: #ccc;
}
​
    </style>
  </head>
  <body>
    <div id="body">
      <div id="footer">
        Decision Tree viewer
        <div class="hint">click to expand or collapse</div>
        <div id="menu">
          <select id="datasets"></select>
        </div>
​
      </div>
    </div>
    <script type="text/javascript">
​
var m = [20, 120, 20, 120],
    w = 1280 - m[1] - m[3],
    h = 800 - m[0] - m[2],
    i = 0,
    rect_width = 80,
    rect_height = 20,
    max_link_width = 20,
    min_link_width = 1.5,
    char_to_pxl = 6,
    root;
​
// Add datasets dropdown
d3.select("#datasets")
    .on("change", function() {
      if (this.value !== '-') {
        d3.json(this.value + ".json", load_dataset);
      }
    })
  .selectAll("option")
    .data([
      "-",
      "iris",
      "boston",
    ])
  .enter().append("option")
    .attr("value", String)
    .text(String);
​
var tree = d3.layout.tree()
    .size([h, w]);
​
var diagonal = d3.svg.diagonal()
    .projection(function(d) { return [d.x, d.y]; });
​
var vis = d3.select("#body").append("svg:svg")
    .attr("width", w + m[1] + m[3])
    .attr("height", h + m[0] + m[2] + 1000)
  .append("svg:g")
    .attr("transform", "translate(" + m[3] + "," + m[0] + ")");
​
// global scale for link width
var link_stoke_scale = d3.scale.linear();
​
var color_map = d3.scale.category10();
​
// stroke style of link - either color or function
var stroke_callback = "#ccc";
​
function load_dataset(json) {
  root = json;
  root.x0 = 0;
  root.y0 = 0;
​
  var n_samples = root.samples;
  var n_labels = root.value.length;
​
  if (n_labels >= 2) {
    stroke_callback = mix_colors;
  } else if (n_labels === 1) {
    stroke_callback = mean_interpolation(root);
  }
​
  link_stoke_scale = d3.scale.linear()
                             .domain([0, n_samples])
                             .range([min_link_width, max_link_width]);
​
  function toggleAll(d) {
    if (d && d.children) {
      d.children.forEach(toggleAll);
      toggle(d);
    }
  }
​
  // Initialize the display to show a few nodes.
  root.children.forEach(toggleAll);
​
  update(root);
}
​
function update(source) {
  var duration = d3.event && d3.event.altKey ? 5000 : 500;
​
  // Compute the new tree layout.
  var nodes = tree.nodes(root).reverse();
​
  // Normalize for fixed-depth.
  nodes.forEach(function(d) { d.y = d.depth * 180; });
​
  // Update the nodes…
  var node = vis.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("svg:g")
      .attr("class", "node")
      .attr("transform", function(d) { return "translate(" + source.x0 + "," + source.y0 + ")"; })
      .on("click", function(d) { toggle(d); update(d); });
​
  nodeEnter.append("svg:rect")
      .attr("x", function(d) {
        var label = node_label(d);
        var text_len = label.length * char_to_pxl;
        var width = d3.max([rect_width, text_len])
        return -width / 2;
      })
      .attr("width", 1e-6)
      .attr("height", 1e-6)
      .attr("rx", function(d) { return d.type === "split" ? 2 : 0;})
      .attr("ry", function(d) { return d.type === "split" ? 2 : 0;})
      .style("stroke", function(d) { return d.type === "split" ? "steelblue" : "olivedrab";})
      .style("fill", function(d) { return d._children ? "lightsteelblue" : "#fff"; });
​
  nodeEnter.append("svg:text")
      .attr("dy", "12px")
      .attr("text-anchor", "middle")
      .text(node_label)
      .style("fill-opacity", 1e-6);
​
  // Transition nodes to their new position.
  var nodeUpdate = node.transition()
      .duration(duration)
      .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });
​
  nodeUpdate.select("rect")
      .attr("width", function(d) {
        var label = node_label(d);
        var text_len = label.length * char_to_pxl;
        var width = d3.max([rect_width, text_len])
        return width;
      })
      .attr("height", rect_height)
      .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.x + "," + source.y + ")"; })
      .remove();
​
  nodeExit.select("rect")
      .attr("width", 1e-6)
      .attr("height", 1e-6);
​
  nodeExit.select("text")
      .style("fill-opacity", 1e-6);
​
  // Update the links
  var link = vis.selectAll("path.link")
      .data(tree.links(nodes), function(d) { return d.target.id; });
​
  // Enter any new links at the parent's previous position.
  link.enter().insert("svg:path", "g")
      .attr("class", "link")
      .attr("d", function(d) {
        var o = {x: source.x0, y: source.y0};
        return diagonal({source: o, target: o});
      })
      .transition()
      .duration(duration)
      .attr("d", diagonal)
      .style("stroke-width", function(d) {return link_stoke_scale(d.target.samples);})
      .style("stroke", stroke_callback);
​
  // Transition links to their new position.
  link.transition()
      .duration(duration)
      .attr("d", diagonal)
      .style("stroke-width", function(d) {return link_stoke_scale(d.target.samples);})
      .style("stroke", stroke_callback);
​
  // 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.
function toggle(d) {
  if (d.children) {
    d._children = d.children;
    d.children = null;
  } else {
    d.children = d._children;
    d._children = null;
  }
}
​
// Node labels
function node_label(d) {
  if (d.type === "leaf") {
    // leaf
    var formatter = d3.format(".2f");
    var vals = [];
    d.value.forEach(function(v) {
        vals.push(formatter(v));
    });
    return "[" + vals.join(", ") + "]";
  } else {
    // split node
    return d.label;
  }
}
​
/**
 * Mixes colors according to the relative frequency of classes.
 */
function mix_colors(d) {
  var value = d.target.value;
  var sum = d3.sum(value);
  var col = d3.rgb(0, 0, 0);
  value.forEach(function(val, i) {
    var label_color = d3.rgb(color_map(i));
    var mix_coef = val / sum;
    col.r += mix_coef * label_color.r;
    col.g += mix_coef * label_color.g;
    col.b += mix_coef * label_color.b;
  });
  return col;
}
​
​
/**
 * A linear interpolator for value[0].
 *
 * Useful for link coloring in regression trees.
 */
function mean_interpolation(root) {
​
  var max = 1e-9,
      min = 1e9;
​
  function recurse(node) {
    if (node.value[0] > max) {
      max = node.value[0];
    }
​
    if (node.value[0] < min) {
      min = node.value[0];
    }
​
    if (node.children) {
      node.children.forEach(recurse);
    }
  }
  recurse(root);
​
  var scale = d3.scale.linear().domain([min, max])
                               .range(["#2166AC","#B2182B"]);
​
  function interpolator(d) {
    return scale(d.target.value[0]);
  }
​
  return interpolator;
}
​
    </script>
  </body>
</html>
​
    