Skip to content

Instantly share code, notes, and snippets.

@jacksonhenry3

jacksonhenry3/flare.json

Created July 12, 2012 14:27
Show Gist options
  • Save jacksonhenry3/3098448 to your computer and use it in GitHub Desktop.
Save jacksonhenry3/3098448 to your computer and use it in GitHub Desktop.
Download ZIP
Phylum browser (in progress)
Raw
flare.json
{
"name": "Life",
"children": [
{"name": "Eukaryote",
"children":[
{"name":"Plantae","children":[{"name":"name","size":1},{"name":"name","size":1},{"name":"name","size":1},{"name":"name","size":1},{"name":"name","size":1},{"name":"name","size":1},{"name":"name","size":1},{"name":"name","size":1},{"name":"name","size":1},{"name":"name","size":1},{"name":"name","size":1}]},
{"name":"Anamalia","children":[{"name":"name","size":1},{"name":"name","size":1},{"name":"name","size":1},{"name":"name","size":1},{"name":"name","size":1},{"name":"name","size":1},{"name":"name","size":1},{"name":"name","size":1},{"name":"name","size":1},{"name":"name","size":1},{"name":"name","size":1},{"name":"name","size":1},{"name":"name","size":1},{"name":"name","size":1},{"name":"name","size":1},{"name":"name","size":1},{"name":"name","size":1},{"name":"name","size":1},{"name":"name","size":1},{"name":"name","size":1},{"name":"name","size":1},{"name":"name","size":1},{"name":"name","size":1},{"name":"name","size":1},{"name":"name","size":1},{"name":"name","size":1},{"name":"name","size":1},{"name":"name","size":1},{"name":"name","size":1},{"name":"name","size":1},{"name":"name","size":1},{"name":"name","size":1},{"name":"name","size":1},{"name":"name","size":1},{"name":"name","size":1}]},
{"name":"Fungi","children":[{"name":"name","size":1},{"name":"name","size":1},{"name":"name","size":1},{"name":"name","size":1},{"name":"name","size":1},{"name":"name","size":1},{"name":"name","size":1},{"name":"name","size":1},{"name":"name","size":1},{"name":"name","size":1},{"name":"name","size":1}]},
{"name":"protista","children":[{"name":"name","size":1},{"name":"name","size":1},{"name":"name","size":1},{"name":"name","size":1},{"name":"name","size":1},{"name":"name","size":1},{"name":"name","size":1},{"name":"name","size":1},{"name":"name","size":1}]}
]},
{"name": "Archea",
"children":[
{"name":"Archea","children":[{"name":"name","size":1},{"name":"name","size":1},{"name":"name","size":1},{"name":"name","size":1},{"name":"name","size":1}]}]
},
{"name":"Bacteria",
"children":[
{"name":"Bacteria","children":[{"name":"name","size":1},{"name":"name","size":1},{"name":"name","size":1},{"name":"name","size":1},{"name":"name","size":1},{"name":"name","size":1},{"name":"name","size":1},{"name":"name","size":1},{"name":"name","size":1},{"name":"name","size":1},{"name":"name","size":1},{"name":"name","size":1},{"name":"name","size":1},{"name":"name","size":1},{"name":"name","size":1},{"name":"name","size":1},{"name":"name","size":1},{"name":"name","size":1},{"name":"name","size":1},{"name":"name","size":1},{"name":"name","size":1},{"name":"name","size":1},{"name":"name","size":1},{"name":"name","size":1},{"name":"name","size":1},{"name":"name","size":1},{"name":"name","size":1},{"name":"name","size":1},{"name":"name","size":1}]}
]}
]
}
Raw
index(no labels).html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>phylum browser</title>
<script src="http://d3js.org/d3.v2.js"></script>
<style type="text/css">
path {
stroke: #fff;
fill-rule: evenodd;
}
</style>
</head>
<body>
<div id="chart"></div>
<script type="text/javascript">
var width = 500,
height = 500
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 vis = d3.select("#chart").append("svg")
.attr("width", width)
.attr("height", height)
.append("g")
.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");
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)+2); });
d3.json("flare.json", function(json) {
var path = vis.data([json]).selectAll("path")
.data(partition.nodes)
.enter().append("path")
.attr("d", arc)
.style("fill", function(d) { return color((d.children ? d : d.parent).name); })
.on("click", click);
function click(d) {
path.transition()
.duration(1000)
.attrTween("d", arcTween(d));
}
});
// 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); };
};
}
</script>
</body>
</html>
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>Partition - Sunburst</title>
<script src="http://d3js.org/d3.v2.js"></script>
<style type="text/css">
path {
stroke: #fff;
fill-rule: evenodd;
}
</style>
</head>
<body>
<div id="chart"></div>
<script type="text/javascript">
var width = 500,
height = 500
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 vis = d3.select("#chart").append("svg")
.attr("width", width)
.attr("height", height)
.append("g")
.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");
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)+2); });
d3.json("flare.json", function(json) {
var path = vis.data([json]).selectAll("path")
.data(partition.nodes)
.enter().append("path")
.attr("d", arc)
.style("fill", function(d) { return color((d.children ? d : d.parent).name); })
.on("click", click);
function click(d) {
path.transition()
.duration(1000)
.attrTween("d", arcTween(d));
}
});
// 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); };
};
}
</script>
</body>
</html>
Raw
partition-sunburst.js
var width = 960,
height = 700,
radius = Math.min(width, height) / 2,
color = d3.scale.category20c();
var vis = d3.select("#chart").append("svg")
.attr("width", width)
.attr("height", height)
.append("g")
.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");
var partition = d3.layout.partition()
.sort(null)
.size([2 * Math.PI, radius * radius])
.value(function(d) { return 1; });
var arc = d3.svg.arc()
.startAngle(function(d) { return d.x; })
.endAngle(function(d) { return d.x + d.dx; })
.innerRadius(function(d) { return Math.sqrt(d.y); })
.outerRadius(function(d) { return Math.sqrt(d.y + d.dy); });
d3.json("../data/flare.json", function(json) {
var path = vis.data([json]).selectAll("path")
.data(partition.nodes)
.enter().append("path")
.attr("display", function(d) { return d.depth ? null : "none"; }) // hide inner ring
.attr("d", arc)
.attr("fill-rule", "evenodd")
.style("stroke", "#fff")
.style("fill", function(d) { return color((d.children ? d : d.parent).name); })
.each(stash);
d3.select("#size").on("click", function() {
path
.data(partition.value(function(d) { return d.size; }))
.transition()
.duration(1500)
.attrTween("d", arcTween);
d3.select("#size").classed("active", true);
d3.select("#count").classed("active", false);
});
d3.select("#count").on("click", function() {
path
.data(partition.value(function(d) { return 1; }))
.transition()
.duration(1500)
.attrTween("d", arcTween);
d3.select("#size").classed("active", false);
d3.select("#count").classed("active", true);
});
});
// Stash the old values for transition.
function stash(d) {
d.x0 = d.x;
d.dx0 = d.dx;
}
// Interpolate the arcs in data space.
function arcTween(a) {
var i = d3.interpolate({x: a.x0, dx: a.dx0}, a);
return function(t) {
var b = i(t);
a.x0 = b.x;
a.dx0 = b.dx;
return arc(b);
};
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment