<style> .bar { width: 25px; height: 100px; display: inline-block; background-color: blue; } </style>
above here is setting up a default style for a class named bar, this will be showing a rectangle alone, to use d3 to create a bar chart out of this rectangle, you’ll select the body element and all the divs that will be created in it like this
const dataset = [12, 31, 22, 17, 25, 18, 29, 14, 9]; d3.select("body") .selectAll("div") .data(dataset) .enter() .append("div")
to refer to the bar property created already in the css you simply use the .attr method like this.
.attr('class', 'bar')
now d3 knows we are referring to the bar property already what is needed to style it so it’s converted into bar chart is using d3 .style method like this.
what determines the height of each divs are the elements in the dataset array and d will be representing them in the callback.
.style('height', (d) => { return d + 'px' })