Skip to content

Instantly share code, notes, and snippets.

@felix-last

felix-last/.block

Forked from mbostock/.block
Last active October 27, 2016 06:09
Show Gist options
  • Save felix-last/aa0080b3ce3b2abd058ce8e0c5e63d80 to your computer and use it in GitHub Desktop.
Save felix-last/aa0080b3ce3b2abd058ce8e0c5e63d80 to your computer and use it in GitHub Desktop.
Download ZIP
Cluster Dendrogram
Raw
.block
license: gpl-3.0
height: 2000
border: no
Raw
README.md

A dendrogram is a node-link diagram that places leaf nodes of the tree at the same depth. In this example, the classes (leaf nodes) are aligned on the right edge, with the packages (internal nodes) to the left. Data shows the Flare class hierarchy, courtesy Jeff Heer.

Compare to this radial layout.

Raw
flare.csv
id value
root
root.a false
root.a.February 2008 false
root.a.April 2008 false
root.a.June 2008 false
root.a.August 2008 false
root.a.October 2008 false
root.a.December 2008 false
root.a.February 2009 false
root.a.April 2009 false
root.a.June 2009 false
root.a.August 2009 true
root.a.October 2009 false
root.a.December 2009 false
root.a.February 2010 false
root.a.April 2010 false
root.a.June 2010 false
root.a.August 2010 false
root.a.October 2010 false
root.a.December 2010 false
root.b false
root.b.February 2008 false
root.b.April 2008 false
root.b.June 2008 false
root.b.August 2008 false
root.b.October 2008 false
root.b.December 2008 false
root.b.February 2009 false
root.b.April 2009 false
root.b.June 2009 false
root.b.August 2009 true
root.b.October 2009 false
root.b.December 2009 false
root.b.February 2010 false
root.b.April 2010 false
root.b.June 2010 false
root.b.August 2010 false
root.b.October 2010 false
root.b.December 2010 false
root.c false
root.c.February 2008 false
root.c.April 2008 false
root.c.June 2008 false
root.c.August 2008 false
root.c.October 2008 false
root.c.December 2008 false
root.c.February 2009 false
root.c.April 2009 false
root.c.June 2009 false
root.c.August 2009 true
root.c.October 2009 false
root.c.December 2009 false
root.c.February 2010 false
root.c.April 2010 false
root.c.June 2010 false
root.c.August 2010 false
root.c.October 2010 false
root.c.December 2010 false
root.d false
root.d.February 2008 false
root.d.April 2008 false
root.d.June 2008 false
root.d.August 2008 false
root.d.October 2008 false
root.d.December 2008 false
root.d.February 2009 false
root.d.April 2009 false
root.d.June 2009 false
root.d.August 2009 true
root.d.October 2009 false
root.d.December 2009 false
root.d.February 2010 false
root.d.April 2010 false
root.d.June 2010 false
root.d.August 2010 false
root.d.October 2010 false
root.d.December 2010 false
root.e false
root.e.February 2008 false
root.e.April 2008 false
root.e.June 2008 false
root.e.August 2008 false
root.e.October 2008 false
root.e.December 2008 false
root.e.February 2009 false
root.e.April 2009 false
root.e.June 2009 false
root.e.August 2009 true
root.e.October 2009 false
root.e.December 2009 false
root.e.February 2010 false
root.e.April 2010 false
root.e.June 2010 false
root.e.August 2010 false
root.e.October 2010 false
root.e.December 2010 false
root.f false
root.f.February 2008 false
root.f.April 2008 false
root.f.June 2008 false
root.f.August 2008 false
root.f.October 2008 false
root.f.December 2008 false
root.f.February 2009 false
root.f.April 2009 false
root.f.June 2009 false
root.f.August 2009 true
root.f.October 2009 false
root.f.December 2009 false
root.f.February 2010 false
root.f.April 2010 false
root.f.June 2010 false
root.f.August 2010 false
root.f.October 2010 false
root.f.December 2010 false
root.g false
root.g.February 2008 false
root.g.April 2008 false
root.g.June 2008 false
root.g.August 2008 false
root.g.October 2008 false
root.g.December 2008 false
root.g.February 2009 false
root.g.April 2009 false
root.g.June 2009 false
root.g.August 2009 true
root.g.October 2009 false
root.g.December 2009 false
root.g.February 2010 false
root.g.April 2010 false
root.g.June 2010 false
root.g.August 2010 false
root.g.October 2010 false
root.g.December 2010 false
root.h false
root.h.February 2008 false
root.h.April 2008 false
root.h.June 2008 false
root.h.August 2008 false
root.h.October 2008 false
root.h.December 2008 false
root.h.February 2009 false
root.h.April 2009 false
root.h.June 2009 false
root.h.August 2009 true
root.h.October 2009 false
root.h.December 2009 false
root.h.February 2010 false
root.h.April 2010 false
root.h.June 2010 false
root.h.August 2010 false
root.h.October 2010 false
root.h.December 2010 false
root.i false
root.i.February 2008 false
root.i.April 2008 false
root.i.June 2008 false
root.i.August 2008 false
root.i.October 2008 false
root.i.December 2008 false
root.i.February 2009 false
root.i.April 2009 false
root.i.June 2009 false
root.i.August 2009 true
root.i.October 2009 false
root.i.December 2009 false
root.i.February 2010 false
root.i.April 2010 false
root.i.June 2010 false
root.i.August 2010 false
root.i.October 2010 false
root.i.December 2010 false
root.j false
root.j.February 2008 false
root.j.April 2008 false
root.j.June 2008 false
root.j.August 2008 false
root.j.October 2008 false
root.j.December 2008 false
root.j.February 2009 false
root.j.April 2009 false
root.j.June 2009 false
root.j.August 2009 true
root.j.October 2009 false
root.j.December 2009 false
root.j.February 2010 false
root.j.April 2010 false
root.j.June 2010 false
root.j.August 2010 false
root.j.October 2010 false
root.j.December 2010 false
root.k false
root.k.February 2008 false
root.k.April 2008 false
root.k.June 2008 false
root.k.August 2008 false
root.k.October 2008 false
root.k.December 2008 false
root.k.February 2009 false
root.k.April 2009 false
root.k.June 2009 false
root.k.August 2009 true
root.k.October 2009 false
root.k.December 2009 false
root.k.February 2010 false
root.k.April 2010 false
root.k.June 2010 false
root.k.August 2010 false
root.k.October 2010 false
root.k.December 2010 false
root.l false
root.l.February 2008 false
root.l.April 2008 false
root.l.June 2008 false
root.l.August 2008 false
root.l.October 2008 false
root.l.December 2008 false
root.l.February 2009 false
root.l.April 2009 false
root.l.June 2009 false
root.l.August 2009 true
root.l.October 2009 false
root.l.December 2009 false
root.l.February 2010 false
root.l.April 2010 false
root.l.June 2010 false
root.l.August 2010 false
root.l.October 2010 false
root.l.December 2010 false
root.m false
root.m.February 2008 false
root.m.April 2008 false
root.m.June 2008 false
root.m.August 2008 false
root.m.October 2008 false
root.m.December 2008 false
root.m.February 2009 false
root.m.April 2009 false
root.m.June 2009 false
root.m.August 2009 true
root.m.October 2009 false
root.m.December 2009 false
root.m.February 2010 false
root.m.April 2010 false
root.m.June 2010 false
root.m.August 2010 false
root.m.October 2010 false
root.m.December 2010 false
root.n false
root.n.February 2008 false
root.n.April 2008 false
root.n.June 2008 false
root.n.August 2008 false
root.n.October 2008 false
root.n.December 2008 false
root.n.February 2009 false
root.n.April 2009 false
root.n.June 2009 false
root.n.August 2009 true
root.n.October 2009 false
root.n.December 2009 false
root.n.February 2010 false
root.n.April 2010 false
root.n.June 2010 false
root.n.August 2010 false
root.n.October 2010 false
root.n.December 2010 false
Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<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;
}
</style>
<svg width="960" height="2000"></svg>
<script src="//d3js.org/d3.v4.min.js"></script>
<script>
var svg = d3.select("svg"),
width = +svg.attr("width"),
height = +svg.attr("height"),
g = svg.append("g").attr("transform", "translate(40,0)");
var tree = d3.cluster()
.size([height, width - 160]);
var stratify = d3.stratify()
.parentId(function(d) { return d.id.substring(0, d.id.lastIndexOf(".")); });
d3.csv("flare.csv", function(error, data) {
if (error) throw error;
var root = stratify(data);
//.sort(function(a, b) { return (a.height - b.height) || a.id.localeCompare(b.id); });
tree(root);
var link = g.selectAll(".link")
.data(root.descendants().slice(1))
.enter().append("path")
.attr("class", "link")
.attr("d", function(d) {
return "M" + d.y + "," + d.x
+ "C" + (d.parent.y + 100) + "," + d.x
+ " " + (d.parent.y + 100) + "," + d.parent.x
+ " " + d.parent.y + "," + d.parent.x;
});
var node = g.selectAll(".node")
.data(root.descendants())
.enter().append("g")
.attr("class", function(d) { return "node" + (d.children ? " node--internal" : " node--leaf"); })
.attr("transform", function(d) { return "translate(" + d.y + "," + d.x + ")"; })
node.append("circle")
.attr("r", 2.5);
node.append("text")
.attr("dy", 3)
.attr("x", function(d) { return d.children ? -8 : 8; })
.style("text-anchor", function(d) { return d.children ? "end" : "start"; })
.style("fill", function(d){return (d.id.indexOf('August 2009') > -1 ? '#FF7F0E' : 'black')} )
.text(function(d) { return d.id.substring(d.id.lastIndexOf(".") + 1); });
});
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment