JSFiddle - React, Tailwind, and code Playground

by Gerardo Furtado

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

datasetTotal = [{
        label: "Category 1",
        value: 19
    }, {
        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
    }];

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

    datasetOption2 = [{
        label: "Category 1",
        value: 10
    }, {
        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 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 =...