JSFiddle - React, Tailwind, and code Playground

by Shashank D

HTML

<svg width="500" height="400"></svg>
<script src="https://d3js.org/d3.v4.min.js"></script>

CSS

div.tooltip {
  position: absolute;
  text-align: center;
  width: 30px;
  height: 40px;
  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;
}

JavaScript

var csv = 'State,T,P,F\nw-30,4,2,2\nw-31,1,1,0',
	data = d3.csvParse(csv),
  columns = d3.keys(data[0]);
  
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");

var x0 = d3.scaleBand()
    .rangeRound([0, width])
    .paddingInner(0.2);

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.forEach(function(d) {
  for (var i = 1, n = columns.length; i < n; ++i) d[columns[i]] = +d[columns[i]];
});

  var keys = columns.slice(1);
  x0.domain(data.map(function(d) { return d.State; }));
  x1.domain(keys).rangeRound([0, x0.bandwidth()]);
  y.domain([0, d3.max(data, function(d) { return d3.max(keys, function(key) { return d[key]; }); })]).nice();

  g.append("g")
    .selectAll("g")
    .data(data)
    .enter().append("g")
    .attr("transform", function(d) { return "translate(" + x0(d.State) + ",0)"; })
    .selectAll("rect")
    .data(function(d) { return keys.map(function(key) { return {key: key, value: d[key]}; }); })
    .enter().append("rect").classed('bar', true)
      .attr("x", function(d) { return x1(d.key); })
      .attr("y", function(d) { return y(d.value); })
      .attr("width", x1.bandwidth())
      .attr("height", function(d) { return height - y(d.value); })
      .attr("fill", function(d) { return z(d.key); })
        .on("mouseover", function(d) {
           ...