Group bar chart with tooltip

<!DOCTYPE html>
<head>
  <meta charset='utf-8'>
  <script src='https://d3js.org/d3.v4.min.js'></script>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/d3-tip/0.7.1/d3-tip.min.js'></script>
  <style>
    .axis-bottom .domain {
      display: none;
    }
    
    .n {
      opacity: .8;
      font-size: 10px;
      margin-left: 4px;
      font-family: sans-serif;
      color: white;
      padding: 6px;
      background-color: #3C3176;
    }
 
  </style>
</head>

<body>
  <script>
        
const data = [
  {
    'State': 'CA',
    'Under 5 Years': 2704659,
    '5 to 13 Years': 4499890,
    '14 to 17 Years': 2159981,
    '18 to 24 Years': 3853788,
    '25 to 44 Years': 10604510,
    '45 to 64 Years': 8819342,
    '65 Years and Over': 4114496
  },
  {
    'State': 'TX',
    'Under 5 Years': 2027307,
    '5 to 13 Years': 3277946,
    '14 to 17 Years': 1420518,
    '18 to 24 Years': 2454721,
    '25 to 44 Years': 7017731,
    '45 to 64 Years': 5656528,
    '65 Years and Over': 2472223
  },
  {
    'State': 'NY',
    'Under 5 Years': 1208495,
    '5 to 13 Years': 2141490,
    '14 to 17 Years': 1058031,
    '18 to 24 Years': 1999120,
    '25 to 44 Years': 5355235,
    '45 to 64 Years': 5120254,
    '65 Years and Over': 2607672
  },
  {
    'State': 'FL',
    'Under 5 Years': 1140516,
    '5 to 13 Years': 1938695,
    '14 to 17 Years': 925060,
    '18 to 24 Years': 1607297,
    '25 to 44 Years': 4782119,
    '45 to 64 Years': 4746856,
    '65 Years and Over': 3187797
  },
  {
    'State': 'IL',
    'Under 5 Years': 894368,
    '5 to 13 Years': 1558919,
    '14 to 17 Years': 725973,
    '18 to 24 Years': 1311479,
    '25 to 44 Years': 3596343,
    '45 to 64 Years': 3239173,
    '65 Years and Over': 1575308
  },
  {
    'State': 'PA',
    'Under 5 Years': 737462,
    '5 to 13 Years': 1345341,
    '14 to 17 Years': 679201,
    '18 to 24 Years': 1203944,
    '25 to 44 Years': 3157759,
    '45 to 64 Years': 3414001,
    '65 Years and Over': 1910571
  }
];

const keys = Object.keys(data[0]).slice(1);
    
const tip = d3.tip().html(d=> d.value);

const margin = {
    top: 40,
    right: 80,
    bottom: 20,
    left: 240
  },
  width = 800,
  height = 480,
  innerWidth = width - margin.left - margin.right,
  innerHeight = height - margin.top - margin.bottom,
  svg = d3.select('body').append('svg').attr('width', width).attr('height', height)
  g = svg.append('g').attr('transform', `translate(${margin.left}, ${margin.top})`);
    
svg.call(tip)

const x0 = d3.scaleBand()
  .rangeRound([0, innerWidth])
  .paddingInner(.1);

const x1 = d3.scaleBand()
  .padding(.05);

const y = d3.scaleLinear()
  .rangeRound([innerHeight, 0]);

const z = d3.scaleOrdinal()
  .range(['#AA8139', '#AA9439', '#3C3176', '#2C4770', '#96A537', '#68266F', '#492E74']);
    
  x0.domain(data.map(d => d.State));
  x1.domain(keys).rangeRound([0, x0.bandwidth()]);
  y.domain([0, d3.max(data, d => d3.max(keys, key=> d[key]))]).nice();

g.append('g')
  .selectAll('g')
  .data(data)
  .enter()
  .append('g')
  .attr('transform', d => 'translate(' + x0(d.State) + ',0)')
  .selectAll('rect')
  .data(d => keys.map(key => {return {key: key, value: d[key]}}))
  .enter().append('rect')
  .attr('x', d => x1(d.key))
  .attr('y', d => y(d.value))
  .attr('width', x1.bandwidth())
  .attr('height', d => innerHeight - y(d.value))
  .attr('fill', d =>  z(d.key))
  .on('mouseover', tip.show)
  .on('mouseout', tip.hide)

g.append('g')
  .attr('class', 'axis-bottom')
  .attr('transform', 'translate(0,' + innerHeight + ')')
  .call(d3.axisBottom(x0));

g.append('g')
  .attr('class', 'axis-left')
  .call(d3.axisLeft(y).ticks(null, 's'))
  .append('text')
  .attr('x', 10)
  .attr('y', y(y.ticks().pop()) + 10)
  .attr('dy', '0.32em')
  .attr('fill', '#000')
  .style('transform', 'rotate(-90deg)')
  .attr('font-weight', 'bold')
  .attr('text-anchor', 'end')
  .text('Population');

const legend = g.append('g')
   .attr('font-family', 'sans-serif')
   .attr('font-size', 10)
   .attr('text-anchor', 'end')
   .selectAll('g')
   .data(keys.slice().reverse())
   .enter().append('g')
   .attr('transform', (d, i) => 'translate(0,' + i * 20 + ')');

legend.append('rect')
  .attr('x', innerWidth - 19)
  .attr('width', 10)
  .attr('height', 10)
  .attr('fill', z);

legend.append('text')
  .attr('x', innerWidth - 32)
  .attr('y', 6)
  .attr('dy', '0.32em')
  .text(d => d);

</script>
</body>

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

https://cdnjs.cloudflare.com/ajax/libs/d3-tip/0.7.1/d3-tip.min.js