Adjusted d3 import method

basic-example/javascript.html

@@ -5,14 +5,15 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <link rel="icon" type="image/x-icon" href="../assets/favicon.png" />
-
-    <script src="../assets/d3.v7.min.js" charset="utf-8"></script>
     <style>
       * {
         font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
           Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue",
           sans-serif;
       }
+      body {
+        margin: 0;
+      }
     </style>
 
     <title>D3 mit JavaScript</title>
@@ -25,17 +26,26 @@
       </div>
     </div>
 
-    <script>
-      url = "https://duolingo.checksch.de/duo_user_info.json";
+    <script type="importmap">
+      {
+        "imports": {
+          "d3": "https://cdn.skypack.dev/d3@7"
+        }
+      }
+    </script>
+
+    <script type="module">
+      import * as d3 from "https://cdn.skypack.dev/d3@7";
+      const url = "https://duolingo.checksch.de/duo_user_info.json";
 
       fetch(url)
         .then((res) => res.json())
         .then((out) => {
           const langInfo = out.lang_data;
 
-          langInfoPrepped = [];
+          let langInfoPrepped = [];
           Object.entries(langInfo).forEach((el) => {
-            item = {};
+            let item = {};
             item["name"] = el[1].learningLanguage;
             item["count"] = el[1].xp;