JSFiddle - React, Tailwind, and code Playground

by HemalathaThanigaivel

HTML

<!DOCTYPE html>
<html>
<head>
	<!-- <script src="https://d3js.org/d3-color.v1.min.js"></script> -->
	<!-- <script src="https://d3js.org/d3-interpolate.v1.min.js"></script>
	<script src="https://d3js.org/d3-scale-chromatic.v1.min.js"></script> -->
</head>
<body>
</body>
</html>

JavaScript

var data = [{
	    Category: "cat1",
	    type1: 300,
	    type2: 450,
	    type3: 120
	  },
	  {
	    Category: "cat2",
	    type1: 400,
	    type2: 100,
	    type3: 200
	  },
	  {
	    Category: "cat3",
	    type1: 400,
	    type2: 100,
	    type3: 200
	  },
	  {
	    Category: "cat4",
	    type1: 400,
	    type2: 100,
	    type3: 200
	  }
	];

	var w = 500,
	  h = 500,
	  padding = 40;
	var svg = d3.select('body').append('svg')
	  .attr('width', w)
	  .attr('height', h);
	var stack = d3.stack()
	  .keys(['type1', 'type2', 'type3']);

var clip = svg.append("defs").append("svg:clipPath")
     .attr("id", "clip")
     .append("svg:rect")
     .attr("width", w)
     .attr("height", h)
     .attr("x", 0)
     .attr("y", 0);
     
var brush = d3.brush().extent([
  [0, 0],
  [w, h]
]).on("end", brushended),
    idleTimeout,
    idleDelay = 350;
    
 var satckDiv = svg.append("g")
.attr("id", "scatterplot")
.attr("clip-path", "url(#clip)");

	var datasets = [d3.stack().keys(['type1', 'type3'])(data),
	  d3.stack().keys(['type2'])(data)
	];

	/* console.log(datasets) */
	var num_groups = datasets.length;

	var xlabels = data.map(function(d) {
	  return d['Category']
	});

	var xscale = d3.scaleBand()
	  .domain(xlabels)
	  .range([padding, w - padding])
	  .paddingInner(0.5);

	var ydomain_min = d3.min(datasets.flat().map(function(row) {
	  return d3.min(row.map(function(d) {
	    return d[1];
	  }));
	}));
	var ydomain_max = d3.max(datasets.flat().map(function(row) {
	  return d3.max(row.map(function(d) {
	    return d[1];
	  }));
	}));

	var yscale = d3.scaleLinear()
	  .domain([0, ydomain_max])
	  .range([h - padding, padding]);

	var accent = d3.scaleOrdinal(['red', 'blue', 'green']);
	var xaxis = d3.axisBottom(xscale);
	var yaxis = d3.axisLeft(yscale);
satckDiv.append("g")
	  .attr("class", "brush")
	  .call(brush);
    
	d3.range(num_groups).forEach(function(gnum) {
	  svg.selectAll('g.group' + gnum)
	    .data(datasets[gnum])
	    .enter()
	    .append('g')
	  ...