Updated Answer with collapsible graph using d3js in Jupyter Notebook
Start of 1st cell in notebook
%%html
<div id="d3-example"></div>
<style>
.node circle {
cursor: pointer;
stroke: #3182bd;
stroke-width: 1.5px;
}
.node text {
font: 10px sans-serif;
pointer-events: none;
text-anchor: middle;
}
line.link {
fill: none;
stroke: #9ecae1;
stroke-width: 1.5px;
}
</style>
End of 1st cell in notebook
Start of 2nd cell in notebook
%%javascript
// We load the d3.js library from the Web.
require.config({paths:
{d3: "http://d3js.org/d3.v3.min"}});
require(["d3"], function(d3) {
// The code in this block is executed when the
// d3.js library has been loaded.
// First, we specify the size of the canvas
// containing the visualization (size of the
// <div> element).
var width = 960,
height = 500,
root;
// We create a color scale.
var color = d3.scale.category10();
// We create a force-directed dynamic graph layout.
// var force = d3.layout.force()
// .charge(-120)
// .linkDistance(30)
// .size([width, height]);
var force = d3.layout.force()
.linkDistance(80)
.charge(-120)
.gravity(.05)
.size([width, height])
.on("tick", tick);
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height);
var link = svg.selectAll(".link"),
node = svg.selectAll(".node");
// In the <div> element, we create a <svg> graphic
// that will contain our interactive visualization.
var svg = d3.select("#d3-example").select("svg")
if (svg.empty()) {
svg = d3.select("#d3-example").append("svg")
.attr("width", width)
.attr("height", height);
}
var link = svg.selectAll(".link"),
node = svg.selectAll(".node");
// We load the JSON file.
d3.json("graph2.json", function(error, json) {
// In this block, the file has been loaded
// and the 'graph' object contains our graph.
if (error) throw error;
else
test(1);
root = json;
test(2);
console.log(root);
update();
});
function test(rr){console.log('yolo'+String(rr));}
function update() {
test(3);
var nodes = flatten(root),
links = d3.layout.tree().links(nodes);
// Restart the force layout.
force
.nodes(nodes)
.links(links)
.start();
// Update links.
link = link.data(links, function(d) { return d.target.id; });
link.exit().remove();
link.enter().insert("line", ".node")
.attr("class", "link");
// Update nodes.
node = node.data(nodes, function(d) { return d.id; });
node.exit().remove();
var nodeEnter = node.enter().append("g")
.attr("class", "node")
.on("click", click)
.call(force.drag);
nodeEnter.append("circle")
.attr("r", function(d) { return Math.sqrt(d.size) / 10 || 4.5; });
nodeEnter.append("text")
.attr("dy", ".35em")
.text(function(d) { return d.name; });
node.select("circle")
.style("fill", color);
}
function tick() {
link.attr("x1", function(d) { return d.source.x; })
.attr("y1", function(d) { return d.source.y; })
.attr("x2", function(d) { return d.target.x; })
.attr("y2", function(d) { return d.target.y; });
node.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });
}
function color(d) {
return d._children ? "#3182bd" // collapsed package
: d.children ? "#c6dbef" // expanded package
: "#fd8d3c"; // leaf node
}
// Toggle children on click.
function click(d) {
if (d3.event.defaultPrevented) return; // ignore drag
if (d.children) {
d._children = d.children;
d.children = null;
} else {
d.children = d._children;
d._children = null;
}
update();
}
function flatten(root) {
var nodes = [], i = 0;
function recurse(node) {
if (node.children) node.children.forEach(recurse);
if (!node.id) node.id = ++i;
nodes.push(node);
}
recurse(root);
return nodes;
}
});
End of 2nd cell in notebook
Contents of graph2.json
{
"name": "flare",
"children": [
{
"name": "analytics"
},
{
"name": "graph"
}
]
}
The graph
Click on flare, which is the root node, the other nodes will collapse
Github repository for notebook used here: Collapsible tree in ipython notebook
References
Old Answer
I found this tutorial here for interactive visualization of Decision Tree in Jupyter Notebook.
Install graphviz
There are 2 steps for this :
Step 1: Install graphviz for python using pip
pip install graphviz
Step 2: Then you have to install graphviz seperately. Check this link.
Then based on your system OS you need to set the path accordingly:
For windows and Mac OS check this link.
For Linux/Ubuntu check this link
Install ipywidgets
Using pip
pip install ipywidgets
jupyter nbextension enable --py widgetsnbextension
Using conda
conda install -c conda-forge ipywidgets
Now for the code
from IPython.display import SVG
from graphviz import Source
from sklearn.datasets load_iris
from sklearn.tree import DecisionTreeClassifier, export_graphviz
from sklearn import tree
from ipywidgets import interactive
from IPython.display import display
Load the dataset, say for instance iris dataset in this case
data = load_iris()
#Get the feature matrix
features = data.data
#Get the labels for the sampels
target_label = data.target
#Get feature names
feature_names = data.feature_names
**Function to plot the decision tree **
def plot_tree(crit, split, depth, min_split, min_leaf=0.17):
classifier = DecisionTreeClassifier(random_state = 123, criterion = crit, splitter = split, max_depth = depth, min_samples_split=min_split, min_samples_leaf=min_leaf)
classifier.fit(features, target_label)
graph = Source(tree.export_graphviz(classifier, out_file=None, feature_names=feature_names, class_names=['0', '1', '2'], filled = True))
display(SVG(graph.pipe(format='svg')))
return classifier
Call the function
decision_plot = interactive(plot_tree, crit = ["gini", "entropy"], split = ["best", "random"] , depth=[1, 2, 3, 4, 5, 6, 7], min_split=(0.1,1), min_leaf=(0.1,0.2,0.3,0.5))
display(decision_plot)
You will get the following the graph
You can change the parameters interactively in the output cell by the chnaging the following values
Another decision tree on the same data but different parameters
References :
