forked from barryclark/jekyll-now
/
sunburst-2.html
59 lines (52 loc) · 1.79 KB
/
sunburst-2.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
<!DOCTYPE html>
<head>
<title>Sunburst Tutorial (d3 v4), Part 2</title>
<script src='../plugins/d3/d3.v4.js'></script>
<!-- Want to run locally? Update src: 'https://d3js.org/d3.v4.min.js' -->
</head>
<body>
<svg></svg>
</body>
<script>
var vWidth = 300;
var vHeight = 300;
var vRadius = Math.min(vWidth, vHeight) / 2;
var vColor = d3.scaleOrdinal(d3.schemeCategory20b.slice(11));
// Prepare our physical space
var g = d3.select('svg')
.attr('width', vWidth).attr('height', vHeight)
.append('g')
.attr('transform', 'translate(' + vWidth / 2 + ',' + vHeight / 2 + ')');
// d3 layout
var vLayout = d3.partition().size([2 * Math.PI, vRadius]);
var vArc = d3.arc()
.startAngle(function (d) { return d.x0; })
.endAngle(function (d) { return d.x1; })
.innerRadius(function (d) { return d.y0; })
.outerRadius(function (d) { return d.y1; });
// Get the data from our JSON file
d3.json('data-simple.json', function(error, vData) {
if (error) throw error;
drawSunburst(vData);
});
/**
* Draw our sunburst
* @param {object} data - Hierarchical data
*/
function drawSunburst(data) {
// Layout + Data
var vRoot = d3.hierarchy(data).sum(function (d) { return d.size});
var vNodes = vRoot.descendants();
vLayout(vRoot);
var vSlices = g.selectAll('path').data(vNodes).enter().append('path');
// Draw on screen
vSlices
.attr('display', function (d) { return d.depth ? null : 'none'; })
.attr('d', vArc)
.style('stroke', '#fff')
.style('fill', function (d) {
return vColor(
(d.children ? d : d.parent).data.id);
});
}
</script>