histogram (no svg)

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v5.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
    .hist-chart {
      display: flex;
      flex-direction: row;
      align-items: flex-end;
    }

.group {
      display: flex;
      flex-direction: column;
      margin: 0.05rem;
/*       background-color: teal; */
    }

.block {
      width: 20px;
      height: 5px;
/*       background-color: #fe4a49; */
    }

</style>
</head>

<body>
	<figure class='hist-chart'></figure>
	<script>
    // include data (this could be imported)
    const bins = [
      {bin: 0, value: 2},
      {bin: 7, value: 15},
      {bin: 0, value: 23},
      {bin: 7, value: 25},
      {bin: 0, value: 12},
      {bin: 7, value: 3},
      {bin: 0, value: 16},
      {bin: 7, value: 5},
    ];
    const bins2 = [
      {bin: 0, value: 12},
      {bin: 7, value: 55},
      {bin: 0, value: 3},
      {bin: 7, value: 15},
      {bin: 0, value: 22},
      {bin: 7, value: 30},
      {bin: 0, value: 16},
      {bin: 7, value: 5},
    ];
    
    
		const histogram = (data, color) => {
      // nest the data by state
      const nest = d3
        .nest()
        .key(d => d.state)
        .entries(data);
      console.log(nest)
      
      // select the figure element
    const hist = d3.select('.hist-chart');

// Add 3 groups
    // one for each state
    const group = hist
      .selectAll('.group')
      .data(data)
      .enter()
      .append('div')
      .attr('class', 'group');

// in each group add the appropriate number of blocks
    group
      .selectAll('.block')
      .data(d => Array(d.value).fill())
      .enter()
      .append('div')
      .attr('class', 'block')
    	.style('background-color', color)
      
//     group.append('text').text(d => d.bin);
    
    }
    
    histogram(bins, 'coral');
    histogram(bins2, 'teal');

// add a state label to each group
  </script>
</body>

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