JSFiddle - React, Tailwind, and code Playground

by nishant78

HTML

<!DOCTYPE html>
<html>
<meta http-equiv="content-type" content="text/html; charset=UTF8">
<style>

<!--If axix line not to be displayed, uncomment below code-->

div.tooltip {
  position: absolute;
  text-align: center;
  width: 30px;
  height: 40px;
  <!--padding: 2px;-->
  font: 8px sans-serif;
  background: #0040ff;
  border: 0px;
  border-radius: 8px;
  text-decoration: none;
  color: white;
  }

a:link {
    color: red;
}

/* visited link */
a:visited {
    color: white;
}


<!-- For setting overall graph dimensions:Start -->
</style>
<body>
<svg width="500" height="400"></svg>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script>
<!-- For setting overall graph dimensions:End -->

<!-- For setting graph margins:Start -->
var svg = d3.select("svg"),
    margin = {top: 33, right: 20, bottom: 150, left: 25},
    width = +svg.attr("width") - margin.left - margin.right,
    height = +svg.attr("height") - margin.top - margin.bottom,
    g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")");

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

<!-- For gapping between bar groups-->
var x0 = d3.scaleBand()
    .rangeRound([0, width])
    .paddingInner(0.2);

<!-- For gapping between bars in groups-->
var x1 = d3.scaleBand()
    .padding(0.01);

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

var z = d3.scaleOrdinal()
    .range(["#a9a9a9", "#66cc00", "#ff3333"]);

// Define 'div' for tooltips
var div = d3.select("body")
    .append("div")  // declare the tooltip div
    .attr("class", "tooltip")              // apply the 'tooltip' class
    .style("opacity", 0);                  // set the opacity to nil

<!--Data read from csv and plot grouped bar chart-->
d3.csv("weekwise.csv", function(d, i, columns) {
  for (var i = 1, n = columns.length; i < n; ++i) d[columns[i]] = +d[columns[i]];
  return d;
}, function(error, data) {
  if (error) throw error;
  var keys = data.columns.slice(1);
 ...