hover over group of bars

Forked from https://blockbuilder.org/callmedeeray/674cb79e6240b83b081a7f25e6dc94ed

forked from tomshanley's block: hover over group of bars. Now uses Array.group

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v5.min.js"></script>
  <script src="https://d3js.org/d3-array.v2.min.js"></script>
  <style>
    
    svg {
      outline: 1px solid red;
      display: inline-block;
    }
    
    .bar {
      pointer-events: none;
      stroke: black;
     	stroke-width: 1;
    }
    
    .hover-bar {
      opacity: 0;
      fill: white;
    }
  </style>
</head>

<body>
  <script>
    
    let width = 0.45 * window.innerWidth
    let height = 0.9  *window.innerHeight
    let padding = 25
    
    var svg = d3.select('body').append('svg')
      .attr('width', width + padding + padding)
      .attr('height', height + padding + padding)
         
    let g = svg.append("g")
    	.attr("transform", "translate(" + padding + ", " + padding + ")")

var textbox = d3.select('body').append('span')
      .attr('id', 'textbox')
      .style('width', 0.3*window.innerWidth + 'px')
      .style('height', 0.9*window.innerHeight + 'px')
      .style('margin-left', 0.05*window.innerWidth + 'px')
      .style('display', 'inline-block')
      .style('vertical-align', 'middle')
      .style('font-size', '24pt')
      .style('padding-left', 0.01*window.innerWidth + 'px');

let data = [
        {'group': 'A', 'datum': 0},
        {'group': 'A', 'datum': 1},
        {'group': 'A', 'datum': 2},
        {'group': 'A', 'datum': 3},
        {'group': 'A', 'datum': 4},

{'group': 'B', 'datum': 0},
        {'group': 'B', 'datum': 1},
        {'group': 'B', 'datum': 2},
        {'group': 'B', 'datum': 3},
        {'group': 'B', 'datum': 4},

{'group': 'C', 'datum': 0},
        {'group': 'C', 'datum': 1},
        {'group': 'C', 'datum': 2},
        {'group': 'C', 'datum': 3},
        {'group': 'C', 'datum': 4}
    ];
    
    
    let groupedData = Array.from(d3.group(data, d => d.group), ([key, value]) => ({key, value}))

let colors = [ "darkviolet", 'lightseagreen', 'coral'],
       color = d3.scaleOrdinal().range(colors);

let x = d3.scaleLinear()
      .domain([0, 5])
      .range([0, width]);

let y = d3.scaleBand()
      .domain(['A', 'B', 'C'])
      .range([10, height])
      .padding(0.1);
    
    let groupBars = g.append('g')
      .selectAll('.group')
      .data(groupedData)
      .enter()
      .append('g')
    	.attr("transform", function(d,i){
        return "translate(0, " + y(d.key) + ")"
      })
      
    let segments = groupBars.selectAll(".bar")
    	.data(function(d) { return d.value })
    	.enter()
    	.append("rect")
    	.attr("class", "bar")
      .attr('x', function(d) { return x(d.datum) })
      .attr('width', function(d) { return x(d.datum) - x(d.datum-1) })
      .attr('height', y.bandwidth())
      .attr('fill', function(d) { return color(d.group) })
      
    groupBars.append("rect")
    	.attr("class", "hover-bar")
    	.attr("width", width)
    	.attr("height", y.bandwidth())
    	.on('mousemove', function(d) {
        document.getElementById('textbox').innerHTML += d.key
      })
      .on('mouseout', function(d) {
        document.getElementById('textbox').innerHTML = null
      })

</script>
</body>

https://d3js.org/d3.v5.min.js

https://d3js.org/d3-array.v2.min.js