I am really new to D3 and wanting to create a simple bar chart to get the gist of how D3 functions. I am using this website:

https://observablehq.com/@uwdata/introduction-to-d3-part-1

It has an online built-in repl which is how I have access to the data that is being used.

I am stuck on the second exercise where it wants use to recreate this bar chart

Currently, this is the code I have

{
  const container = d3.create('div');
  
  const data = barData;
  
  const barChart = container.selectAll('div')
  /* TODO: Add code here to generate the bar chart within the container. */
  data.forEach(function(d) {
    var dataValue = 0 
    dataValue = d.value
  
  })
  barChart
      .data(data)
      .style('background', 'steelblue')   // Set the background color of the div to 'steelblue'
      .style('border', '1px solid white') // Set the border of the div as 'white'
      .style('font-size', 'small')        // Set the text font size in the div to 'small'
      .style('color', 'white')            // Set the text font color to 'white'
      .style('text-align', 'right')       // Set the text alignment in the div to 'right'
      .style('padding', '3px')            // HINT: CSS styles require units, not just numbers
      .style('height', '500px')
      .style('width', '960px')
  /* TODO: Add code here to finish updating the visual properties of the bars */
  
  return container.node();
}

What I assume that has to be done is looping through the dataset provided and then grabbing the values which are what I am doing but after the chart should show up with the styling that is provided. I am confused as to why nothing is displaying at all. Any help would be greatly appricated.