JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="chart"></div>

CSS

* {
  margin: 0;
  padding: 0;
  border: 0;
}

body {
  background: #ffd;
}

body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  position: relative;
}

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

.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;
}

.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;
}

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

.bar {
  fill: steelblue;
  fill-opacity: .9;
}


/*
.x.axis path {
  display: none;
}*/

.active{
  opacity:1;
}


.inactive{
  opacity:0.5;
}

JavaScript

var barChart = d3.select('.chart');

var data = [{
  label: "a",
  "Current Period": 20,
  "Prior Year": 10
}, {
  label: "b",
  "Current Period": 15,
  "Prior Year": 30
}, {
  label: "c",
  "Current Period": 25,
  "Prior Year": 40
}, {
  label: "d",
  "Current Period": 5,
  "Prior Year": 60
}];

var configuration = [{
  "yLabel": "People Count"
}];
var w = 660;
var h = 500;

function colores_google(n) {
  var colores_g = ["#f7b363", "#448875", "#c12f39", "#2b2d39", "#f8dd2f", "#8bf41b"];
  return colores_g[n % colores_g.length];
}

var colorScale = d3.scale.ordinal().range(["#f7b363", "#448875", "#c12f39", "#2b2d39", "#f8dd2f", "#8bf41b"]);

var margin = {
    top: 20,
    right: 110,
    bottom: 30,
    left: 20
  },
  width = w - margin.left - margin.right,
  height = h - margin.top - margin.bottom;


var svg = barChart.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 axisHolder = svg.append("g")
  .attr("class", "axis");
var chartHolder = svg.append("g")
  .attr("class", "chart");
var legendHolder = svg.append("g")
  .attr("class", "legend");

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

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")
  .tickFormat(d3.format(".2s"));

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


var options = getOptions(data);
var data = refactorData(data, options);

function getOptions(data) {
  var options = d3.keys(data[0]).filter(function(key) {
    return key !== "label";
  });
  return options;
}
function refactorData(data, options) {
  data.forEach(function(d) {
    d.valores = options.map(function(name) {
      return {
        name: name,
        value: +d[name],
       ...