Skip to content

Instantly share code, notes, and snippets.

@cynddl

cynddl/_.md

Created February 12, 2014 22:54
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save cynddl/8966231 to your computer and use it in GitHub Desktop.
Save cynddl/8966231 to your computer and use it in GitHub Desktop.
Download ZIP
nsa-hierarchical
Raw
_.md
Raw
config.json
{"description":"nsa-hierarchical","endpoint":"","display":"svg","public":true,"require":[],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"data.json":{"default":true,"vim":false,"emacs":false,"fontSize":12},"treeData.json":{"default":true,"vim":false,"emacs":false,"fontSize":12},"style.css":{"default":true,"vim":false,"emacs":false,"fontSize":12},"_.md":{"default":true,"vim":false,"emacs":false,"fontSize":12},"config.json":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"fullscreen":false,"play":false,"loop":false,"restart":false,"autoinit":true,"pause":true,"loop_type":"pingpong","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01,"inline-console":false,"thumbnail":"http://i.imgur.com/IHrgLXz.png"}
Raw
data.json
{
"name": "root",
"children": [{
"name": "[[NSA]]",
"children": [{
"name": "[[BULLRUN]]",
"children": [{
"name": "[[PAINTEDEAGLE]]"
}, {
"name": "[[PAWLEYS]]"
}, {
"name": "[[PENDLETON]]"
}, {
"name": "[[PICARESQUE]]"
}, {
"name": "[[PIEDMONT]]"
}, {
"name": "[[PITCHFORD]]"
}, {
"name": "[[AMBULANT]]"
}, {
"name": "[[APERIODIC]]"
}, {
"name": "[[AUNTIE]]"
}, {
"name": "[[ENDUE]]"
}]
}, {
"name": "[[PRISM]]",
"children": [{
"name": "[[MOONPENNY]]"
}, {
"name": "[[PRINTAURA]]",
"children": [{
"name": "[[SCISSORS]]",
"children": [{
"name": "[[CONVEYANCE]]",
"children": [{
"name": "[[NUCLEON]]"
}]
}, {
"name": "[[FALLOUT]]",
"children": [{
"name": "[[MAINWAY]]"
}, {
"name": "[[MARINA]]"
}]
}, {
"name": "[[PINWALE]]"
}]
}, {
"name": "[[TRAFFICTHIEF]]"
}]
}, {
"name": "[[SCALPEL]]"
}, {
"name": "[[SCS]]"
}, {
"name": "[[TIMBERLINE]]"
}, {
"name": "[[BOUNDLESSINFORMANT]]",
"children": [{
"name": "[[FASCIA]]",
"children": [{
"name": "[[CHALKFUN]]"
}, {
"name": "[[DANCINGOASIS]]"
}]
}]
}, {
"name": "[[CARBOY]]"
}, {
"name": "[[CORALINE]]"
}, {
"name": "[[GARLICK]]"
}, {
"name": "[[IRONSAND]]"
}, {
"name": "[[JACKKNIFE]]"
}, {
"name": "[[LADYLOVE]]"
}, {
"name": "[[LEMONWOOD]]"
}, {
"name": "[[SHOALBAY]]"
}, {
"name": "[[SNICK]]"
}, {
"name": "[[SOUNDER]]"
}, {
"name": "[[STELLAR]]"
}]
}, {
"name": "[[TAO]]",
"children": [{
"name": "[[ROC]]",
"children": [{
"name": "[[STRONGMITE]]"
}, {
"name": "[[CROSSBEAM]]"
}]
}, {
"name": "[[PARCHDUSK]]"
}, {
"name": "[[SOMBERKNAVE]]"
}, {
"name": "[[ANGRYNEIGHBOR]]",
"children": [{
"name": "[[NIGHTWATCH]]"
}, {
"name": "[[CTX4000]]"
}, {
"name": "[[CW]]"
}, {
"name": "[[LOUDAUTO]]"
}, {
"name": "[[PHOTOANGLO]]"
}, {
"name": "[[SURLYSPAWN]]"
}, {
"name": "[[VIEWPLATE]]"
}]
}, {
"name": "[[ARKSTREAM]]"
}, {
"name": "[[BACONRIDGE]]"
}, {
"name": "[[BANANAGLEE]]"
}, {
"name": "[[BSR]]"
}, {
"name": "[[CHIMNEYPOOL]]",
"children": [{
"name": "[[COTTONMOUTH-I]]"
}, {
"name": "[[COTTONMOUTH-II]]"
}, {
"name": "[[COTTONMOUTH-III]]"
}, {
"name": "[[DROPOUTJEEP]]"
}]
}, {
"name": "[[DARKTHUNDER]]"
}, {
"name": "[[DEITYBOUNCE]]"
}, {
"name": "[[FEEDTROUGH]]"
}, {
"name": "[[FOXACID]]",
"children": [{
"name": "[[FERRETCANNON]]",
"children": [{
"name": "[[PACKETWRENCH]]"
}, {
"name": "[[PEDDLECHEAP]]"
}, {
"name": "[[BEACHHEAD]]"
}, {
"name": "[[UNITEDRAKE]]"
}]
}]
}, {
"name": "[[GOURMETTROUGH]]"
}, {
"name": "[[HEADWATER]]"
}, {
"name": "[[INTERDICTION]]",
"children": [{
"name": "[[BULLDOZER]]"
}, {
"name": "[[FLUXBABBIT]]"
}, {
"name": "[[IRATEMONK]]"
}]
}, {
"name": "[[IRONCHEF]]"
}, {
"name": "[[JETPLOW]]"
}, {
"name": "[[MIDDLEMAN]]"
}, {
"name": "[[NIGHTSTAND]]"
}, {
"name": "[[QUANTUM]]",
"children": [{
"name": "[[QUANTUMBOT]]"
}, {
"name": "[[QUANTUMCOOKIE]]"
}, {
"name": "[[QUANTUMCOPPER]]"
}, {
"name": "[[QUANTUMNATION]]"
}, {
"name": "[[QUANTUMSKY]]"
}, {
"name": "[[MUTANTBROTH]]"
}, {
"name": "[[QUANTUM INSERT]]"
}, {
"name": "[[QUANTUMTHEORY]]",
"children": [{
"name": "[[ISLANDTRANSPORT]]"
}]
}]
}, {
"name": "[[SCHOOLMONTANA]]"
}, {
"name": "[[SOUFFLETROUGH]]"
}, {
"name": "[[SPARROW-II]]"
}, {
"name": "[[STUCCOMONTANA]]",
"children": [{
"name": "[[SIERRAMONTANA]]"
}]
}]
}, {
"name": "[[UPSTREAM]]",
"children": [{
"name": "[[STORMBREW]]",
"children": [{
"name": "[[MADCAPOCELOT]]"
}, {
"name": "[[OCELOT]]"
}, {
"name": "[[ARTIFICE]]"
}, {
"name": "[[WOLFPOINT]]"
}]
}, {
"name": "[[BLARNEY]]"
}, {
"name": "[[FAIRVIEW]]"
}, {
"name": "[[OAKSTAR]]",
"children": [{
"name": "[[ORANGEBLOSSOM]]"
}, {
"name": "[[SHIFTINGSHADOW]]"
}, {
"name": "[[SILVERZEPHYR]]"
}, {
"name": "[[BLUEZEPHYR]]"
}, {
"name": "[[COBALTFALCON]]"
}, {
"name": "[[MONKEYROCKET]]"
}, {
"name": "[[ORANGECRUSH]]"
}, {
"name": "[[YACHTSHOP]]"
}]
}]
}, {
"name": "[[XKEYSCORE]]"
}]
}]
}
Raw
inlet.js
var svg = d3.select("svg")
.attr("width", tributary.sw)
.attr("height", tributary.sh)
.append("g")
.attr("transform", "translate(" + tributary.sw / 2 + "," + (tributary.sh / 2 + 10) + ")");
var root = tributary.data;
//var root = tributary.treeData[0];
var width = 960,
height = 700,
radius = Math.min(width, height) / 2;
var x = d3.scale.linear()
.range([0, 2 * Math.PI]);
var y = d3.scale.sqrt()
.range([0, radius]);
var color = d3.scale.category20c();
var partition = d3.layout.partition()
.value(function(d) { return 10; });
var arc = d3.svg.arc()
.startAngle(function(d) { return Math.max(0, Math.min(2 * Math.PI, x(d.x))); })
.endAngle(function(d) { return Math.max(0, Math.min(2 * Math.PI, x(d.x + d.dx))); })
.innerRadius(function(d) { return Math.max(0, y(d.y)); })
.outerRadius(function(d) { return Math.max(0, y(d.y + d.dy)); });
var g = svg.selectAll("g")
.data(partition.nodes(root))
.enter().append("g");
var path = g.append("path")
.attr("d", arc)
.style("fill", function(d) { return color((d.children ? d : d.parent).name); })
.on("click", click);
var text = g.append("text")
.attr("class", "label")
.attr("x", function(d) { return y(d.y); })
.attr("dx", "6") // margin
.attr("dy", ".35em") // vertical-align
.text(function(d) { return d.name.substring(2, d.name.length -2); });
function computeTextRotation(d) {
var angle = x(d.x + d.dx / 2) - Math.PI / 2;
return angle / Math.PI * 180;
}
text.attr("transform", function(d) { return "rotate(" + computeTextRotation(d) + ")"; });
function click(d) {
// fade out all text elements
text.transition().attr("opacity", 0);
path.transition()
.duration(750)
.attrTween("d", arcTween(d))
.each("end", function(e, i) {
// check if the animated element's data e lies within the visible angle span given in d
if (e.x >= d.x && e.x < (d.x + d.dx)) {
// get a selection of the associated text element
var arcText = d3.select(this.parentNode).select("text");
// fade in the text element and recalculate positions
arcText.transition().duration(750)
.attr("opacity", 1)
.attr("transform", function() { return "rotate(" + computeTextRotation(e) + ")" })
.attr("x", function(d) { return y(d.y); });
}
});
}
d3.select(self.frameElement).style("height", height + "px");
// Interpolate the scales!
function arcTween(d) {
var xd = d3.interpolate(x.domain(), [d.x, d.x + d.dx]),
yd = d3.interpolate(y.domain(), [d.y, 1]),
yr = d3.interpolate(y.range(), [d.y ? 20 : 0, radius]);
return function(d, i) {
return i
? function(t) { return arc(d); }
: function(t) { x.domain(xd(t)); y.domain(yd(t)).range(yr(t)); return arc(d); };
};
}
Raw
style.css
.node circle {
fill: #fff;
stroke: steelblue;
stroke-width: 3px;
}
.label { font: 10px sans-serif; }
.link {
fill: none;
stroke: #ccc;
stroke-width: 2px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment