Skip to content

Instantly share code, notes, and snippets.

@jorgeehernandez
Last active November 1, 2016 21:51
Show Gist options
  • Save jorgeehernandez/2599b0db54f56d05d6311f39bd2815bb to your computer and use it in GitHub Desktop.
Save jorgeehernandez/2599b0db54f56d05d6311f39bd2815bb to your computer and use it in GitHub Desktop.
Tree diagram
license: mit
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<script src="https://d3js.org/d3.v4.min.js"></script>
<style>
.node circle {
fill: #999;
}
.node text {
font: 10px sans-serif;
}
.node--internal circle {
fill: #555;
}
.node--internal text {
text-shadow: 0 1px 0 #fff, 0 -1px 0 #fff, 1px 0 0 #fff, -1px 0 0 #fff;
}
.link {
fill: none;
stroke: #555;
stroke-opacity: 0.4;
stroke-width: 1.5px;
}
.rect{
fill:red;
stroke:black;
stroke-width:2;
opacity:0.5;
}
}
</style>
</head>
<body>
<svg width="400" height="400"></svg>
<script>
var margin = {top: 20, right: 120, bottom: 20, left: 120},
width = 960 - margin.right - margin.left,
height = 800 - margin.top - margin.bottom;
var i = 0,duration = 750,root;
var tree = d3.tree()
.size([height, width]);
var svg = d3.select("body").append("svg")
.attr("width", width + margin.right + margin.left)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
var stratify = d3.stratify()
.parentId(function(d) { return d.id.substring(0, d.id.lastIndexOf(".")); });
d3.csv("treeCsv.csv", function(error, data) {
if (error) throw error;
root = stratify(data).sort(function(a, b) {
return (a.height - b.height) || a.id.localeCompare(b.id);
});
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);
});
function update(){
// Compute the new tree layout.
var nodes = tree.nodes(root).reverse(),
links = 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 ? -10 : 10; })
.attr("dy", ".35em")
.attr("text-anchor", function(d) { return d.children || d._children ? "end":
"start"; })
.text(function(d) { return d.name; })
.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", 4.5)
.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; });
// Enter any new links at the parent's previous position.
link.enter().insert("path", "g")
.attr("class", "link")
.attr("d", function(d) {
var o = {x: source.x0, y: source.y0};
return diagonal({source: o, target: o});
});
// Transition links to their new position.
link.transition()
.duration(duration)
.attr("d", diagonal);
// 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);
}
</script>
</body>
id value
flare
flare.analytics
flare.analytics.cluster
flare.analytics.cluster.AgglomerativeCluster 3938
flare.analytics.cluster.CommunityStructure 3812
flare.analytics.cluster.HierarchicalCluster 6714
flare.analytics.cluster.MergeEdge 743
flare.analytics.graph
flare.analytics.graph.BetweennessCentrality 3534
flare.analytics.graph.LinkDistance 5731
flare.analytics.graph.MaxFlowMinCut 7840
flare.analytics.graph.ShortestPaths 5914
flare.analytics.graph.SpanningTree 3416
flare.analytics.optimization
flare.analytics.optimization.AspectRatioBanker 7074
flare.animate
flare.animate.Easing 17010
flare.animate.FunctionSequence 5842
flare.animate.interpolate
flare.animate.interpolate.ArrayInterpolator 1983
flare.animate.interpolate.ColorInterpolator 2047
flare.animate.interpolate.DateInterpolator 1375
flare.animate.interpolate.Interpolator 8746
flare.animate.interpolate.MatrixInterpolator 2202
flare.animate.interpolate.NumberInterpolator 1382
flare.animate.interpolate.ObjectInterpolator 1629
flare.animate.interpolate.PointInterpolator 1675
flare.animate.interpolate.RectangleInterpolator 2042
flare.animate.ISchedulable 1041
flare.animate.Parallel 5176
flare.animate.Pause 449
flare.animate.Scheduler 5593
flare.animate.Sequence 5534
flare.animate.Transition 9201
flare.animate.Transitioner 19975
flare.animate.TransitionEvent 1116
flare.animate.Tween 6006
flare.data
flare.data.converters
flare.data.converters.Converters 721
flare.data.converters.DelimitedTextConverter 4294
flare.data.converters.GraphMLConverter 9800
flare.data.converters.IDataConverter 1314
flare.data.converters.JSONConverter 2220
flare.data.DataField 1759
flare.data.DataSchema 2165
flare.data.DataSet 586
flare.data.DataSource 3331
flare.data.DataTable 772
flare.data.DataUtil 3322
flare.display
flare.display.DirtySprite 8833
flare.display.LineSprite 1732
flare.display.RectSprite 3623
flare.display.TextSprite 10066
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment