JSFiddle - React, Tailwind, and code Playground

by Shane Gibney

HTML

<!DOCTYPE html>

<body>
  <div>
    <form id="form">
      <input type="radio" name="stack" value="val1">blue (val1)
      <br>
      <input type="radio" name="stack" value="val2">white (val2)
      <br>
      <input type="radio" name="stack" value="val3">green (val3)
      <br>
    </form>
  </div>
  <div id="bar_chart">
  </div>
  <div id="pie">
  </div>
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <script>
    var data = [{
      "name": "A",
      "val1": 11,
      "val2": 6,
      "val3": 1

    }, {
      "name": "B",
      "val1": 8,
      "val2": 7,
      "val3": 3
    }, {
      "name": "C",
      "val1": 9,
      "val2": 5,
      "val3": 4
    }]

    var data2 = [{
        "name": "RT",
        "category": "M50",
        "value": 1
      },
      {
        "name": "K M",
        "category": "M50",
        "value": 2
      },
      {
        "name": "SD",
        "category": "M60",
        "value": 3
      },
      {
        "name": "DK",
        "category": "M50",
        "value": 4
      },
      {
        "name": "BD",
        "category": "M40",
        "value": 5
      },
      {
        "name": "KC",
        "category": "M40",
        "value": 6
      },
      {
        "name": "PM",
        "category": "M40",
        "value": 7
      },
      {
        "name": "NR",
        "category": "M50",
        "value": 8
      },
      {
        "name": "LM",
        "category": "M50",
        "value": 9
      },
      {
        "name": "SL",
        "category": "M60",
        "value": 1
      }
    ]
    data.forEach(function(d) {
      d.value = +d.value;
    });

    var margin = {
        top: 50,
        right: 50,
        bottom: 100,
        left: 80
      },
      width = 1500 - margin.left - margin.right,
      height = 600 - margin.top - margin.bottom;

    var x = d3.scaleBand()
      .domain(data.map(function(d) {
        return d.name
      }))
      .range([0, width / 4]);

    var y1 = d3.scaleLinear()
      .domain([0,...