ESM import of d3 in examples

vasturiano · Dec 13, 2024 · 0fb5e91 · 0fb5e91
1 parent 50afbba
commit 0fb5e91
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 16 deletions.
diff --git a/example/flare/index.html b/example/flare/index.html
@@ -1,6 +1,4 @@
 <head>
-  <script src="//unpkg.com/d3"></script>
-
   <script src="//unpkg.com/sunburst-chart"></script>
   <!--<script src="../../dist/sunburst-chart.js"></script>-->
 
@@ -9,8 +7,11 @@
 <body>
   <div id="chart"></div>
 
-  <script>
-    const color = d3.scaleOrdinal(d3.schemePaired);
+  <script type="module">
+    import { scaleOrdinal } from 'https://esm.sh/d3-scale';
+    import { schemePaired } from 'https://esm.sh/d3-scale-chromatic';
+
+    const color = scaleOrdinal(schemePaired);
 
     fetch('flare.json').then(res => res.json()).then(data => {
       new Sunburst(document.getElementById('chart'))

diff --git a/example/large-data/index.html b/example/large-data/index.html
@@ -1,6 +1,4 @@
 <head>
-  <script src="//unpkg.com/d3"></script>
-
   <script src="//unpkg.com/sunburst-chart"></script>
   <!--<script src="../../dist/sunburst-chart.js"></script>-->
 
@@ -9,7 +7,10 @@
 <body>
   <div id="chart"></div>
 
-  <script>
+  <script type="module">
+    import { scaleOrdinal } from 'https://esm.sh/d3-scale';
+    import { schemePaired } from 'https://esm.sh/d3-scale-chromatic';
+
     const CHILDREN_PROB_DECAY = 0.15; // per level
     const MAX_CHILDREN = 20;
     const MAX_VALUE = 100;
@@ -29,7 +30,7 @@
       }
     }
 
-    const color = d3.scaleOrdinal(d3.schemePaired);
+    const color = scaleOrdinal(schemePaired);
 
     new Sunburst(document.getElementById('chart'))
       .data(genNode())

diff --git a/example/sort-by-size/index.html b/example/sort-by-size/index.html
@@ -1,6 +1,4 @@
 <head>
-  <script src="//unpkg.com/d3"></script>
-
   <script src="//unpkg.com/sunburst-chart"></script>
   <!--<script src="../../dist/sunburst-chart.js"></script>-->
 
@@ -9,7 +7,10 @@
 <body>
   <div id="chart"></div>
 
-  <script>
+  <script type="module">
+    import { scaleOrdinal } from 'https://esm.sh/d3-scale';
+    import { schemePaired } from 'https://esm.sh/d3-scale-chromatic';
+
     const CHILDREN_PROB_DECAY = 0.5; // per level
     const MAX_CHILDREN = 40;
     const MAX_VALUE = 100;
@@ -29,7 +30,7 @@
       }
     }
 
-    const color = d3.scaleOrdinal(d3.schemePaired);
+    const color = scaleOrdinal(schemePaired);
 
     new Sunburst(document.getElementById('chart'))
       .data(genNode())

diff --git a/example/truncate-labels/index.html b/example/truncate-labels/index.html
@@ -1,6 +1,4 @@
 <head>
-  <script src="//unpkg.com/d3"></script>
-
   <script src="//unpkg.com/sunburst-chart"></script>
 <!--  <script src="../../dist/sunburst-chart.js"></script>-->
 
@@ -9,8 +7,11 @@
 <body>
   <div id="chart"></div>
 
-  <script>
-    const color = d3.scaleOrdinal(d3.schemePaired);
+  <script type="module">
+    import { scaleOrdinal } from 'https://esm.sh/d3-scale';
+    import { schemePaired } from 'https://esm.sh/d3-scale-chromatic';
+
+    const color = scaleOrdinal(schemePaired);
 
     fetch('flare.json').then(res => res.json()).then(data => {
       new Sunburst(document.getElementById('chart'))