Skip to content

Instantly share code, notes, and snippets.

@wenzelmkay
Created January 7, 2018 18:43
Show Gist options
  • Save wenzelmkay/a4d360ec4b2cc78572a58c10a2ada98a to your computer and use it in GitHub Desktop.
Save wenzelmkay/a4d360ec4b2cc78572a58c10a2ada98a to your computer and use it in GitHub Desktop.
BIO 140/150: Interactive Sunburst
license: gpl-3.0

Click on any arc to zoom in. Click on the center circle to zoom out.

A sunburst is similar to a treemap, except it uses a radial layout. The root node of the tree is at the center, with leaves on the circumference. The area (or angle, depending on implementation) of each arc corresponds to its value. Sunburst design by John Stasko. Data courtesy Jeff Heer.

forked from mbostock's block: Zoomable Sunburst

forked from wenzelmk's block: Sunburst Mosquitos

forked from anonymous's block: BIO 140/150: Interactive Sunburst

{
"name": "Virginia",
"children": [
{
"name": "Bridgewater",
"children": [
{
"name": "Wildwood Park",
"children": [
{
"name": "Culex",
"children": [
{"name": "territans", "size": 1}
]
}
]
}
]},
{
"name": "Massanetta Springs",
"children": [
{
"name": "Bluewater Road",
"children": [
{
"name": "Aedes",
"children": [
{"name": "albopictus", "size": 1}
]
}
]
}
]},
{
"name": "Harrisonburg",
"children": [
{
"name": "Purcell Park",
"children": [
{
"name": "Aedes",
"children": [
{"name": "albopictus", "size": 2}
]
},
{
"name": "Anopheles",
"children": [
{"name": "punctipennus", "size": 1}
]
},
{
"name": "Ochleratus",
"children": [
{"name": "trivittatus", "size": 1},
{"name": "angustivittatus", "size": 1},
{"name": "infirmatus", "size": 1}
]
},
{
"name": "Uranotaenia",
"children": [
{"name": "sapphirina", "size": 1}
]
},
{
"name": "Culex",
"children": [
{"name": "erraticus", "size": 8}
]
}
]
},
{
"name": "Arboretum",
"children": [
{
"name": "Culex",
"children": [
{"name": "territans", "size": 5},
{"name": "erraticus", "size": 2}
]
},
{
"name": "Culicinae",
"children": [
{"name": "sp.", "size": 1}
]
},
{
"name": "Aedes",
"children": [
{"name": "sp.", "size": 1},
{"name": "vexans", "size": 4}
]
}
]
},
{
"name": "Copper Beech",
"children": [
{
"name": "Culex",
"children": [
{"name": "erraticus", "size": 1}
]
}
]
}
]
}
]
}
<!DOCTYPE html>
<meta charset="utf-8">
<style>
path {
stroke: #fff;
}
</style>
<body>
<script src="//d3js.org/d3.v3.min.js"></script>
<script>
var width = 960,
height = 700,
radius = (Math.min(width, height) / 2) - 10;
var formatNumber = d3.format(",d");
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 d.size; });
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 svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height)
.append("g")
.attr("transform", "translate(" + width / 2 + "," + (height / 2) + ")");
d3.json("flare.json", function(error, root) {
if (error) throw error;
svg.selectAll("path")
.data(partition.nodes(root))
.enter().append("path")
.attr("d", arc)
.style("fill", function(d) { return color((d.children ? d : d.parent).name); })
.on("click", click)
.append("title")
.text(function(d) { return d.name + "\n" + formatNumber(d.value); });
});
function click(d) {
svg.transition()
.duration(750)
.tween("scale", function() {
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(t) { x.domain(xd(t)); y.domain(yd(t)).range(yr(t)); };
})
.selectAll("path")
.attrTween("d", function(d) { return function() { return arc(d); }; });
}
d3.select(self.frameElement).style("height", height + "px");
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment