JSFiddle - React, Tailwind, and code Playground

by rolfsf

HTML

<div id="chart"></div>

<div id="chart2"></div>

CSS

.donut {
   shape-rendering: auto;
}
 .legend-label {
   text-anchor: middle;
}
.units-label {
   font-size: .7em;
   font-weight: normal;
   text-transform: uppercase;
}
.data-label {
   font-weight: bold;
   font-size: 1.5em;
}
.value-1 {
   fill: orange;
}
.value-2 {
   fill: blue;
}
.value-3 {
   fill: green;
}

JavaScript

/**
 *  Donut chart for d3.js
 */

 function donutChart() {
    var width = 420,
        height = 420,
        radius = 0,
        factor = 0.7;

    var legend = ['Low', 'Medium', 'High'];

    function chart(selection) {
        selection.each(function(data) {
            if (radius == 0) {
               radius = Math.min(width, height) / 2 - 10;
            }

            var arc = d3.svg.arc()
                .innerRadius(radius * factor)
                .outerRadius(radius);

            var pie = d3.layout.pie()
                .sort(null)
                .value(function(d) { return d; });

            var svg = d3.select(this).append('svg')
                .attr('width', width)
                .attr('height', height)
                .attr('class', 'donut')
                .append('g')
                .attr('transform', 'translate(' + width / 2 + ',' + height / 2 + ')');
            var g = svg.selectAll('.arc')
                .data(pie(data))
                .enter().append('g')
                .attr('class', 'arc');

            g.append('path')
                .attr('d', arc)
                .attr('class', function(d, i){return 'value-' + (i+1)})
                .style('stroke', '#fff');

            var l = svg.selectAll('.legend')
                .data(data)
                .enter().append('g')
                .attr('class', 'legend');

            l.append('text')
                .attr('x', 0)
                .attr('y', function(d, i) { return i * 40 - radius / 2 + 10; })
                .attr('class', function(d, i){return 'legend-label data-label value-' + (i+1)})
                .text(function(d, i) { return d + '%'; });

            l.append('text')
                .attr('x', 0)
                .attr('y', function(d, i) { return i * 40 - radius / 2 + 22; })
                .attr('class', function(d, i){return 'legend-label units-label value-' + (i+1)})
                .text(function(d, i) { return legend[i]; });
        });
    }

   ...