JSFiddle - React, Tailwind, and code Playground

by HemalathaThanigaivel

HTML

<script src="https://d3js.org/d3.v4.min.js"></script>
<div id="ddata">
State,AgeGroup,Year,Value
CA,Under 5 Years,1990,2704659
CA,Under 5 Years,2000,2677612
CA,Under 5 Years,2010,2623519
CA,5 to 13 Years,1990,4499890
CA,5 to 13 Years,2000,5489866
CA,5 to 13 Years,2010,7469817
CA,14 to 17 Years,1990,2159981
CA,14 to 17 Years,2000,2635177
CA,14 to 17 Years,2010,3585568
CA,18 to 24 Years,1990,3853788
CA,18 to 24 Years,2000,4624546
CA,18 to 24 Years,2010,6166061
CA,25 to 44 Years,1990,10604510
CA,25 to 44 Years,2000,12513322
CA,25 to 44 Years,2010,16330945
CA,45 to 64 Years,1990,8819342
CA,45 to 64 Years,2000,7937408
CA,45 to 64 Years,2010,6173539
CA,65 Years and Over,1990,4114496
CA,65 Years and Over,2000,4443656
CA,65 Years and Over,2010,5101975
TX,Under 5 Years,1990,2027307
TX,Under 5 Years,2000,2290857
TX,Under 5 Years,2010,2817957
TX,5 to 13 Years,1990,3277946
TX,5 to 13 Years,2000,2884592
TX,5 to 13 Years,2010,2097885
TX,14 to 17 Years,1990,1420518
TX,14 to 17 Years,2000,1434723
TX,14 to 17 Years,2010,1463134
TX,18 to 24 Years,1990,2454721
TX,18 to 24 Years,2000,2111060
TX,18 to 24 Years,2010,1423738
TX,25 to 44 Years,1990,7017731
TX,25 to 44 Years,2000,6666844
TX,25 to 44 Years,2010,5965071
TX,45 to 64 Years,1990,5656528
TX,45 to 64 Years,2000,7070660
TX,45 to 64 Years,2010,9898924
TX,65 Years and Over,1990,2472223
TX,65 Years and Over,2000,2472223
TX,65 Years and Over,2010,2472223
NY,Under 5 Years,1990,1208495
NY,Under 5 Years,2000,1087646
NY,Under 5 Years,2010,845947
NY,5 to 13 Years,1990,2141490
NY,5 to 13 Years,2000,2655448
NY,5 to 13 Years,2010,3683363
NY,14 to 17 Years,1990,1058031
NY,14 to 17 Years,2000,1227316
NY,14 to 17 Years,2010,1565886
NY,18 to 24 Years,1990,1999120
NY,18 to 24 Years,2000,2159050
NY,18 to 24 Years,2010,2478909
NY,25 to 44 Years,1990,5355235
NY,25 to 44 Years,2000,5622997
NY,25 to 44 Years,2010,6158520
NY,45 to 64 Years,1990,5120254
NY,45 to 64 Years,2000,6349115
NY,45 to 64 Years,2010,8806837
NY,65 Years and...

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);
  
d3.csv("data.csv", function(error, data) {
  if (error) throw error;
  
  data.forEach(function(d){
    d.Value = +d.Value;
  })
  
	console.log("data", data);
  
  x0.domain(data.map(function(d) { return d.State; }));
  x1.domain(data.map(function(d) { return d.Year; }))
    .rangeRound([0, x0.bandwidth()])
  	.padding(0.2);
  
  z.domain(data.map(function(d) { return d.AgeGroup; }))
  var keys = z.domain()
  
  var groupData = d3.nest()
    .key(function(d) { return d.Year + d.State; })
  	.rollup(function(d, i){
      
      var d2 = {Year: d[0].Year, State: d[0].State}
      d.forEach(function(d){
        d2[d.AgeGroup] = d.Value
      })
      console.log("rollup d", d, d2);
    	return d2;
    })
    .entries(data)
  	.map(function(d){ return d.value; });
  
  console.log("groupData", groupData)
  
  var stackData = stack
  	.keys(keys)(groupData)
  
  console.log("stackData", stackData)
  
  //y.domain([0, d3.max(data, function(d) { return d.Value; })]).nice();

  console.log("keys", keys)
  
  var serie = g.selectAll(".serie")
    .data(stackData)
    .enter().append("g")
      .attr("class", "serie")
      .attr("fill", function(d) { return z(d.key); });
  
  serie.selectAll("rect")
    .data(function(d) { return d; })
    .enter().append("rect")
  		.attr("class",...