I'm trying to create a simple bar chart using d3.js, but I'm very confused about how d3 works on traversing the dataset.

I have a div in my webpage_123.html file like this

<div>
       <p class="chart-title">Grade Percentages</p>
       <svg id="drawing0" class="barchart" />
</div>

I have a dataset in a data_123.js file as following

const grade_percents = {
    "Project": 35,
    "Presentation": 5,
    "Homework": 25,
    "Midterm": 15,
    "Final": 20
}

I wrote the code in another d3_123.js file as following

window.addEventListener('load', function () {
    
    createBarChart('drawing0', grade_percents);
});

// Create the Bar Chart view
// elm - the name of the SVG element housing the view
// data - the passed in dataset (the object "grade_percents" in this case)
let createBarChart = function(elm, data) {

console.log(data);

let trans = d3.transition().duration(750);

let drawing0 = d3.select(elm);

barWidth = 80;

let bars = drawing0.selectAll(".bar")
    .data(data, d => d)
    .join(
    enter => enter.append("rect")
        .attr("class", d => "bar")
        .attr("x", (d, i) => 5 + i * (barWidth + 10))
        .attr("y", (d, i) => value[i] * 10)
        .attr("width", barWidth)
        .attr("height", 50)
        .style("fill", "#00008B")
    );
};

After I ran the code, nothing shows on the webpage, and nothing in the svg element as well. I studied the d3js documentation on Observable but didn't get me anywhere.

Could you please point out what's wrong with the code?

And maybe explain a little bit about how d and i work in this case? I'm very confused about these 2 variables here.

Thank you very much!