JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://d3js.org/d3.v3.min.js"></script>
<a class="show" target="1">Chart 1</a>
<a class="show" target="2">Chart 2</a>

<button type="button" onclick="javascript:submit_download_form('svg')">SVG</button>
<button type="button" onclick="javascript:submit_download_form('pdf')">PDF</button>
<button type="button" onclick="javascript:submit_download_form('png')">PNG</button>

<div id="graph1" class="targetDiv"></div>
<div id="graph2" class="targetDiv"></div>

<form id="svgform" method="post" action="download.pl">
    <input type="hidden" id="output_format" name="output_format" value="">
    <input type="hidden" id="data" name="data" value="">
</form>

CSS

#graph1, #graph2 {
    display: none;
}
a {
    text-decoration: underline;
    cursor: pointer;
}
a:hover {
    color: #f00;
}
.slice path {
    stroke: #fff;
    stroke-width: 1px;
}
.textTop {
    font-family:'Segoe UI';
    font-size: 12pt;
    fill: #bbb;
}
.textBottom {
    fill: #444;
    font-family:'Segoe UI';
    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

data1 = [{
    "label": "ONE",
        "value": 194
}, {
    "label": "TWO",
        "value": 567
}, {
    "label": "THREE",
        "value": 1314
}, {
    "label": "FOUR",
        "value": 793
}, {
    "label": "FIVE",
        "value": 1929
}, {
    "label": "SIX",
        "value": 1383
}];

data2 = [{
    "label": "ONE",
        "value": 39
}, {
    "label": "TWO",
        "value": 56
}, {
    "label": "THREE",
        "value": 131
}, {
    "label": "FOUR",
        "value": 79
}];

$(function () {
    $(".show").click(function () {
        $(".targetDiv").slideUp("fast");

        if ($("#graph" + $(this).attr("target")).css("display") != "block") {
            $("#graph" + $(this).attr("target")).slideDown("fast");
        }
    });
});

(function () {
    var w = 400,
        h = 400,
        r = 180,
        inner = 70,
        color = d3.scale.category20c();

    var total = d3.sum(data1, function (d) {
        return d3.sum(d3.values(d));
    });

    var vis = d3.select("#graph1")
        .append("svg:svg")
        .data([data1])
        .attr("width", w)
        .attr("height", h)
        .append("svg:g")
        .attr("transform", "translate(" + r * 1.1 + "," + r * 1.1 + ")")

    var textTop = vis.append("text")
        .attr("dy", ".35em")
        .style("text-anchor", "middle")
        .attr("class", "textTop")
        .text("TOTAL")
        .attr("y", -10),
        textBottom = vis.append("text")
            .attr("dy", ".35em")
            .style("text-anchor", "middle")
            .attr("class", "textBottom")
            .text(total.toFixed(2) + "m")
            .attr("y", 10);

    var arc = d3.svg.arc()
        .innerRadius(inner)
        .outerRadius(r);

    var arcOver = d3.svg.arc()
        .innerRadius(inner + 5)
        .outerRadius(r + 5);

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

    var arcs = vis.selectAll("g.slice")
        .data(pie)
        .enter()
        .append("svg:g")
      ...