JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<span id="donut" class=""></span>

JavaScript

var element_id = "donut";
        var elementSelector = '#' + element_id;

        isBig = true;
        svgWidth = 390;
        svgHeight = 320;
        svgInnerRadius = 75;
        svgOuterRadius = 145;
        heightOffset = 0;
        scoreFontSize = '49px';

        $(elementSelector).replaceWith('<svg id="'+ element_id +'" class="spendDonut' + (isBig ? ' big':'') + '" width="'+ (svgWidth) +'" height="'+ (svgHeight - heightOffset) +'"></svg>');
        $(elementSelector).css({'width': svgWidth + 'px', 'height': (svgHeight-heightOffset) + 'px'});
        var anglePercentage = d3.scale.linear().domain([0, 100]).range([0, 2 * Math.PI]);
        var fullAnglePercentage = 100;
        var color = d3.scale.ordinal().range(["#3064DA", "#6D91DF", "#97B3F2", "#A0C2FF", "#C8DCFF"]);

        data = [
            {'keyword': 'keyword one', 'spend': 423.40},
            {'keyword': 'keyword two', 'spend': 346.30},
            {'keyword': 'keyword three', 'spend': 267.89},
            {'keyword': 'keyword four', 'spend': 98.56},
            {'keyword': 'keyword five', 'spend': 74.19}
        ]
        var totalSpend = d3.sum(data.map(function(d) { return d.spend; }));
        var dataPoints = [];
        var startAnglePercentage = 0;
        for (var i=0; i < data.length; i++) {
            var endAnglePercentage = data[i]['spend'] / totalSpend * 100 + startAnglePercentage;
            dataPoints.push([startAnglePercentage, endAnglePercentage]);
            startAnglePercentage = endAnglePercentage;
        }

        var vis = d3.select(elementSelector);
        var arc = d3.svg.arc()
        .innerRadius(svgInnerRadius)
        .outerRadius(svgOuterRadius)
        .startAngle(function(d){return +(anglePercentage(d[0] + 0.3));})
        .endAngle(function(d){return +(anglePercentage(d[1] - 0.3));});


        vis.selectAll("path")
        .data(dataPoints)
        .enter()
        .append("g").attr('class', 'slice')
        .append("path")
        .attr("d", arc)
      ...