Skip to content

Instantly share code, notes, and snippets.

@jacksonhenry3

jacksonhenry3/index.html

Forked from mbostock/index.html
Created July 12, 2012 18:23
Show Gist options
  • Save jacksonhenry3/3099912 to your computer and use it in GitHub Desktop.
Save jacksonhenry3/3099912 to your computer and use it in GitHub Desktop.
Download ZIP
label test for sunburst
Raw
readme.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.html
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>Sunburst with Text</title>
<script type="text/javascript" src="http://d3js.org/d3.v2.js"></script>
<script type="text/javascript" src="https://github.com/mbostock/d3/tree/master/test/layout"></script>
<style type="text/css">
svg {
font: 10px sans-serif;
}
</style>
</head>
<body>
<div id="chart"></div>
<script type="text/javascript">
var w = window.innerWidth - 1,
h = window.innerHeight - 1,
r = Math.min(w, h) / 2,
color = d3.scale.category20c();
var vis = d3.select("#chart").append("svg:svg")
.attr("width", w)
.attr("height", h)
.append("svg:g")
.attr("transform", "translate(" + w / 2 + "," + h / 2 + ")");
var partition = d3.layout.partition()
.sort(null)
.size([2 * Math.PI, r * r])
.children(function(d) { return isNaN(d.value) ? d3.entries(d.value) : null; })
.value(function(d) { return d.value; });
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("readme.json", function(json) {
var g = vis.data(d3.entries(json)).selectAll("g")
.data(partition)
.enter().append("svg:g")
.attr("display", function(d) { return d.depth ? null : "none"; }); // hide inner ring
g.append("svg:path")
.attr("d", arc)
.attr("stroke", "#fff")
.attr("fill", function(d) { return color((d.children ? d : d.parent).data.key); })
.attr("fill-rule", "evenodd");
g.append("svg:text")
.attr("transform", function(d) { return "rotate(" + (d.x + d.dx / 2 - Math.PI / 2) / Math.PI * 180 + ")"; })
.attr("x", function(d) { return Math.sqrt(d.y); })
.attr("dx", "6") // margin
.attr("dy", ".35em") // vertical-align
.text(function(d) { return d.data.key; });
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment