Help setting up D3 projects

I have been completely stumped on how to actually start any D3 projects. The only thing I am able to see is the “hello world” I made to test if the CDN works. Nothing else appears. I have even tried following along to online tutorials to see their setup and see some progress. But, the furthest I was able to get was seeing a purple square in the top left corner (no height differences, no width spacing, just the purple square). I understand what I learned in the lesson portions, but I can’t seem to make the output replicate the lesson’s outputs. I know I am missing some fundamental step, but I cannot see it.

<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <title>Gross Domestic Product</title>
      <script type="module">
        import * as d3 from "";

        const main ="main");
        main.append('h1').text('hello world')

        //     //   const body ="body");

        // fetch API
        // const url =
        //   "";
        // const fetchData = fetch(url)
        //   .then((res) => res.json())
        //   .then((data) => {
        //     console.log(;
        //   });

        // const gdpData =;
        const DUMMY_DATA = [
            id: "d1",
            region: "USA",
            value: 12,
            id: "d2",
            region: "France",
            value: 18,
            id: "d3",
            region: "Germany",
            value: 8,
            id: "d4",
            region: "China",
            value: 13,

        const WIDTH = 500;
        const HEIGHT = 500;

        const x = d3.scaleBand().rangeRound([0, WIDTH]).padding(0.1);
        const y = d3.linearScale().range([HEIGHT, 0]);
        x.domain( => d.region));
        y.domain([0, d3.max(DUMMY_DATA, (d) => d.value + 3)]);

        const chartContainer = d3
          .attr("width", WIDTH)
          .attr("height", HEIGHT);

        const chart = chartContainer.append("g");

          .classed("bar", true)
          .attr("color", "red")
          .attr("width", x.bandwidth())
          .attr("height", (d) => HEIGHT - y(d.value))
          .attr("x", (d) => x(d.region))
          .attr("y", (d) => y(d.value));

        body {
          background-color: rgb(57, 63, 69);

        .bar {
          fill: purple;

    <!-- <script src="script.js" type="javascript/text"></> -->

Also if you would provide me your personal go to way to set up a project like the gdp (using a cdn, installing d3, things alike) I would very much appreciate your insight on that as well