diff --git a/pyscriptjs/examples/d3.html b/pyscriptjs/examples/d3.html
new file mode 100644
index 0000000..c5bdc68
--- /dev/null
+++ b/pyscriptjs/examples/d3.html
@@ -0,0 +1,161 @@
+<html>
+  <head>
+    <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>
+
+    <style>
+    .loading {
+      display: inline-block;
+      width: 50px;
+      height: 50px;
+      border: 3px solid rgba(255, 255, 255, 0.3);
+      border-radius: 50%;
+      border-top-color: black;
+      animation: spin 1s ease-in-out infinite;
+    }
+
+    @keyframes spin {
+      to {
+        transform: rotate(360deg);
+      }
+    }
+    </style>
+
+    </head>
+    <body>
+      <b>
+        Based on <i><a href="https://observablehq.com/@d3/learn-d3-shapes?collection=@d3/learn-d3>">Learn D3: Shapes</a></i> tutorial.
+      </b>
+      <div style="display: flex; flex-direction: row">
+        <div>
+          <div style="text-align: center">JavaScript version</div>
+          <div id="js" style="width: 400px; height: 400px">
+            <div class="loading"></div>
+          </div>
+        </div>
+        <div>
+          <div style="text-align: center">PyScript version</div>
+          <div id="py" style="width: 400px; height: 400px">
+            <div class="loading"></div>
+          </div>
+        </div>
+      </div>
+
+<script>
+const fruits = [
+  {name: "🍊", count: 21},
+  {name: "🍇", count: 13},
+  {name: "🍏", count: 8},
+  {name: "🍌", count: 5},
+  {name: "🍐", count: 3},
+  {name: "🍋", count: 2},
+  {name: "🍎", count: 1},
+  {name: "🍉", count: 1}
+]
+
+const fn = (d) => d.count
+const data = d3.pie().value(fn)(fruits)
+
+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", "steelblue")
+    .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)
+}
+</script>
+
+<py-script>
+from pyodide import create_proxy, to_js
+from js import d3
+
+fruits = [
+  dict(name="🍊", count=21),
+  dict(name="🍇", count=13),
+  dict(name="🍏", count=8),
+  dict(name="🍌", count=5),
+  dict(name="🍐", count=3),
+  dict(name="🍋", count=2),
+  dict(name="🍎", count=1),
+  dict(name="🍉", count=1),
+]
+
+fn = create_proxy(lambda d, *_: d["count"])
+data = d3.pie().value(fn)(to_js(fruits))
+
+arc = (d3.arc()
+  .innerRadius(210)
+  .outerRadius(310)
+  .padRadius(300)
+  .padAngle(2 / 300)
+  .cornerRadius(8))
+
+py = d3.select("#py")
+py.select(".loading").remove()
+
+svg = (py
+  .append("svg")
+  .attr("viewBox", "-320 -320 640 640")
+  .attr("width", "400")
+  .attr("height", "400"))
+
+for d in data:
+  d_py = d.to_py()
+
+  (svg.append("path")
+    .style("fill", "steelblue")
+    .attr("d", arc(d)))
+
+  text = (svg.append("text")
+    .style("fill", "white")
+    .attr("transform", f"translate({arc.centroid(d).join(',')})")
+    .attr("text-anchor", "middle"))
+
+  (text.append("tspan")
+    .style("font-size", "24")
+    .attr("x", "0")
+    .text(d_py["data"]["name"]))
+
+  (text.append("tspan")
+    .style("font-size", "18")
+    .attr("x", "0")
+    .attr("dy", "1.3em")
+    .text(d_py["value"]))
+</py-script>
+
+</body>
+</html>
diff --git a/pyscriptjs/examples/index.html b/pyscriptjs/examples/index.html
index 986da26..df2c82e 100644
--- a/pyscriptjs/examples/index.html
+++ b/pyscriptjs/examples/index.html
@@ -36,16 +36,19 @@
       WARNING: This examples takes a little longer to load. So be patient :)
     </p>
 
-    
+    <h2 class="text-2xl font-bold text-blue-600"><a href="./d3.html" target=”_blank”>Simple d3 visualization</a></h2>
+    <p>Minimal d3 demo demonstrating how to create a visualization</p>
+
+
     <h2 class="text-2xl font-bold text-blue-600"><a href="./repl.html" target=”_blank”>REPL</a></h2>
     <p>A Python REPL (Read Eval Print Loop). </p>
-    
+
     <h2 class="text-2xl font-bold text-blue-600"><a href="./repl2.html" target=”_blank”>REPL2</a></h2>
     <p>A Python REPL (Read Eval Print Loop) with slightly better formatting.</p>
 
     <h2 class="text-2xl font-bold text-blue-600"><a href="./simple_script.html" target=”_blank”>Simple script</a></h2>
     <p>A static demo of the <code>&lt;py-script&gt;</code> tag</p>
-  
+
     <h2 class="text-2xl font-bold text-blue-600"><a href="./simple_script2.html" target=”_blank”>Simple script 2</a></h2>
     <p>A dynamic demo of the <code>&lt;py-script&gt;</code> tag</p>
 
