Trying to setup HTML, Javascript, D3 work environment – Blancer.com Tutorials and projects

I am currently trying to teach myself D3 so that I can create some cool data visualizations, however, I am having difficulty getting past the beginning setup. I would be incredibly grateful for any help.

I’ve taken the steps to properly link my HTML and Javascript files, I’ve imported d3 correctly, I’ve linked my JSON file correctly, and I’ve setup a live server using Node.js.

Here is what I have so far:

I’ve created an HTML file within a folder entitled daft, the code is as follows:

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>My Timeline</title>
    </head>
    <body>
        <div id="wrapper"></div>

        <script src="./../../d3.v6.js"></script>
        <script src="./chart.js"></script>
    </body>
</html>

I’ve created a Javascript file (chart.js), also in draft folder, that my HTML file points to, the code is as follows:

async function drawLineChart() {

  // 1. Access data
  const dataset = await d3.json("./../../my_weather_data.json")

  console.table(dataset[0])
}

drawLineChart()

Additional information: Before trying to run my code I setup a live server using node.js. Also, I’m using Visual Code Studio.

Here are the error messages I’m receiving:

When I try to run my HTML code:
HTML Error

When I try to run my Javascript code (I am confused why d3 is not defined):
Javascript Error

I’m following Amelia Wattenberger’s Fullstack D3 course and this is the initial setup she suggested. I am open to other text editors or methods for linking my HTML and Javascript files.

THANKS SO MUCH