From a80dcf13d35523f8001f38da507f45827f808617 Mon Sep 17 00:00:00 2001
From: Mateusz Paprocki <mattpap@gmail.com>
Date: Fri, 15 Apr 2022 14:30:32 +0200
Subject: [PATCH] Use ESM and import maps in d3 example

---
 pyscriptjs/examples/d3.html | 18 +++++++++++++-----
 1 file changed, 13 insertions(+), 5 deletions(-)

diff --git a/pyscriptjs/examples/d3.html b/pyscriptjs/examples/d3.html
index c5bdc68..fcae36f 100644
--- a/pyscriptjs/examples/d3.html
+++ b/pyscriptjs/examples/d3.html
@@ -3,8 +3,6 @@
     <title>d3: JavaScript & PyScript visualizations side-by-side</title>
     <meta charset="utf-8">
 
-    <script src="https://d3js.org/d3.v7.min.js"></script>
-
     <link rel="stylesheet" href="../build/pyscript.css" />
     <script defer src="../build/pyscript.js"></script>
 
@@ -46,7 +44,17 @@
         </div>
       </div>
 
-<script>
+<script type="importmap">
+{
+  "imports": {
+    "d3": "https://cdn.skypack.dev/d3@7"
+  }
+}
+</script>
+
+<script type="module">
+import * as d3 from "d3"
+
 const fruits = [
   {name: "🍊", count: 21},
   {name: "🍇", count: 13},
@@ -55,7 +63,7 @@ const fruits = [
   {name: "🍐", count: 3},
   {name: "🍋", count: 2},
   {name: "🍎", count: 1},
-  {name: "🍉", count: 1}
+  {name: "🍉", count: 1},
 ]
 
 const fn = (d) => d.count
@@ -101,7 +109,7 @@ for (const d of data) {
 
 <py-script>
 from pyodide import create_proxy, to_js
-from js import d3
+from esm import d3
 
 fruits = [
   dict(name="🍊", count=21),