JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>

<div id="chart-area"></div>

CSS

.bar{
      fill: steelblue;
    }

    .bar:hover{
      fill: brown;
    }

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

    .axis path,
    .axis line {
      fill: none;
      stroke: #000;
      shape-rendering: crispEdges;
    }
    #chart-area {width: 100%;overflow:hidden;}

JavaScript

var data = [{"category":"Securily Provisions","values":[{"value":50,"rate":"Work Performed"},{"value":40,"rate":"Knowledge, Skills, and Abilities"}]},{"category":"Investigate","values":[{"value":25,"rate":"Work Performed"},{"value":21,"rate":"Knowledge, Skills, and Abilities"}]},{"category":"Operate and Maintain","values":[{"value":3,"rate":"Work Performed"},{"value":22,"rate":"Knowledge, Skills, and Abilities"}]},{"category":"Oversee and Govern","values":[{"value":12,"rate":"Work Performed"},{"value":7,"rate":"Knowledge, Skills, and Abilities"}]},{"category":"Protect and Defend","values":[{"value":6,"rate":"Work Performed"},{"value":15,"rate":"Knowledge, Skills, and Abilities"}]},{"category":"Collect and Operate","values":[{"value":92,"rate":"Work Performed"},{"value":85,"rate":"Knowledge, Skills, and Abilities"}]}]

var margin = {top: 20, right: 10, bottom: 30, left: 10},
  width = 760 - margin.left - margin.right,
  height = 200 ;

var x0 = d3.scale.ordinal().rangeRoundBands([0, width], .8);

var x1 = d3.scale.ordinal();

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

var xAxis = d3.svg.axis()
  .scale(x0)
  .orient("bottom");

var yAxis = d3.svg.axis()
  .scale(y)
  .orient("left");

var color = d3.scale.ordinal()
  .range(["#02bfe7","#fdb81e"]);

var svg = d3.select('#chart-area').append("svg")
  .attr("width", width + margin.left + margin.right)
  .attr("height", height + margin.top + margin.bottom)
  .attr("preserveAspectRatio", "xMinYMin meet")
  .append("g").attr("class","container")
  .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

//d3.json("data.json", function(error, data) {

  var categoriesNames = data.map(function(d) {
    return d.category;
  });

  var rateNames = data[0].values.map(function(d) {
    return d.rate;
  });

  x0.domain(categoriesNames);
  x1.domain(rateNames).rangeRoundBands([0, x0.rangeBand()]);

  y.domain([0, d3.max(data, function(categorie) {
    return d3.max(categorie.values, function(d) {
     ...