JSFiddle - React, Tailwind, and code Playground

HTML

<form id="chart1" action="" class="radioButtons">
    <input type="radio" name="chart" onchange="updateOne()" id="chart1Pie" value="pie" checked> Jones
    <input type="radio" name="chart" onchange="updateTwo()" id="chart2Pie" value="bar"> Smith
    </form>
<div id="chart"></div>
<script src="http://d3js.org/d3.v3.min.js"></script>

CSS

.slice path {
    stroke: #fff;
    stroke-width: 1px;
}
.textTop {
    font-family:'Segoe UI';
    font-size: 12pt;
    fill: #bbb;
}
.textBottom {
    fill: #444;
    font-family:Ariel;
    font-weight: bold;
    font-size: 18pt;
}
.top {
    border: 1px solid #bbb;
    color: #777;
    font-family:'Segoe UI';
    padding: 5px;
    text-decoration: none;
}
.top:hover {
    border: 1px solid #555;
    color: #333;
}
.grid .tick {
    stroke: #eee;
    shape-rendering: crispEdges;
}
.grid path, .gridLine path {
    stroke-width: 0;
}
.gridLine .tick {
    stroke: #fff;
    stroke-opacity: .15;
    shape-rendering: crispEdges;
}
svg {
    font: 12pt'Segoe UI';
}
rect {
    fill: #FF5858;
    stroke: #C52F0F;
    shape-rendering: crispEdges;
}
rect:hover {
    fill: #FF7575;
    stroke: #DD3737;
    shape-rendering: crispEdges;
}
.axis path, .axis line {
    fill: none;
    stroke: black;
    shape-rendering: crispEdges;
}
.legend rect {
    stroke: none;

JavaScript

$(document).ready(function () {
    'use strict';
    $("input[name=chart]:radio").change(function () {
    	$('#chart').empty();
            var data        =   [
                                    { "feeling" : "Strongly disagrees", "jones": "4", "smith": "22" },
                                    { "feeling" : "Disagrees", "jones": "8", "smith": "22" },
                                    { "feeling" : "Agrees", "jones": "50", "smith": "0" },
                                    { "feeling" : "Strongly agrees", "jones": "38", "smith": "50" }
                                ],
                w           =   400,
                h           =   400,
                r           =   150,
                inner       =   50,
                pi          =   Math.PI,
                name        =   "Jones",
                total, sliceLabel,
                color       =   d3.scale.ordinal().range(["#9595C9", "#81CBCB", "#B2D89E", "#F8F081"]),
                                //colorOut    =   d3.scale.ordinal().range(["#7F7FBC", "#73CBCE", "#A4D286", "#F6E86E"]);
                                // D3 helper function to draw rainbow, populates parameter "d" in path object
                arc         =   d3.svg.arc()
                                .innerRadius(inner)
                                .outerRadius(r),

                                // D3 helper function to draw rainbow, populates parameter "d" in path object when chart moves up
                arcOver     =   d3.svg.arc()
                                .innerRadius(inner + 5)
                                .outerRadius(r + 5),
                                // D3 helper function for text on top lables
                arcOut      =   d3.svg.arc()
                                .innerRadius(r + 15)
                                .outerRadius(r + 15),
                    
                                // we might want to try to make a constuctor out of this like the other graph break it down some...