diff --git a/basic-example/basic-example.js b/basic-example/basic-example.js
new file mode 100644
index 0000000..9462746
--- /dev/null
+++ b/basic-example/basic-example.js
@@ -0,0 +1,64 @@
+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;
+
+        let langInfoPrepped = [];
+        Object.entries(langInfo).forEach((el) => {
+            let item = {};
+            item["name"] = el[1].learningLanguage;
+            item["count"] = el[1].xp;
+
+            // Filter irrelevant items
+            if (item["count"] > 500) {
+                langInfoPrepped.push(item);
+            }
+        });
+
+        const fn = (d) => d.count;
+        const data = d3.pie().value(fn)(langInfoPrepped);
+
+        const arc = d3
+            .arc()
+            .innerRadius(210)
+            .outerRadius(310)
+            .padRadius(300)
+            .padAngle(2 / 300)
+            .cornerRadius(8);
+
+        const js = d3.select("#js");
+        js.select(".loading").remove();
+
+        const svg = js
+            .append("svg")
+            .attr("viewBox", "-320 -320 640 640")
+            .attr("width", "400")
+            .attr("height", "400");
+
+        for (const d of data) {
+            svg.append("path").style("fill", "rebeccapurple").attr("d", arc(d));
+
+            const text = svg
+                .append("text")
+                .style("fill", "white")
+                .attr("transform", `translate(${arc.centroid(d).join(",")})`)
+                .attr("text-anchor", "middle");
+
+            text
+                .append("tspan")
+                .style("font-size", "24")
+                .attr("x", "0")
+                .text(d.data.name);
+
+            text
+                .append("tspan")
+                .style("font-size", "18")
+                .attr("x", "0")
+                .attr("dy", "1.3em")
+                .text(d.value);
+        }
+    })
+    .catch((err) => console.log(err));
\ No newline at end of file
diff --git a/basic-example/javascript.html b/basic-example/javascript.html
index 3ebea11..0206796 100644
--- a/basic-example/javascript.html
+++ b/basic-example/javascript.html
@@ -34,71 +34,6 @@
       }
     </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;
-
-          let langInfoPrepped = [];
-          Object.entries(langInfo).forEach((el) => {
-            let item = {};
-            item["name"] = el[1].learningLanguage;
-            item["count"] = el[1].xp;
-
-            // Filter irrelevant items
-            if (item["count"] > 500) {
-              langInfoPrepped.push(item);
-            }
-          });
-
-          const fn = (d) => d.count;
-          const data = d3.pie().value(fn)(langInfoPrepped);
-
-          const arc = d3
-            .arc()
-            .innerRadius(210)
-            .outerRadius(310)
-            .padRadius(300)
-            .padAngle(2 / 300)
-            .cornerRadius(8);
-
-          const js = d3.select("#js");
-          js.select(".loading").remove();
-
-          const svg = js
-            .append("svg")
-            .attr("viewBox", "-320 -320 640 640")
-            .attr("width", "400")
-            .attr("height", "400");
-
-          for (const d of data) {
-            svg.append("path").style("fill", "rebeccapurple").attr("d", arc(d));
-
-            const text = svg
-              .append("text")
-              .style("fill", "white")
-              .attr("transform", `translate(${arc.centroid(d).join(",")})`)
-              .attr("text-anchor", "middle");
-
-            text
-              .append("tspan")
-              .style("font-size", "24")
-              .attr("x", "0")
-              .text(d.data.name);
-
-            text
-              .append("tspan")
-              .style("font-size", "18")
-              .attr("x", "0")
-              .attr("dy", "1.3em")
-              .text(d.value);
-          }
-        })
-        .catch((err) => console.log(err));
-    </script>
+    <script type="module" src="basic-example.js"></script>
   </body>
 </html>