JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://d3js.org/d3.v3.min.js"></script>
<div class="canvasBox" id="q1canvas"></div>
<button id="clickme1">dataset 1</button>
<button id="clickme2">dataset 2</button>

CSS

div.canvasBox {
    width: 300px;
    height: 300px;
}

JavaScript

var questions = 2,
    height = 250,
    width = 300,
    radius = 100,
    colorMap = ["#C0B0D6", "#9BC4D3", "#A8ADD2"],
    colors = d3.scale.ordinal().range(colorMap),
    letters = ["a","b","c","d","e","f","g","h","i","j","k","l"],
    data1 = [{"name" : "a","votes" : 1},{"name" : "b","votes" : 1},{"name" : "c","votes" : 1}],
    data2 = [{"name" : "a","votes" : 1},{"name" : "b","votes" : 2},{"name" : "c","votes" : 3}];

var changeFunctions = [];

    for (var i = 0; i < questions; i++) {
        var arc = d3.svg.arc()
                    .outerRadius(radius - 10)
                    .innerRadius(0);

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

        var svg = d3.select("#q" + i + "canvas").append("svg")
                    .attr("width", width)
                    .attr("height", height)
                    .append("g")
                    .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");
        
        var data = data1;

        var g = svg.selectAll("g.arc")
            .data(pie(data));
        g.enter()
            .append("g").attr("class", "arc");
        var path = g.append("path");
            

        path.attr("fill", function () { return "#333"; })
            .transition()
            .duration(500)
            .attr("fill", function (piece) { return colors(piece.data.name); })
            .attr("d", arc)
            .each(function (d) {
                this._current = d;
            })

        var totalVotes = 3;

        var text = g.append("text")
            .attr("transform", function(d) {
                var c = arc.centroid(d),
                    x = c[0], y = c[1],
                    h = Math.sqrt(x * x + y * y); 
                return "translate(" + (x/h * 100) +  ',' + (y/h * 100) +  ")"; 
            })
            .attr("class", function (d, num) {
                return "q" + i...