JSFiddle - React, Tailwind, and code Playground

by Steve Pegg

HTML

<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="https://d3js.org/d3.v3.min.js"></script>
<body>
<form>
    <label><input type="radio" name="dataset" id="dataset" value="total" checked> Total</label>
    <label><input type="radio" name="dataset" id="dataset" value="option1"> Option 1</label>
    <label><input type="radio" name="dataset" id="dataset" value="option2"> Option 2</label>
</form>
</body>

CSS

body {
        font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
        width: 960px;
        height: 500px;
        position: relative;
    }
    svg {
        width: 100%;
        height: 100%;
        position: center;
    }

    path.slice{
        stroke-width:2px;
    }

    text{
        font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    }

    polyline{
        opacity: .3;
        stroke: black;
        stroke-width: 2px;
        fill: none;
    }

    .labelValue
    {
        font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
        font-size: 60%;
        opacity: .5;

    }

    label {
        font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
        font-weight: normal;
    }

    .toolTip {
        font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
        position: absolute;
        display: none;
        width: auto;
        height: auto;
        background: none repeat scroll 0 0 white;
        border: 0 none;
        border-radius: 8px 8px 8px 8px;
        box-shadow: -3px 3px 15px #888888;
        color: black;
        font: 12px sans-serif;
        padding: 5px;
        text-align: center;
    }


    .legend {
        font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
        font-size: 60%;
    }
    rect {
        stroke-width: 2;
    }

    text {
        font: 10px sans-serif;
    }


    text.value{
        font-size: 200%;
        fill: white;
    }

    text.label{
        font-size: 100%;
    }

    .axis text {
        font: 10px sans-serif;
    }

    .axis path{
        fill: none;
        stroke: #000;
    }

    .axis line {
        fill: none;
        stroke: #000;
        shape-rendering: crispEdges;
    }

    .axis .tick line {
        stroke-width: 1;
        stroke: rgba(0, 0, 0, 0.2);
    }

    .axisHorizontal path{
        fill: none;
    }

    .axisHorizontal line {
        fill: none;
        stroke: #000;
        shape-rendering: crispEdges;
   ...

JavaScript

var datasetTotal = [
            { label: "Category 1", value: 5 },
            { label: "Category 2", value: 5 },
            { label: "Category 3", value: 13 },
            { label: "Category 4", value: 17 },
            { label: "Category 5", value: 21 },
            { label: "Category 6", value: 25 }
    ];

    var datasetOption1 = [
        { label: "Category 1", value: 10 },
        { label: "Category 2", value: 33 },
        { label: "Category 3", value: 4 },
        { label: "Category 4", value: 15 },
        { label: "Category 5", value: 36 },
        { label: "Category 6", value: 1 }
    ];

    var datasetOption2 = [
        { label: "Category 1", value: 15 },
        { label: "Category 2", value: 20 },
        { label: "Category 3", value: 30 },
        { label: "Category 4", value: 5 },
        { label: "Category 5", value: 12 },
        { label: "Category 6", value: 23 }
    ];

    d3.selectAll("input").on("change", selectDataset);

    function selectDataset() {
        var value = this.value;
        if (value == "total") {
            change(datasetTotal);
        }
        else if (value == "option1") {
            change(datasetOption1);
        }
        else if (value == "option2") {
            change(datasetOption2);
        }
    }

    //var dataset = datasetTotal;

    var margin = { top: (parseInt(d3.select('body').style('height'), 10) / 20), right: (parseInt(d3.select('body').style('width'), 10) / 20), bottom: (parseInt(d3.select('body').style('height'), 10) / 20), left: (parseInt(d3.select('body').style('width'), 10) / 5) },
            width = parseInt(d3.select('body').style('width'), 10) - margin.left - margin.right,
            height = parseInt(d3.select('body').style('height'), 10) - margin.top - margin.bottom;

    var div = d3.select("body").append("div").attr("class", "toolTip");

    var formatPercent = d3.format("");

    var y = d3.scale.ordinal()
            .rangeRoundBands([height, 0], .2, 0.5);

    var x =...