Skip to content

Instantly share code, notes, and snippets.

@reinpk

reinpk/README.md

Forked from mbostock/.block
Last active August 29, 2015 14:06
Show Gist options
  • Save reinpk/95761475baf968781e34 to your computer and use it in GitHub Desktop.
Save reinpk/95761475baf968781e34 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<!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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment