d3 Unconf 2017!

Who doesn't love sunbursts? Visit my blog for more.

<!DOCTYPE html>
<head>
    <title>d3 Unconf 2017!</title>
    <script src='https://d3js.org/d3.v4.min.js'></script>
</head>
<body>
    <svg></svg>
</body>

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
    var g = d3.select('svg')
        .attr('width', vWidth)
        .attr('height', vHeight)
        .append('g')
        .attr('transform', 'translate(' + vWidth / 2 + ',' + vHeight / 2 + ')');

// d3 layout
    var partitionLayout = d3.partition()
        .size([2 * Math.PI, vRadius]);

// Find data root
    var root = d3.hierarchy(vData)
        .sum(function (d) { return d.size });

// Size arcs
    partitionLayout(root);
    var arc = 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; });

// Put it all together
    var vPath = g.selectAll('path')
        .data(root.descendants())
        .enter().append('path')
        .attr('display', function (d) { return d.depth ? null : 'none'; })
        .attr('d', arc)
        .style('stroke', '#000')
        .style('fill', '#fff');

animate();
    d3.transition().delay(2800).on('end', animate);
    d3.transition().delay(5600).on('end', animate);
    d3.transition().delay(8400).on('end', animate);
    d3.transition().delay(11800).on('end', animate);

function animate() {
        vPath.each(function (d, i) {
            d3.select(this).transition().delay(i * 50).duration(i * 200)
                .style('fill', vColor)
                .transition().duration(1000)
                .style('fill', '#fff');
        });
    }

//animate().addEventListener("ended", animate);

//vColor = d3.schemeCategory20b[13];
    //animate();

</script>

https://d3js.org/d3.v4.min.js