D3 Examples - A dynamic, reusable donut chart for D3.js v4

A dynamic, reusable donut chart for D3.js v4

This is the follow-on from my last bl.ock which was a static version of a donut chart, using D3 version 4.

The example presented here is an updateable version. I wanted to make and share this as it is also in a reusable form.

My reasoning behind putting this out there is that I came across a lot of examples of dynamic donut charts, but none seemed to be in a reusable format, which is the format I feel is best.

So this is a result of my learning process, which was aided by those mentioned in the last bl.ock.

The reusability components for this chart we in large part due to the great tutorial by Rob Moore: Towards Updatable D3.js Charts.

The data presented in this chart is from an experiment run by some people in my lab at PoreCamp Australia 2017. It is a mixed sample of bacteria as analysed by our Nanopore Sequence Aanalysis package japsa.

For more information, or to suggest some fixes/improvements to this chart, find me on GitHub.

xxxxxxxxxx
 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Reusable Donut Chart in D3 v4</title>
    <script src="https://d3js.org/d3.v4.min.js"></script>
    <link href="https://fonts.googleapis.com/css?family=Roboto:400,700" rel="stylesheet">
    <link rel="stylesheet" href="index.css">
    <script src="index.js"></script>
</head>
<body>
​
<div id="chart"></div>
​
<script>
    var timerInterval = 1500;
​
    var donut = donutChart()
        .width(960)
        .height(500)
        .transTime(750) // length of transitions in ms
        .cornerRadius(3) // sets how rounded the corners are on each slice
        .padAngle(0.015) // effectively dictates the gap between slices
        .variable('prob')
        .category('species');
​
    var i = 0;
​
    d3.tsv('species.tsv', function(error, data) {
        if (error) throw error;
​
        // group entries together by timestamp to simulate  receiving real-time data
        var nestData = d3.nest()
            .key(function(d) { return d.time; }) // collects entries with the same time value
            .entries(data);
​
        // timer to update chart with new data every timeInterval milliseconds.
        var timer = setInterval(function() {
            if (i === nestData.length - 1) { clearInterval(timer); }
            donut.data(nestData[i].values);
            if (i === 0) { // if first time receiving data...
                i++;
                d3.select('#chart')
                    .call(donut); // draw chart in div
            }
            i++;
        }, timerInterval);
    });
</script>
​
</body>
</html>
    