JSFiddle - React, Tailwind, and code Playground

by HemalathaThanigaivel

HTML

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

CSS

.axis .domain {
  display: none;
}

JavaScript

var svg = d3.select("svg"),
    margin = {top: 40, right: 100, bottom: 60, left: 60},
    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 x0 = d3.scaleBand()
    .rangeRound([0, width])
    .paddingInner(0.1);

var x1 = d3.scaleBand()
    .padding(0.05);

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

var y1 = d3.scaleBand()
  
var z = d3.scaleOrdinal()
    .range(["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56", "#d0743c", "#ff8c00"]);

var stack = d3.stack()
    .offset(d3.stackOffsetExpand);
    
    
let data = [{
State: "CA",
AgeGroup: "Under5Years",
Year: "1990",
Value: "2704659"
}, {
State: "CA",
AgeGroup: "5to13Years",
Year: "2000",
Value: "2677612"
}, {
State: "CA",
AgeGroup: "14to17Years",
Year: "2010",
Value: "2623519"
},{
State: "TX",
AgeGroup: "Under5Years",
Year: "1990",
Value: "2027307"
}, {
State: "TX",
AgeGroup: "5to13Years",
Year: "2000",
Value: "2884592"
}, {
State: "TX",
AgeGroup: "14to17Years",
Year: "2010",
Value: "1463134"
},{
State: "NY",
AgeGroup: "Under5Years",
Year: "1990",
Value: "1208495"
}, {
State: "NY",
AgeGroup: "5to13Years",
Year: "2000",
Value: "2864592"
}, {
State: "NY",
AgeGroup: "14to17Years",
Year: "2010",
Value: "1423134"
},{
State: "FL",
AgeGroup: "Under5Years",
Year: "1990",
Value: "1108495"
}, {
State: "FL",
AgeGroup: "5to13Years",
Year: "2000",
Value: "2984592"
}, {
State: "FL",
AgeGroup: "14to17Years",
Year: "2010",
Value: "1653134"
},{
State: "IL",
AgeGroup: "Under5Years",
Year: "1990",
Value: "1118495"
}, {
State: "IL",
AgeGroup: "5to13Years",
Year: "2000",
Value: "2882592"
}, {
State: "IL",
AgeGroup: "14to17Years",
Year: "2010",
Value: "1481134"
},{
State: "PA",
AgeGroup: "Under5Years",
Year: "1990",
Value: "1148495"
}, {
State: "PA",
AgeGroup: "5to13Years",
Year: "2000",
Value: "2875592"
}, {
State: "PA",
AgeGroup:...