Soy realmente nuevo en D3 y quiero crear un gráfico de barras simple para obtener la esencia de cómo funciona D3. Estoy usando este sitio web:

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

Tiene una respuesta en línea incorporada, que es la forma en que tengo acceso a los datos que se están utilizando.

Estoy atascado en el segundo ejercicio donde quiere usarlo para recrear este gráfico de barras

Actualmente, este es el código que tengo.

 { 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(); }

Lo que supongo que se debe hacer es recorrer el conjunto de datos proporcionado y luego tomar los valores que es lo que estoy haciendo, pero después de que el gráfico debería aparecer con el estilo que se proporciona. Estoy confundido en cuanto a por qué no se muestra nada en absoluto. Cualquier ayuda será muy apreciada.