How to set up project to use D3

Programming
1

I am attempting to do my first D3 certification project. When I attempt to do anything with D3, my page does not respond. I made a simple index.html file with the script tags inside the body. I used npm init
npm i
and
npm i d3

after seeing nothing happening in my browser. I also tried to make sure the content was loaded with the function they provide in the AJAX section. I am sure it is a very simple thing I am messing up right now, but I can’t get past it. Here is my index.html code so far

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Gross Domestic Product</title>
</head>
<body>
    <main>

        <script>
d3.select("body").append("h1").text("Learning D3");
        </script>

        <!-- <h1>hello world</h1>
        <button id="test">Test Button</button> -->

        <style>
        </style>
    </main>
    <!-- <script src="script.js" type="javascript/text"></> -->
</body>
</html>
2

When you are not making a project in Node environment, you don’t need to use NPM for the project.

As documentation said, you can add this import statement at the beginning of the script tag (Don’t forget to add type="module" attribute.):

<script type="module">

import * as d3 from "https://cdn.jsdelivr.net/npm/d3@7/+esm";

</script>

Now, it should work properly.

Good luck!