Sunburst Tutorial 2 vs. 3 --> https://denjn5.github.io/tutorials/
57 lines
<!DOCTYPE html>
<!DOCTYPE html>
<head>
<head>
<title>Sunburst Tutorial (d3 v4), Part 2</title>
<title>Sunburst Tutorial (d3 v4), Part 3</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);
// 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; });
// Get the data from our JSON file
// Get the data from our JSON file
d3.json('data-simple.json', function(error, vData) {
d3.json('data-simple.json', function(error, vData) {
if (error) throw error;
if (error) throw error;
drawSunburst(vData);
drawSunburst(vData);
});
});
/**
/**
* Draw our sunburst
* Draw our sunburst
* @param {object} data - Hierarchical data
* @param {object} data - Hierarchical data
*/
*/
function drawSunburst(data) {
function drawSunburst(data) {
// Layout prep
// Layout prep
var vRoot = d3.hierarchy(data).sum(function (d) { return d.size});
var vRoot = d3.hierarchy(data).sum(function (d) { return d.size});
var vNodes = vRoot.descendants();
var vNodes = vRoot.descendants();
vLayout(vRoot);
vLayout(vRoot);
var vSlices = g.selectAll('path').data(vNodes).enter().append('path');
var vSlices = g.selectAll('g').data(vNodes).enter().append('g');
// Draw sunburst
// Draw sunburst
vSlices
vSlices.append('path')
.attr('display', function (d) { return d.depth ? null : 'none'; })
.attr('display', function (d) { return d.depth ? null : 'none'; })
.attr('d', vArc)
.attr('d', vArc)
.style('stroke', '#fff')
.style('stroke', '#fff')
.style('fill', function (d) {
.style('fill', function (d) { return vColor((d.children ? d : d.parent).data.id); });
return vColor((d.children ? d : d.parent).data.id); });
// Add text
vSlices.append('text')
.filter(function(d) { return d.parent; })
.attr('transform', function(d) {
return 'translate(' + vArc.centroid(d) + ')rotate(' + computeTextRotation(d) + ')'; })
.attr('dx', '-20')
.attr('dy', '.5em')
.text(function(d) { return d.data.id });
}
/**
* Calculate the rotation for each label based on its location in the sunburst.
* @param {Node} d - the d3 note for which we're computing text rotation
* @return {Number} the value that should populate the transform: rotate() statement
*/
function computeTextRotation(d) {
var angle = (d.x0 + d.x1) / Math.PI * 90;
// Avoid upside-down labels
return (angle < 120 || angle > 270) ? angle : angle + 180; // labels as rims
//return (angle < 180) ? angle - 90 : angle + 90; // labels as spokes
}
}
</script>
</script>