JSFiddle - React, Tailwind, and code Playground

by Rajesh Danabal

HTML

<!DOCTYPE html>
<meta charset="utf-8">
<style>
  body {
    font: 10px sans-serif;
  }

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

  .bar {
    fill: steelblue;
  }

  .x.axis path {
    display: none;
  }

</style>

<body>
  <script src="https://d3js.org/d3.v5.min.js"></script>
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
  <script>
    var margin = {
        top: 20,
        right: 20,
        bottom: 30,
        left: 40
      },
      width = 960 - margin.left - margin.right,
      height = 500 - margin.top - margin.bottom;

    var x0 = d3.scaleBand().range([0, width]);

    var x1 = d3.scaleBand();

    var y = d3.scaleLinear()
      .range([height, 0]);

    var xAxis = d3.axisBottom()
      .scale(x0);

    var yAxis = d3.axisLeft()
      .scale(y)
      .tickFormat(d3.format(".2s"));

    var color = d3.scaleOrdinal().range(
      ["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56", "#d0743c", "#ff8c00"]);

    var svg = d3.select("body").append("svg")
      .attr("width", width + margin.left + margin.right)
      .attr("height", height + margin.top + margin.bottom)
      .append("g")
      .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

    var yBegin;

    var innerColumns = {
      "column1": ["Under 5 Years", "5 to 13 Years", "14 to 17 Years"],
      "column2": ["18 to 24 Years"],
      "column3": ["25 to 44 Years"],
      "column4": ["45 to 64 Years", "65 Years and Over"]
    }

    function draw(data) {
      var columnHeaders = d3.keys(data[0]).filter(function(key) {
        return key !== "State";
      });
      color.domain(d3.keys(data[0]).filter(function(key) {
        return key !== "State";
      }));
      data.forEach(function(d) {
        var yColumn = new Array();
        d.columnDetails = columnHeaders.map(function(name) {
          for (ic in innerColumns) {
            if ($.inArray(name, innerColumns[ic]) >=...