An interactive version of a Reingold–Tilford tree. Click on the nodes to expand or collapse.
http://www.brightpointinc.com/interactive/budget/index.html?source=d3js
An interactive version of a Reingold–Tilford tree. Click on the nodes to expand or collapse.
http://www.brightpointinc.com/interactive/budget/index.html?source=d3js
<!DOCTYPE html> | |
<meta charset="utf-8"> | |
<style> | |
.node { | |
cursor: pointer; | |
} | |
.node circle { | |
fill: #A6C776; | |
stroke: white; | |
stroke-width: 1.5px; | |
} | |
.node text { | |
font: 6px sans-serif; | |
} | |
.link { | |
fill: none; | |
stroke: #A6C776; | |
stroke-width: 15px; | |
stroke-opacity: 0.5; | |
stroke-linecap: round; | |
} | |
</style> | |
<body> | |
<script src="http://d3js.org/d3.v3.min.js"></script> | |
<script> | |
var flare = { | |
"name": "active accounts", | |
"children": [ | |
{ | |
"name": "google_analytics", | |
"size": 2998 | |
}, | |
{ | |
"name": "mixpanel", | |
"size": 1805 | |
}, | |
{ | |
"name": "customer_io", | |
"size": 426 | |
}, | |
{ | |
"name": "intercom", | |
"size": 421 | |
}, | |
{ | |
"name": "kissmetrics", | |
"size": 380 | |
}, | |
{ | |
"name": "keen_io", | |
"size": 265 | |
}, | |
{ | |
"name": "heap", | |
"size": 257 | |
}, | |
{ | |
"name": "crazy_egg", | |
"size": 250 | |
}, | |
{ | |
"name": "clicky", | |
"size": 246 | |
}, | |
{ | |
"name": "optimizely", | |
"size": 234 | |
}, | |
{ | |
"name": "ad_roll", | |
"size": 203 | |
}, | |
{ | |
"name": "pingdom", | |
"size": 199 | |
}, | |
{ | |
"name": "google_tag_manager", | |
"size": 197 | |
}, | |
{ | |
"name": "olark", | |
"size": 186 | |
}, | |
{ | |
"name": "ad_words", | |
"size": 163 | |
}, | |
{ | |
"name": "facebook_conversion_tracking", | |
"size": 158 | |
}, | |
{ | |
"name": "go_squared", | |
"size": 158 | |
}, | |
{ | |
"name": "flurry", | |
"size": 144 | |
}, | |
{ | |
"name": "mail_chimp", | |
"size": 140 | |
}, | |
{ | |
"name": "inspectlet", | |
"size": 134 | |
}, | |
{ | |
"name": "perfect_audience", | |
"size": 129 | |
}, | |
{ | |
"name": "woopra", | |
"size": 115 | |
}, | |
{ | |
"name": "webhooks", | |
"size": 112 | |
}, | |
{ | |
"name": "chartbeat", | |
"size": 110 | |
}, | |
{ | |
"name": "sentry", | |
"size": 94 | |
}, | |
{ | |
"name": "quantcast", | |
"size": 91 | |
}, | |
{ | |
"name": "facebook_custom_audiences", | |
"size": 89 | |
}, | |
{ | |
"name": "gauges", | |
"size": 87 | |
}, | |
{ | |
"name": "trak_io", | |
"size": 84 | |
}, | |
{ | |
"name": "visual_website_optimizer", | |
"size": 81 | |
}, | |
{ | |
"name": "twitter_ads", | |
"size": 76 | |
}, | |
{ | |
"name": "errorception", | |
"size": 70 | |
}, | |
{ | |
"name": "user_voice", | |
"size": 68 | |
}, | |
{ | |
"name": "vero", | |
"size": 64 | |
}, | |
{ | |
"name": "hub_spot", | |
"size": 64 | |
}, | |
{ | |
"name": "amplitude", | |
"size": 57 | |
}, | |
{ | |
"name": "bugsnag", | |
"size": 54 | |
}, | |
{ | |
"name": "zendesk", | |
"size": 50 | |
}, | |
{ | |
"name": "localytics", | |
"size": 49 | |
}, | |
{ | |
"name": "hit_tail", | |
"size": 43 | |
}, | |
{ | |
"name": "qualaroo", | |
"size": 40 | |
}, | |
{ | |
"name": "rollbar", | |
"size": 38 | |
}, | |
{ | |
"name": "klaviyo", | |
"size": 37 | |
}, | |
{ | |
"name": "salesforce", | |
"size": 33 | |
}, | |
{ | |
"name": "yandex_metrica", | |
"size": 32 | |
}, | |
{ | |
"name": "librato", | |
"size": 31 | |
}, | |
{ | |
"name": "mouseflow", | |
"size": 29 | |
}, | |
{ | |
"name": "bing_ads", | |
"size": 27 | |
}, | |
{ | |
"name": "crittercism", | |
"size": 27 | |
}, | |
{ | |
"name": "marketo", | |
"size": 26 | |
}, | |
{ | |
"name": "drip", | |
"size": 25 | |
}, | |
{ | |
"name": "click_tale", | |
"size": 25 | |
}, | |
{ | |
"name": "track_js", | |
"size": 25 | |
}, | |
{ | |
"name": "live_chat", | |
"size": 23 | |
}, | |
{ | |
"name": "mouse_stats", | |
"size": 23 | |
}, | |
{ | |
"name": "countly", | |
"size": 22 | |
}, | |
{ | |
"name": "lucky_orange", | |
"size": 22 | |
}, | |
{ | |
"name": "com_score", | |
"size": 20 | |
}, | |
{ | |
"name": "stack_lead", | |
"size": 20 | |
}, | |
{ | |
"name": "bug_herd", | |
"size": 16 | |
}, | |
{ | |
"name": "alexa", | |
"size": 16 | |
}, | |
{ | |
"name": "piwik", | |
"size": 16 | |
}, | |
{ | |
"name": "preact", | |
"size": 16 | |
}, | |
{ | |
"name": "spinnakr", | |
"size": 16 | |
}, | |
{ | |
"name": "hello_bar", | |
"size": 15 | |
}, | |
{ | |
"name": "navilytics", | |
"size": 15 | |
}, | |
{ | |
"name": "tapstream", | |
"size": 15 | |
}, | |
{ | |
"name": "help_scout", | |
"size": 11 | |
}, | |
{ | |
"name": "churn_bee", | |
"size": 11 | |
}, | |
{ | |
"name": "totango", | |
"size": 10 | |
}, | |
{ | |
"name": "snap_engage", | |
"size": 10 | |
}, | |
{ | |
"name": "pardot", | |
"size": 9 | |
}, | |
{ | |
"name": "outbound", | |
"size": 8 | |
}, | |
{ | |
"name": "usercycle", | |
"size": 8 | |
}, | |
{ | |
"name": "fox_metrics", | |
"size": 7 | |
}, | |
{ | |
"name": "awe_sm", | |
"size": 7 | |
}, | |
{ | |
"name": "lead_lander", | |
"size": 7 | |
}, | |
{ | |
"name": "improvely", | |
"size": 6 | |
}, | |
{ | |
"name": "gainsight", | |
"size": 5 | |
}, | |
{ | |
"name": "omniture", | |
"size": 5 | |
}, | |
{ | |
"name": "taplytics", | |
"size": 5 | |
}, | |
{ | |
"name": "saa_squatch", | |
"size": 4 | |
}, | |
{ | |
"name": "app_nexus", | |
"size": 3 | |
}, | |
{ | |
"name": "iterable", | |
"size": 3 | |
}, | |
{ | |
"name": "share_asale", | |
"size": 3 | |
}, | |
{ | |
"name": "iron_io", | |
"size": 2 | |
}, | |
{ | |
"name": "convertro", | |
"size": 2 | |
}, | |
{ | |
"name": "millennial_media", | |
"size": 2 | |
}, | |
{ | |
"name": "curebit", | |
"size": 2 | |
}, | |
{ | |
"name": "frontleaf", | |
"size": 2 | |
}, | |
{ | |
"name": "lytics", | |
"size": 2 | |
}, | |
{ | |
"name": "monetate", | |
"size": 2 | |
}, | |
{ | |
"name": "media_math", | |
"size": 1 | |
}, | |
{ | |
"name": "bronto", | |
"size": 1 | |
}, | |
{ | |
"name": "nanigans", | |
"size": 1 | |
}, | |
{ | |
"name": "data_xu", | |
"size": 1 | |
}, | |
{ | |
"name": "evergage", | |
"size": 1 | |
}, | |
{ | |
"name": "inside_vault", | |
"size": 1 | |
}, | |
{ | |
"name": "rockerbox", | |
"size": 1 | |
}, | |
{ | |
"name": "simpli_fi", | |
"size": 0 | |
} | |
] | |
}; | |
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.layout.tree() | |
.size([height, width]); | |
var diagonal = d3.svg.diagonal() | |
.projection(function(d) { return [d.y, d.x]; }); | |
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 + ")"); | |
setTimeout(function () { | |
root = flare; | |
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); | |
}, 500); | |
d3.select(self.frameElement).style("height", "800px"); | |
function update(source) { | |
// 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); | |
nodeEnter.append("text") | |
.attr("x", "10") | |
.attr("dy", ".35em") | |
.attr("text-anchor", "start") | |
.text(function(d) { return d.name; }) | |
.style("fill-opacity", "1"); | |
// 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", function(d) { | |
return 7.5*Math.log(Math.max(5, d.size))/Math.log(1000); | |
}); | |
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; }); | |
var strokeWidth = function(d) { | |
var size = d.target.size; | |
var strokeWidth = Math.max(1, 15*Math.log(Math.max(1, size))/Math.log(1000)); | |
return "stroke-width: " + strokeWidth + "px;"; | |
}; | |
// Enter any new links at the parent's previous position. | |
link.enter().insert("path", "g") | |
.attr("class", "link") | |
.attr("style", strokeWidth) | |
.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("style", strokeWidth) | |
.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> |