D3 Examples - Simple Sunburst (d3 v4; CSV; 54 Lines)

Simple Sunburst (d3 v4; CSV; 54 Lines)

This is the simplest sunburst diagram I could create. Let me know if you think I can make it tighter.

Build notes:

It pulls data from a csv file. It uses d3.stratify() to reform links into a hierarchy. (NOTE: I ran into a challenge with d.size when moving from json to csv. While size is a feature of my data, I had to now access it from d.data.size.)

To differentiate between local variables and framework objects, I prefix variables with lowercase 'v'.

xxxxxxxxxx
 
<!DOCTYPE html>
<meta charset="utf-8">
<head>
    <title>Simple Sunburst (d3 v4; CSV; 54 Lines)</title>
    <script src="https://d3js.org/d3.v4.min.js"></script>
</head>
​
<style>
    path {
        stroke: white;
        fill: #05668D;
        opacity: 0.6;
        stroke-width: 2px;
    }
</style>
​
<svg>
    <g></g>
</svg>
​
<script>
    var vWidth = 300;
    var vHeight = 200;
​
    // Prepare our physical space
    var g = d3.select('svg').attr('width', vWidth).attr('height', vHeight)
            .select('g').attr('transform', 'translate(' + vWidth / 2 + ',' + vHeight / 2 + ')');
​
    // Get the data from our CSV file
    d3.csv('data.csv', function(error, vCsvData) {
        if (error) throw error;
​
        vData = d3.stratify()(vCsvData);
        drawViz(vData);
    });
​
    function drawViz(vData) {
        // Declare d3 layout
        var vLayout = d3.partition().size([2 * Math.PI, Math.min(vWidth, vHeight) / 2]);
​
        // Layout + Data
        var vRoot = d3.hierarchy(vData).sum(function (d) { return d.data.size; });
        var vNodes = vRoot.descendants();
        vLayout(vRoot);
        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; });
​
        // Draw on screen
        g.selectAll('path').data(vNodes).enter().append('path').attr("d", vArc);
    }
</script>
​
    