JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://d3js.org/d3.v3.min.js"></script>
<div id="searchVolume"></div>

CSS

#tooltip {
	position: absolute;
	width: 50px;
	height: auto;
	padding: 10px;
	background-color: white;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	-webkit-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
	-moz-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
	box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
	pointer-events: none;
}
#tooltip.hidden {
	display: none;
}
#tooltip p {
	margin: 0;
	font-family: sans-serif;
	font-size: 12px;
	line-height: 16px;
}
.indent{
	padding-left: 5px;
}

rect {
	-moz-transition: all 0.3s;
	-webkit-transition: all 0.3s;
	-o-transition: all 0.3s;
	transition: all 0.3s;
}
rect:hover{
	fill: orange;
}
.axis path,
.axis line {
	fill: none;
	stroke: black;
	shape-rendering: crispEdges;
}
.axis text {
	font-family: sans-serif;
	font-size: 11px;
}

JavaScript

var margin = {top: 25, right: 40, bottom: 35, left: 85},
				w = 500 - margin.left - margin.right,
				h = 350 - margin.top - margin.bottom;
var padding = 10;

var colors =	[ ["Morning", "#F64BEE"],
				  ["Midday", "#25B244"],
          ["Afternoon", "#2BA3F4"],
          ["Evening","#FD7680"]];

var dataset = [
				{ "Morning": 1400000, "Midday": 673000, "Afternoon": 43000, "Evening":50000},
				{ "Morning": 165000, "Midday": 160000, "Afternoon": 21000, "Evening":23000 },
				{"Morning": 550000, "Midday": 301000, "Afternoon": 34000, "Evening":43000},
        {"Morning": 550320, "Midday": 351000, "Afternoon": 24000, "Evening":38000},
        {"Morning": 55000, "Midday": 3010, "Afternoon": 24000, "Evening":43054},
        {"Morning": 750000, "Midday": 401000, "Afternoon": 84000, "Evening":42100},
        {"Morning": 578000, "Midday": 306000, "Afternoon": 54000, "Evening":43400},
							];

var xScale = d3.scale.ordinal()
				.domain(d3.range(dataset.length))
				.rangeRoundBands([0, w], 0.05); 
// ternary operator to determine if global or local has a larger scale
var yScale = d3.scale.linear()
				.domain([0, d3.max(dataset, function(d) { return Math.max(d.Morning,d.Midday,d.Afternoon,d.Evening);})]) 
				.range([h, 0]);
var xAxis = d3.svg.axis()
				.scale(xScale)
				.orient("bottom");
var yAxis = d3.svg.axis()
				.scale(yScale)
				.orient("left")
				.ticks(5);
		



var commaFormat = d3.format(',');

//SVG element
var svg = d3.select("#searchVolume")
			.append("svg")
			.attr("width", w + margin.left + margin.right)
			.attr("height", h + margin.top + margin.bottom)
			.append("g")
			.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
	
// Graph Bars
var sets = svg.selectAll(".set") 
	.data(dataset) 
	.enter()
	.append("g")
    .attr("class","set")
    .attr("transform",function(d,i){
         return "translate(" + xScale(i) + ",0)";
     })
	;

sets.append("rect")
    .attr("class","Morning")
	.attr("width",...