Sunburst Tutorial 1 vs. 2 --> https://denjn5.github.io/tutorials/
21 removals
55 lines
29 additions
58 lines
<!DOCTYPE html>
<!DOCTYPE html>
<head>
<head>
<title>Sunburst Tutorial (d3 v4), Part 1</title>
<title>Sunburst Tutorial (d3 v4), Part 2</title>
<script src='../plugins/d3/d3.v4.min.js'></script>
<script src='../plugins/d3/d3.v4.min.js'></script>
</head>
</head>
<body>
<body>
<svg></svg>
<svg></svg>
</body>
</body>
<script>
<script>
var vWidth = 300;
var vWidth = 300;
var vHeight = 300;
var vHeight = 300;
var vRadius = Math.min(vWidth, vHeight) / 2;
var vRadius = Math.min(vWidth, vHeight) / 2;
var vColor = d3.scaleOrdinal(d3.schemeCategory20b);
var vColor = d3.scaleOrdinal(d3.schemeCategory20b);
var vData = {
'id': 'TOPICS', 'children': [{
'id': 'Topic A',
'children': [{'id': 'Sub A1', 'size': 4}, {'id': 'Sub A2', 'size': 4}]
}, {
'id': 'Topic B',
'children': [{'id': 'Sub B1', 'size': 3}, {'id': 'Sub B2', 'size': 3},
{'id': 'Sub B3', 'size': 3}]
}, {
'id': 'Topic C',
'children': [{'id': 'Sub C1', 'size': 4}, {'id': 'Sub C2', 'size': 4}]
}]};
// Prepare our physical space
// Prepare our physical space
var g = d3.select('svg')
var g = d3.select('svg')
.attr('width', vWidth).attr('height', vHeight)
.attr('width', vWidth).attr('height', vHeight)
.append('g')
.append('g')
.attr('transform', 'translate(' + vWidth / 2 + ',' + vHeight / 2 + ')');
.attr('transform', 'translate(' + vWidth / 2 + ',' + vHeight / 2 + ')');
// d3 layout
// d3 layout
var vLayout = d3.partition().size([2 * Math.PI, vRadius]);
var vLayout = d3.partition().size([2 * Math.PI, vRadius]);
var vArc = d3.arc()
var vArc = d3.arc()
.startAngle(function (d) { return d.x0; })
.startAngle(function (d) { return d.x0; })
.endAngle(function (d) { return d.x1; })
.endAngle(function (d) { return d.x1; })
.innerRadius(function (d) { return d.y0; })
.innerRadius(function (d) { return d.y0; })
.outerRadius(function (d) { return d.y1; });
.outerRadius(function (d) { return d.y1; });
// Layout prep
// Get the data from our JSON file
var vRoot = d3.hierarchy(vData).sum(function (d) { return d.size });
d3.json('data-simple.json', function(error, vData) {
var vNodes = vRoot.descendants();
if (error) throw error;
vLayout(vRoot);
var vSlices = g.selectAll('path').data(vNodes).enter().append('path');
// Draw sunburst
drawSunburst(vData);
vSlices.filter(function(d) { return d.parent; })
});
.attr('d', vArc)
.style('stroke', '#fff')
.style('fill', function (d) {
/**
return vColor((d.children ? d : d.parent).data.id); });
* Draw our sunburst
* @param {object} data - Hierarchical data
*/
function drawSunburst(data) {
// Layout prep
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 sunburst
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>
</script>