JSFiddle - React, Tailwind, and code Playground

by Paco86

HTML

<div id="chart"></div>

CSS

#chart{
    width: 400px;
    height: 200px;
    background-color: #f7f7f7;
    margin: 25px auto;
}

JavaScript

// Data
const data = [
    { pigeons: 6, doves: 8, eagles: 15 },
    { pigeons: 9, doves: 15, eagles: 5 },
    { pigeons: 11, doves: 13, eagles: 14 },
    { pigeons: 15, doves: 4, eagles: 20 },
    { pigeons: 22, doves: 25, eagles: 23 }
];

const chart_width = 400;
const chart_height = 200;
const color = d3.scaleOrdinal( d3.schemeCategory10 );

// Create SVG Element
const svg = d3.select("#chart")
    .append("svg")
    .attr("width", chart_width)
    .attr("height", chart_height);
    
 //Layout   
const stack = d3
	.stack()
  .keys(['pigeons', 'doves', 'eagles']);
  
const stackData = stack(data);

//Scales
const xScale = d3
	.scaleBand()
  .domain(d3.range(data.length))
  .range([0, chart_width])
  .paddingInner(0.5);
  
const yScale = d3
	.scaleLinear()
  .domain([0, d3.max(data, d => d.pigeons + d.doves + d.eagles)])
  .range([chart_height, 0]);
  
console.log(stackData)  


//group
const group = svg
	.selectAll('g')
  .data(stackData)
  .enter()
  .append('g')
  .attr('fill', (d, i) => color(i));
  
//rect
group
	.selectAll('rect')
  .data(d => d)
  .enter()
  .append('rect')
  .attr('x', (d, i) => xScale(i))
  .attr('y', d => yScale(d[1]))
  .attr('width', () => xScale.bandwidth())
  .attr('height', d => yScale(d[0]) - yScale(d[1]))