diff --git a/example/airline-routes/highlight-links.html b/example/airline-routes/highlight-links.html
index 3e9d13d..7718dcb 100644
--- a/example/airline-routes/highlight-links.html
+++ b/example/airline-routes/highlight-links.html
@@ -1,22 +1,25 @@
 <head>
   <style> body { margin: 0; } </style>
 
-  <script src="//unpkg.com/react@18/umd/react.production.min.js"></script>
-  <script src="//unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
-  <script src="//unpkg.com/@babel/standalone"></script>
+  <script type="importmap">{ "imports": {
+    "react": "https://esm.sh/react",
+    "react-dom": "https://esm.sh/react-dom/client"
+  }}</script>
 
-  <script src="//unpkg.com/d3-dsv"></script>
-  <script src="//unpkg.com/index-array-by"></script>
-
-  <script src="//unpkg.com/react-globe.gl"></script>
-  <!--<script src="../../dist/react-globe.gl.js"></script>-->
+<!--  <script type="module">import * as React from 'react'; window.React = React;</script>-->
+<!--  <script src="../../dist/react-globe.gl.js" defer></script>-->
 </head>
 
 <body>
 <div id="globeViz"></div>
 
-<script type="text/jsx">
-  const { useState, useEffect, useRef } = React;
+<script src="//unpkg.com/@babel/standalone"></script>
+<script type="text/jsx" data-type="module">
+  import Globe from 'https://esm.sh/react-globe.gl?external=react';
+  import React, { useState, useEffect, useRef } from 'react';
+  import { createRoot } from 'react-dom';
+  import { csvParseRows } from 'https://esm.sh/d3-dsv';
+  import indexBy from 'https://esm.sh/index-array-by';
 
   const COUNTRY = 'Portugal';
   const MAP_CENTER = { lat: 37.6, lng: -16.6, altitude: 0.4 };
@@ -35,9 +38,9 @@
       // load data
       Promise.all([
         fetch('https://raw.githubusercontent.com/jpatokal/openflights/master/data/airports.dat').then(res => res.text())
-          .then(d => d3.csvParseRows(d, airportParse)),
+          .then(d => csvParseRows(d, airportParse)),
         fetch('https://raw.githubusercontent.com/jpatokal/openflights/master/data/routes.dat').then(res => res.text())
-          .then(d => d3.csvParseRows(d, routeParse))
+          .then(d => csvParseRows(d, routeParse))
       ]).then(([airports, routes]) => {
 
         const filteredAirports = airports.filter(d => d.country === COUNTRY);
@@ -87,7 +90,7 @@
     />;
   };
 
-  ReactDOM.createRoot(document.getElementById('globeViz'))
+  createRoot(document.getElementById('globeViz'))
     .render(<World />);
 </script>
 </body>
\ No newline at end of file
diff --git a/example/airline-routes/us-international-outbound.html b/example/airline-routes/us-international-outbound.html
index bc91704..1d9b251 100644
--- a/example/airline-routes/us-international-outbound.html
+++ b/example/airline-routes/us-international-outbound.html
@@ -1,22 +1,25 @@
 <head>
   <style> body { margin: 0; } </style>
 
-  <script src="//unpkg.com/react@18/umd/react.production.min.js"></script>
-  <script src="//unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
-  <script src="//unpkg.com/@babel/standalone"></script>
+  <script type="importmap">{ "imports": {
+    "react": "https://esm.sh/react",
+    "react-dom": "https://esm.sh/react-dom/client"
+  }}</script>
 
-  <script src="//unpkg.com/d3-dsv"></script>
-  <script src="//unpkg.com/index-array-by"></script>
-
-  <script src="//unpkg.com/react-globe.gl"></script>
-  <!--<script src="../../dist/react-globe.gl.js"></script>-->
+<!--  <script type="module">import * as React from 'react'; window.React = React;</script>-->
+<!--  <script src="../../dist/react-globe.gl.js" defer></script>-->
 </head>
 
 <body>
 <div id="globeViz"></div>
 
-<script type="text/jsx">
-  const { useState, useEffect, useRef } = React;
+<script src="//unpkg.com/@babel/standalone"></script>
+<script type="text/jsx" data-type="module">
+  import Globe from 'https://esm.sh/react-globe.gl?external=react';
+  import React, { useState, useEffect, useRef } from 'react';
+  import { createRoot } from 'react-dom';
+  import { csvParseRows } from 'https://esm.sh/d3-dsv';
+  import indexBy from 'https://esm.sh/index-array-by';
 
   const COUNTRY = 'United States';
   const OPACITY = 0.22;
@@ -33,9 +36,9 @@
       // load data
       Promise.all([
         fetch('https://raw.githubusercontent.com/jpatokal/openflights/master/data/airports.dat').then(res => res.text())
-          .then(d => d3.csvParseRows(d, airportParse)),
+          .then(d => csvParseRows(d, airportParse)),
         fetch('https://raw.githubusercontent.com/jpatokal/openflights/master/data/routes.dat').then(res => res.text())
-          .then(d => d3.csvParseRows(d, routeParse))
+          .then(d => csvParseRows(d, routeParse))
       ]).then(([airports, routes]) => {
 
         const byIata = indexBy(airports, 'iata', false);
@@ -84,7 +87,7 @@
     />;
   };
 
-  ReactDOM.createRoot(document.getElementById('globeViz'))
+  createRoot(document.getElementById('globeViz'))
     .render(<World />);
 </script>
 </body>
\ No newline at end of file
diff --git a/example/basic/index.html b/example/basic/index.html
index 4bd2460..6c95820 100644
--- a/example/basic/index.html
+++ b/example/basic/index.html
@@ -1,18 +1,24 @@
 <head>
   <style> body { margin: 0; } </style>
 
-  <script src="//unpkg.com/react@18/umd/react.production.min.js"></script>
-  <script src="//unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
-  <script src="//unpkg.com/@babel/standalone"></script>
+  <script type="importmap">{ "imports": {
+    "react": "https://esm.sh/react",
+    "react-dom": "https://esm.sh/react-dom/client"
+  }}</script>
 
-  <script src="//unpkg.com/react-globe.gl"></script>
-  <!--<script src="../../dist/react-globe.gl.js"></script>-->
+<!--  <script type="module">import * as React from 'react'; window.React = React;</script>-->
+<!--  <script src="../../dist/react-globe.gl.js" defer></script>-->
 </head>
 
 <body>
 <div id="globeViz"></div>
 
-<script type="text/jsx">
+<script src="//unpkg.com/@babel/standalone"></script>
+<script type="text/jsx" data-type="module">
+  import Globe from 'https://esm.sh/react-globe.gl?external=react';
+  import React from 'react';
+  import { createRoot } from 'react-dom';
+
   // Gen random data
   const N = 300;
   const gData = [...Array(N).keys()].map(() => ({
@@ -22,7 +28,7 @@
     color: ['red', 'white', 'blue', 'green'][Math.round(Math.random() * 3)]
   }));
 
-  ReactDOM.createRoot(document.getElementById('globeViz')).render(
+  createRoot(document.getElementById('globeViz')).render(
     <Globe
       globeImageUrl="//unpkg.com/three-globe/example/img/earth-night.jpg"
       pointsData={gData}
diff --git a/example/choropleth-countries/index.html b/example/choropleth-countries/index.html
index 0835c1e..39aaafe 100644
--- a/example/choropleth-countries/index.html
+++ b/example/choropleth-countries/index.html
@@ -1,21 +1,25 @@
 <head>
   <style> body { margin: 0; } </style>
 
-  <script src="//unpkg.com/react@18/umd/react.production.min.js"></script>
-  <script src="//unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
-  <script src="//unpkg.com/@babel/standalone"></script>
+  <script type="importmap">{ "imports": {
+    "react": "https://esm.sh/react",
+    "react-dom": "https://esm.sh/react-dom/client"
+  }}</script>
 
-  <script src="//unpkg.com/d3"></script>
-
-  <script src="//unpkg.com/react-globe.gl"></script>
-  <!--<script src="../../dist/react-globe.gl.js"></script>-->
+<!--  <script type="module">import * as React from 'react'; window.React = React;</script>-->
+<!--  <script src="../../dist/react-globe.gl.js" defer></script>-->
 </head>
 
 <body>
 <div id="globeViz"></div>
 
-<script type="text/jsx">
-  const { useState, useEffect, useMemo } = React;
+<script src="//unpkg.com/@babel/standalone"></script>
+<script type="text/jsx" data-type="module">
+  import Globe from 'https://esm.sh/react-globe.gl?external=react';
+  import React, { useState, useEffect, useMemo } from 'react';
+  import { createRoot } from 'react-dom';
+  import { scaleSequentialSqrt } from 'https://esm.sh/d3-scale';
+  import { interpolateYlOrRd } from 'https://esm.sh/d3-scale-chromatic';
 
   const World = () => {
     const [countries, setCountries] = useState({ features: []});
@@ -26,7 +30,7 @@
       fetch('../datasets/ne_110m_admin_0_countries.geojson').then(res => res.json()).then(setCountries);
     }, []);
 
-    const colorScale = d3.scaleSequentialSqrt(d3.interpolateYlOrRd);
+    const colorScale = scaleSequentialSqrt(interpolateYlOrRd);
 
     // GDP per capita (avoiding countries with small pop)
     const getVal = feat => feat.properties.GDP_MD_EST / Math.max(1e5, feat.properties.POP_EST);
@@ -57,7 +61,7 @@
     />;
   };
 
-  ReactDOM.createRoot(document.getElementById('globeViz'))
+  createRoot(document.getElementById('globeViz'))
     .render(<World />);
 </script>
 </body>
\ No newline at end of file
diff --git a/example/clouds/index.html b/example/clouds/index.html
index 791efab..a00e343 100644
--- a/example/clouds/index.html
+++ b/example/clouds/index.html
@@ -1,21 +1,24 @@
 <head>
   <style> body { margin: 0; } </style>
 
-  <script src="//unpkg.com/react@18/umd/react.production.min.js"></script>
-  <script src="//unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
-  <script src="//unpkg.com/@babel/standalone"></script>
+  <script type="importmap">{ "imports": {
+    "react": "https://esm.sh/react",
+    "react-dom": "https://esm.sh/react-dom/client"
+  }}</script>
 
-  <script src="//unpkg.com/react-globe.gl"></script>
-  <!--<script src="../../dist/react-globe.gl.js"></script>-->
+<!--  <script type="module">import * as React from 'react'; window.React = React;</script>-->
+<!--  <script src="../../dist/react-globe.gl.js" defer></script>-->
 </head>
 
 <body>
 <div id="globeViz"></div>
 
+<script src="//unpkg.com/@babel/standalone"></script>
 <script type="text/jsx" data-type="module">
-  import * as THREE from '//unpkg.com/three/build/three.module.js';
-
-  const { useEffect, useRef } = React;
+  import Globe from 'https://esm.sh/react-globe.gl?external=react';
+  import React, { useEffect, useRef } from 'react';
+  import { createRoot } from 'react-dom';
+  import * as THREE from 'https://esm.sh/three';
 
   const World = () => {
     const globeEl = useRef();
@@ -54,7 +57,7 @@
     />;
   };
 
-  ReactDOM.createRoot(document.getElementById('globeViz'))
+  createRoot(document.getElementById('globeViz'))
     .render(<World />);
 </script>
 </body>
\ No newline at end of file
diff --git a/example/countries-population/index.html b/example/countries-population/index.html
index 592117d..04cab4c 100644
--- a/example/countries-population/index.html
+++ b/example/countries-population/index.html
@@ -1,19 +1,23 @@
 <head>
   <style> body { margin: 0; } </style>
 
-  <script src="//unpkg.com/react@18/umd/react.production.min.js"></script>
-  <script src="//unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
-  <script src="//unpkg.com/@babel/standalone"></script>
+  <script type="importmap">{ "imports": {
+    "react": "https://esm.sh/react",
+    "react-dom": "https://esm.sh/react-dom/client"
+  }}</script>
 
-  <script src="//unpkg.com/react-globe.gl"></script>
-  <!--<script src="../../dist/react-globe.gl.js"></script>-->
+<!--  <script type="module">import * as React from 'react'; window.React = React;</script>-->
+<!--  <script src="../../dist/react-globe.gl.js" defer></script>-->
 </head>
 
 <body>
 <div id="globeViz"></div>
 
-<script type="text/jsx">
-  const { useState, useEffect, useRef } = React;
+<script src="//unpkg.com/@babel/standalone"></script>
+<script type="text/jsx" data-type="module">
+  import Globe from 'https://esm.sh/react-globe.gl?external=react';
+  import React, { useState, useEffect, useRef } from 'react';
+  import { createRoot } from 'react-dom';
 
   const World = () => {
     const globeEl = useRef();
@@ -58,7 +62,7 @@
     />;
   };
 
-  ReactDOM.createRoot(document.getElementById('globeViz'))
+  createRoot(document.getElementById('globeViz'))
     .render(<World />);
 </script>
 </body>
\ No newline at end of file
diff --git a/example/custom-globe-styling/index.html b/example/custom-globe-styling/index.html
index 8f14c17..1a5be7c 100644
--- a/example/custom-globe-styling/index.html
+++ b/example/custom-globe-styling/index.html
@@ -1,21 +1,24 @@
 <head>
   <style> body { margin: 0; } </style>
 
-  <script src="//unpkg.com/react@18/umd/react.production.min.js"></script>
-  <script src="//unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
-  <script src="//unpkg.com/@babel/standalone"></script>
+  <script type="importmap">{ "imports": {
+    "react": "https://esm.sh/react",
+    "react-dom": "https://esm.sh/react-dom/client"
+  }}</script>
 
-  <script src="//unpkg.com/react-globe.gl"></script>
-<!--  <script src="../../dist/react-globe.gl.js"></script>-->
+<!--  <script type="module">import * as React from 'react'; window.React = React;</script>-->
+<!--  <script src="../../dist/react-globe.gl.js" defer></script>-->
 </head>
 
 <body>
   <div id="globeViz"></div>
 
+  <script src="//unpkg.com/@babel/standalone"></script>
   <script type="text/jsx" data-type="module">
-    import * as THREE from '//unpkg.com/three/build/three.module.js';
-
-    const { useEffect, useRef } = React;
+    import Globe from 'https://esm.sh/react-globe.gl?external=react';
+    import React, { useEffect, useRef } from 'react';
+    import { createRoot } from 'react-dom';
+    import * as THREE from 'https://esm.sh/three';
 
     // custom globe material
     const globeMaterial = new THREE.MeshPhongMaterial();
@@ -43,7 +46,7 @@
       />;
     };
 
-    ReactDOM.createRoot(document.getElementById('globeViz')).render(
+    createRoot(document.getElementById('globeViz')).render(
       <World />,
       document.getElementById('globeViz')
     );
diff --git a/example/custom-layer/index.html b/example/custom-layer/index.html
index 62bb5b3..33ec6a0 100644
--- a/example/custom-layer/index.html
+++ b/example/custom-layer/index.html
@@ -1,21 +1,24 @@
 <head>
   <style> body { margin: 0; } </style>
 
-  <script src="//unpkg.com/react@18/umd/react.production.min.js"></script>
-  <script src="//unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
-  <script src="//unpkg.com/@babel/standalone"></script>
+  <script type="importmap">{ "imports": {
+    "react": "https://esm.sh/react",
+    "react-dom": "https://esm.sh/react-dom/client"
+  }}</script>
 
-  <script src="//unpkg.com/react-globe.gl"></script>
-  <!--<script src="../../dist/react-globe.gl.js"></script>-->
+<!--  <script type="module">import * as React from 'react'; window.React = React;</script>-->
+<!--  <script src="../../dist/react-globe.gl.js" defer></script>-->
 </head>
 
 <body>
 <div id="globeViz"></div>
 
+<script src="//unpkg.com/@babel/standalone"></script>
 <script type="text/jsx" data-type="module">
-  import * as THREE from '//unpkg.com/three/build/three.module.js';
-
-  const { useState, useEffect, useRef } = React;
+  import Globe from 'https://esm.sh/react-globe.gl?external=react';
+  import React, { useState, useEffect, useRef } from 'react';
+  import { createRoot } from 'react-dom';
+  import * as THREE from 'https://esm.sh/three';
 
   // Gen random data
   const N = 300;
@@ -59,7 +62,7 @@
     />;
   };
 
-  ReactDOM.createRoot(document.getElementById('globeViz'))
+  createRoot(document.getElementById('globeViz'))
     .render(<World />);
 </script>
 </body>
\ No newline at end of file
diff --git a/example/earth-shield/index.html b/example/earth-shield/index.html
index 12ce531..550a1ba 100644
--- a/example/earth-shield/index.html
+++ b/example/earth-shield/index.html
@@ -1,21 +1,27 @@
 <head>
   <style> body { margin: 0; } </style>
 
-  <script src="//unpkg.com/react@18/umd/react.production.min.js"></script>
-  <script src="//unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
-  <script src="//unpkg.com/@babel/standalone"></script>
+  <script type="importmap">{ "imports": {
+    "react": "https://esm.sh/react",
+    "react-dom": "https://esm.sh/react-dom/client"
+  }}</script>
 
-  <script src="//unpkg.com/react-globe.gl"></script>
-  <!--<script src="../../dist/react-globe.gl.js"></script>-->
+<!--  <script type="module">import * as React from 'react'; window.React = React;</script>-->
+<!--  <script src="../../dist/react-globe.gl.js" defer></script>-->
 </head>
 
 <body>
 <div id="globeViz"></div>
 
-<script type="text/jsx">
+<script src="//unpkg.com/@babel/standalone"></script>
+<script type="text/jsx" data-type="module">
+  import Globe from 'https://esm.sh/react-globe.gl?external=react';
+  import React from 'react';
+  import { createRoot } from 'react-dom';
+
   const shieldRing = { lat: 90, lng: 0 };
 
-  ReactDOM.createRoot(document.getElementById('globeViz')).render(
+  createRoot(document.getElementById('globeViz')).render(
     <Globe
       globeImageUrl="//unpkg.com/three-globe/example/img/earth-night.jpg"
       ringsData={[shieldRing]}
diff --git a/example/earthquakes/index.html b/example/earthquakes/index.html
index 4f045e5..4943a3b 100644
--- a/example/earthquakes/index.html
+++ b/example/earthquakes/index.html
@@ -1,21 +1,24 @@
 <head>
   <style> body { margin: 0; } </style>
 
-  <script src="//unpkg.com/react@18/umd/react.production.min.js"></script>
-  <script src="//unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
-  <script src="//unpkg.com/@babel/standalone"></script>
+  <script type="importmap">{ "imports": {
+    "react": "https://esm.sh/react",
+    "react-dom": "https://esm.sh/react-dom/client"
+  }}</script>
 
-  <script src="//unpkg.com/d3"></script>
-
-  <script src="//unpkg.com/react-globe.gl"></script>
-  <!--<script src="../../dist/react-globe.gl.js"></script>-->
+<!--  <script type="module">import * as React from 'react'; window.React = React;</script>-->
+<!--  <script src="../../dist/react-globe.gl.js" defer></script>-->
 </head>
 
 <body>
 <div id="globeViz"></div>
 
-<script type="text/jsx">
-  const { useState, useEffect } = React;
+<script src="//unpkg.com/@babel/standalone"></script>
+<script type="text/jsx" data-type="module">
+  import Globe from 'https://esm.sh/react-globe.gl?external=react';
+  import React, { useState, useEffect } from 'react';
+  import { createRoot } from 'react-dom';
+  import { scaleLinear } from 'https://esm.sh/d3-scale';
 
   const World = () => {
     const [equakes, setEquakes] = useState([]);
@@ -26,7 +29,7 @@
         .then(({ features }) => setEquakes(features));
     }, []);
 
-    const weightColor = d3.scaleLinear()
+    const weightColor = scaleLinear()
       .domain([0, 30])
       .range(['lightblue', 'darkred'])
       .clamp(true);
@@ -49,7 +52,7 @@
     />;
   };
 
-  ReactDOM.createRoot(document.getElementById('globeViz'))
+  createRoot(document.getElementById('globeViz'))
     .render(<World />);
 </script>
 </body>
\ No newline at end of file
diff --git a/example/emit-arcs-on-click/index.html b/example/emit-arcs-on-click/index.html
index 8b6ef6e..62d826e 100644
--- a/example/emit-arcs-on-click/index.html
+++ b/example/emit-arcs-on-click/index.html
@@ -1,26 +1,30 @@
 <head>
   <style> body { margin: 0; } </style>
 
-  <script src="//unpkg.com/react@18/umd/react.production.min.js"></script>
-  <script src="//unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
-  <script src="//unpkg.com/@babel/standalone"></script>
+  <script type="importmap">{ "imports": {
+    "react": "https://esm.sh/react",
+    "react-dom": "https://esm.sh/react-dom/client"
+  }}</script>
 
-  <script src="//unpkg.com/react-globe.gl"></script>
-<!--  <script src="../../dist/react-globe.gl.js"></script>-->
+<!--  <script type="module">import * as React from 'react'; window.React = React;</script>-->
+<!--  <script src="../../dist/react-globe.gl.js" defer></script>-->
 </head>
 
 <body>
 <div id="globeViz"></div>
 
-<script type="text/jsx">
+<script src="//unpkg.com/@babel/standalone"></script>
+<script type="text/jsx" data-type="module">
+  import Globe from 'https://esm.sh/react-globe.gl?external=react';
+  import React, { useState, useRef, useCallback } from 'react';
+  import { createRoot } from 'react-dom';
+
   const ARC_REL_LEN = 0.4; // relative to whole arc
   const FLIGHT_TIME = 1000;
   const NUM_RINGS = 3;
   const RINGS_MAX_R = 5; // deg
   const RING_PROPAGATION_SPEED = 5; // deg/sec
 
-  const { useState, useEffect, useRef, useCallback } = React;
-
   const World = () => {
     const [arcsData, setArcsData] = useState([]);
     const [ringsData, setRingsData] = useState([]);
@@ -66,7 +70,7 @@
     />;
   };
 
-  ReactDOM.createRoot(document.getElementById('globeViz'))
+  createRoot(document.getElementById('globeViz'))
     .render(<World />);
 </script>
 </body>
\ No newline at end of file
diff --git a/example/heatmap/index.html b/example/heatmap/index.html
index d061c67..3efd45a 100644
--- a/example/heatmap/index.html
+++ b/example/heatmap/index.html
@@ -1,18 +1,24 @@
 <head>
   <style> body { margin: 0; } </style>
 
-  <script src="//unpkg.com/react@18/umd/react.production.min.js"></script>
-  <script src="//unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
-  <script src="//unpkg.com/@babel/standalone"></script>
+  <script type="importmap">{ "imports": {
+    "react": "https://esm.sh/react",
+    "react-dom": "https://esm.sh/react-dom/client"
+  }}</script>
 
-  <script src="//unpkg.com/react-globe.gl"></script>
-  <!--<script src="../../dist/react-globe.gl.js"></script>-->
+<!--  <script type="module">import * as React from 'react'; window.React = React;</script>-->
+<!--  <script src="../../dist/react-globe.gl.js" defer></script>-->
 </head>
 
 <body>
 <div id="globeViz"></div>
 
-<script type="text/jsx">
+<script src="//unpkg.com/@babel/standalone"></script>
+<script type="text/jsx" data-type="module">
+  import Globe from 'https://esm.sh/react-globe.gl?external=react';
+  import React from 'react';
+  import { createRoot } from 'react-dom';
+
   // Gen random data
   const N = 900;
   const gData = [...Array(N).keys()].map(() => ({
@@ -21,7 +27,7 @@
     weight: Math.random()
   }));
 
-  ReactDOM.createRoot(document.getElementById('globeViz')).render(
+  createRoot(document.getElementById('globeViz')).render(
     <Globe
       globeImageUrl="//unpkg.com/three-globe/example/img/earth-dark.jpg"
       heatmapsData={[gData]}
diff --git a/example/hexed-polygons/index.html b/example/hexed-polygons/index.html
index b370523..21fd8ef 100644
--- a/example/hexed-polygons/index.html
+++ b/example/hexed-polygons/index.html
@@ -1,19 +1,23 @@
 <head>
   <style> body { margin: 0; } </style>
 
-  <script src="//unpkg.com/react@18/umd/react.production.min.js"></script>
-  <script src="//unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
-  <script src="//unpkg.com/@babel/standalone"></script>
+  <script type="importmap">{ "imports": {
+    "react": "https://esm.sh/react",
+    "react-dom": "https://esm.sh/react-dom/client"
+  }}</script>
 
-  <script src="//unpkg.com/react-globe.gl"></script>
-  <!--<script src="../../dist/react-globe.gl.js"></script>-->
+<!--  <script type="module">import * as React from 'react'; window.React = React;</script>-->
+<!--  <script src="../../dist/react-globe.gl.js" defer></script>-->
 </head>
 
 <body>
 <div id="globeViz"></div>
 
-<script type="text/jsx">
-  const { useState, useEffect } = React;
+<script src="//unpkg.com/@babel/standalone"></script>
+<script type="text/jsx" data-type="module">
+  import Globe from 'https://esm.sh/react-globe.gl?external=react';
+  import React, { useState, useEffect } from 'react';
+  import { createRoot } from 'react-dom';
 
   const World = () => {
     const [countries, setCountries] = useState({ features: []});
@@ -38,7 +42,7 @@
     />;
   };
 
-  ReactDOM.createRoot(document.getElementById('globeViz'))
+  createRoot(document.getElementById('globeViz'))
     .render(<World />);
 </script>
 </body>
\ No newline at end of file
diff --git a/example/hollow-globe/index.html b/example/hollow-globe/index.html
index a406b74..9743c17 100644
--- a/example/hollow-globe/index.html
+++ b/example/hollow-globe/index.html
@@ -1,25 +1,27 @@
 <head>
   <style> body { margin: 0; } </style>
 
-  <script src="//unpkg.com/react@18/umd/react.production.min.js"></script>
-  <script src="//unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
-  <script src="//unpkg.com/@babel/standalone"></script>
+  <script type="importmap">{ "imports": {
+    "react": "https://esm.sh/react",
+    "react-dom": "https://esm.sh/react-dom/client"
+  }}</script>
 
-  <script src="//unpkg.com/topojson-client"></script>
-
-  <script src="//unpkg.com/react-globe.gl"></script>
-  <!--<script src="../../dist/react-globe.gl.js"></script>-->
+<!--  <script type="module">import * as React from 'react'; window.React = React;</script>-->
+<!--  <script src="../../dist/react-globe.gl.js" defer></script>-->
 </head>
 
 <body>
 <div id="globeViz"></div>
 
+<script src="//unpkg.com/@babel/standalone"></script>
 <script type="text/jsx" data-type="module">
-  import * as THREE from '//unpkg.com/three/build/three.module.js';
-
-  const { useState, useEffect } = React;
+  import Globe from 'https://esm.sh/react-globe.gl?external=react';
+  import React, { useState, useEffect } from 'react';
+  import { createRoot } from 'react-dom';
+  import { MeshLambertMaterial, DoubleSide } from 'https://esm.sh/three';
+  import * as topojson from 'https://esm.sh/topojson-client';
 
-  const polygonsMaterial = new THREE.MeshLambertMaterial({ color: 'darkslategrey', side: THREE.DoubleSide });
+  const polygonsMaterial = new MeshLambertMaterial({ color: 'darkslategrey', side: DoubleSide });
 
   const World = () => {
     const [landPolygons, setLandPolygons] = useState([]);
@@ -42,7 +44,7 @@
     />;
   };
 
-  ReactDOM.createRoot(document.getElementById('globeViz'))
+  createRoot(document.getElementById('globeViz'))
     .render(<World />);
 </script>
 </body>
\ No newline at end of file
diff --git a/example/html-markers/index.html b/example/html-markers/index.html
index 16e8d2e..28567fd 100644
--- a/example/html-markers/index.html
+++ b/example/html-markers/index.html
@@ -1,18 +1,24 @@
 <head>
   <style> body { margin: 0; } </style>
 
-  <script src="//unpkg.com/react@18/umd/react.production.min.js"></script>
-  <script src="//unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
-  <script src="//unpkg.com/@babel/standalone"></script>
+  <script type="importmap">{ "imports": {
+    "react": "https://esm.sh/react",
+    "react-dom": "https://esm.sh/react-dom/client"
+  }}</script>
 
-  <script src="//unpkg.com/react-globe.gl"></script>
-<!--  <script src="../../dist/react-globe.gl.js"></script>-->
+<!--  <script type="module">import * as React from 'react'; window.React = React;</script>-->
+<!--  <script src="../../dist/react-globe.gl.js" defer></script>-->
 </head>
 
 <body>
 <div id="globeViz"></div>
 
-<script type="text/jsx">
+<script src="//unpkg.com/@babel/standalone"></script>
+<script type="text/jsx" data-type="module">
+  import Globe from 'https://esm.sh/react-globe.gl?external=react';
+  import React from 'react';
+  import { createRoot } from 'react-dom';
+
   const markerSvg = `<svg viewBox="-4 0 36 36">
     <path fill="currentColor" d="M14,0 C21.732,0 28,5.641 28,12.6 C28,23.963 14,36 14,36 C14,36 0,24.064 0,12.6 C0,5.641 6.268,0 14,0 Z"></path>
     <circle fill="black" cx="14" cy="14" r="7"></circle>
@@ -27,7 +33,7 @@
     color: ['red', 'white', 'blue', 'green'][Math.round(Math.random() * 3)]
   }));
 
-  ReactDOM.createRoot(document.getElementById('globeViz')).render(
+  createRoot(document.getElementById('globeViz')).render(
     <Globe
       globeImageUrl="//unpkg.com/three-globe/example/img/earth-dark.jpg"
       htmlElementsData={gData}
diff --git a/example/moon-landing-sites/index.html b/example/moon-landing-sites/index.html
index b60037a..c9a2552 100644
--- a/example/moon-landing-sites/index.html
+++ b/example/moon-landing-sites/index.html
@@ -1,24 +1,26 @@
 <head>
   <style> body { margin: 0; } </style>
 
-  <script src="//unpkg.com/react@18/umd/react.production.min.js"></script>
-  <script src="//unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
-  <script src="//unpkg.com/@babel/standalone"></script>
+  <script type="importmap">{ "imports": {
+    "react": "https://esm.sh/react",
+    "react-dom": "https://esm.sh/react-dom/client"
+  }}</script>
 
-  <script src="//unpkg.com/d3-array"></script>
-  <script src="//unpkg.com/d3-scale"></script>
-
-  <script src="//unpkg.com/react-globe.gl"></script>
-  <!--<script src="../../dist/react-globe.gl.js"></script>-->
+<!--  <script type="module">import * as React from 'react'; window.React = React;</script>-->
+<!--  <script src="../../dist/react-globe.gl.js" defer></script>-->
 </head>
 
 <body>
 <div id="globeViz"></div>
 
-<script type="text/jsx">
-  const { useState, useEffect } = React;
+<script src="//unpkg.com/@babel/standalone"></script>
+<script type="text/jsx" data-type="module">
+  import Globe from 'https://esm.sh/react-globe.gl?external=react';
+  import React, { useState, useEffect } from 'react';
+  import { createRoot } from 'react-dom';
+  import { scaleOrdinal } from 'https://esm.sh/d3-scale';
 
-  const colorScale = d3.scaleOrdinal(['orangered', 'mediumblue', 'darkgreen', 'yellow']);
+  const colorScale = scaleOrdinal(['orangered', 'mediumblue', 'darkgreen', 'yellow']);
 
   const labelsTopOrientation = new Set(['Apollo 12', 'Luna 2', 'Luna 20', 'Luna 21', 'Luna 24', 'LCROSS Probe']); // avoid label collisions
 
@@ -34,7 +36,7 @@
     return <Globe
       globeImageUrl="./lunar_surface.jpg"
       bumpImageUrl="./lunar_bumpmap.jpg"
-      // backgroundImageUrl="//unpkg.com/three-globe/example/img/night-sky.png"
+      backgroundImageUrl="//unpkg.com/three-globe/example/img/night-sky.png"
       showGraticules={true}
       labelsData={landingSites}
       labelText="label"
@@ -51,7 +53,7 @@
     />;
   };
 
-  ReactDOM.createRoot(document.getElementById('globeViz')).render(
+  createRoot(document.getElementById('globeViz')).render(
     <Moon />
   );
 </script>
diff --git a/example/population-heatmap/index.html b/example/population-heatmap/index.html
index a907907..745146f 100644
--- a/example/population-heatmap/index.html
+++ b/example/population-heatmap/index.html
@@ -1,21 +1,24 @@
 <head>
   <style> body { margin: 0; } </style>
 
-  <script src="//unpkg.com/react@18/umd/react.production.min.js"></script>
-  <script src="//unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
-  <script src="//unpkg.com/@babel/standalone"></script>
+  <script type="importmap">{ "imports": {
+    "react": "https://esm.sh/react",
+    "react-dom": "https://esm.sh/react-dom/client"
+  }}</script>
 
-  <script src="//unpkg.com/d3-dsv"></script>
-
-  <script src="//unpkg.com/react-globe.gl"></script>
-<!--  <script src="../../dist/react-globe.gl.js"></script>-->
+<!--  <script type="module">import * as React from 'react'; window.React = React;</script>-->
+<!--  <script src="../../dist/react-globe.gl.js" defer></script>-->
 </head>
 
 <body>
 <div id="globeViz"></div>
 
-<script type="text/jsx">
-  const { useState, useEffect } = React;
+<script src="//unpkg.com/@babel/standalone"></script>
+<script type="text/jsx" data-type="module">
+  import Globe from 'https://esm.sh/react-globe.gl?external=react';
+  import React, { useState, useEffect } from 'react';
+  import { createRoot } from 'react-dom';
+  import { csvParse } from 'https://esm.sh/d3-dsv';
 
   const World = () => {
     const [popData, setPopData] = useState([]);
@@ -23,7 +26,7 @@
     useEffect(() => {
       // load data
       fetch('../datasets/world_population.csv').then(res => res.text())
-        .then(csv => d3.csvParse(csv, ({ lat, lng, pop }) => ({ lat: +lat, lng: +lng, pop: +pop })))
+        .then(csv => csvParse(csv, ({ lat, lng, pop }) => ({ lat: +lat, lng: +lng, pop: +pop })))
         .then(setPopData);
     }, []);
 
@@ -39,7 +42,7 @@
     />;
   };
 
-  ReactDOM.createRoot(document.getElementById('globeViz'))
+  createRoot(document.getElementById('globeViz'))
     .render(<World />);
 </script>
 </body>
\ No newline at end of file
diff --git a/example/random-arcs/index.html b/example/random-arcs/index.html
index 9d01646..50052a2 100644
--- a/example/random-arcs/index.html
+++ b/example/random-arcs/index.html
@@ -1,18 +1,24 @@
 <head>
   <style> body { margin: 0; } </style>
 
-  <script src="//unpkg.com/react@18/umd/react.production.min.js"></script>
-  <script src="//unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
-  <script src="//unpkg.com/@babel/standalone"></script>
+  <script type="importmap">{ "imports": {
+    "react": "https://esm.sh/react",
+    "react-dom": "https://esm.sh/react-dom/client"
+  }}</script>
 
-  <script src="//unpkg.com/react-globe.gl"></script>
-  <!--<script src="../../dist/react-globe.gl.js"></script>-->
+<!--  <script type="module">import * as React from 'react'; window.React = React;</script>-->
+<!--  <script src="../../dist/react-globe.gl.js" defer></script>-->
 </head>
 
 <body>
 <div id="globeViz"></div>
 
-<script type="text/jsx">
+<script src="//unpkg.com/@babel/standalone"></script>
+<script type="text/jsx" data-type="module">
+  import Globe from 'https://esm.sh/react-globe.gl?external=react';
+  import React from 'react';
+  import { createRoot } from 'react-dom';
+
   // Gen random data
   const N = 20;
   const arcsData = [...Array(N).keys()].map(() => ({
@@ -23,7 +29,7 @@
     color: [['red', 'white', 'blue', 'green'][Math.round(Math.random() * 3)], ['red', 'white', 'blue', 'green'][Math.round(Math.random() * 3)]]
   }));
 
-  ReactDOM.createRoot(document.getElementById('globeViz')).render(
+  createRoot(document.getElementById('globeViz')).render(
     <Globe
       globeImageUrl="//unpkg.com/three-globe/example/img/earth-night.jpg"
       arcsData={arcsData}
diff --git a/example/random-paths/index.html b/example/random-paths/index.html
index 4628eda..fffb312 100644
--- a/example/random-paths/index.html
+++ b/example/random-paths/index.html
@@ -1,19 +1,23 @@
 <head>
   <style> body { margin: 0; } </style>
 
-  <script src="//unpkg.com/react@18/umd/react.production.min.js"></script>
-  <script src="//unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
-  <script src="//unpkg.com/@babel/standalone"></script>
+  <script type="importmap">{ "imports": {
+    "react": "https://esm.sh/react",
+    "react-dom": "https://esm.sh/react-dom/client"
+  }}</script>
 
-  <script src="//unpkg.com/react-globe.gl"></script>
-  <!--<script src="../../dist/react-globe.gl.js"></script>-->
+<!--  <script type="module">import * as React from 'react'; window.React = React;</script>-->
+<!--  <script src="../../dist/react-globe.gl.js" defer></script>-->
 </head>
 
 <body>
 <div id="globeViz"></div>
 
-<script type="text/jsx">
-  const { useState, useEffect, useMemo } = React;
+<script src="//unpkg.com/@babel/standalone"></script>
+<script type="text/jsx" data-type="module">
+  import Globe from 'https://esm.sh/react-globe.gl?external=react';
+  import React, { useState, useEffect, useMemo } from 'react';
+  import { createRoot } from 'react-dom';
 
   const World = () => {
     const [rise, setRise] = useState(false);
@@ -57,7 +61,7 @@
     />;
   };
 
-  ReactDOM.createRoot(document.getElementById('globeViz'))
+  createRoot(document.getElementById('globeViz'))
     .render(<World />);
 </script>
 </body>
\ No newline at end of file
diff --git a/example/random-rings/index.html b/example/random-rings/index.html
index fdc81b4..570ebae 100644
--- a/example/random-rings/index.html
+++ b/example/random-rings/index.html
@@ -1,18 +1,24 @@
 <head>
   <style> body { margin: 0; } </style>
 
-  <script src="//unpkg.com/react@18/umd/react.production.min.js"></script>
-  <script src="//unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
-  <script src="//unpkg.com/@babel/standalone"></script>
+  <script type="importmap">{ "imports": {
+    "react": "https://esm.sh/react",
+    "react-dom": "https://esm.sh/react-dom/client"
+  }}</script>
 
-  <script src="//unpkg.com/react-globe.gl"></script>
-  <!--<script src="../../dist/react-globe.gl.js"></script>-->
+<!--  <script type="module">import * as React from 'react'; window.React = React;</script>-->
+<!--  <script src="../../dist/react-globe.gl.js" defer></script>-->
 </head>
 
 <body>
 <div id="globeViz"></div>
 
-<script type="text/jsx">
+<script src="//unpkg.com/@babel/standalone"></script>
+<script type="text/jsx" data-type="module">
+  import Globe from 'https://esm.sh/react-globe.gl?external=react';
+  import React from 'react';
+  import { createRoot } from 'react-dom';
+
   // Gen random data
   const N = 10;
   const gData = [...Array(N).keys()].map(() => ({
@@ -25,7 +31,7 @@
 
   const colorInterpolator = t => `rgba(255,100,50,${Math.sqrt(1-t)})`;
 
-  ReactDOM.createRoot(document.getElementById('globeViz')).render(
+  createRoot(document.getElementById('globeViz')).render(
     <Globe
       globeImageUrl="//unpkg.com/three-globe/example/img/earth-night.jpg"
       ringsData={gData}
diff --git a/example/satellites/index.html b/example/satellites/index.html
index 3fa8964..10660c9 100644
--- a/example/satellites/index.html
+++ b/example/satellites/index.html
@@ -15,23 +15,25 @@
     }
   </style>
 
-  <script src="//unpkg.com/react@18/umd/react.production.min.js"></script>
-  <script src="//unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
-  <script src="//unpkg.com/@babel/standalone"></script>
+  <script type="importmap">{ "imports": {
+    "react": "https://esm.sh/react",
+    "react-dom": "https://esm.sh/react-dom/client"
+  }}</script>
 
-  <script src="//unpkg.com/satellite.js/dist/satellite.min.js"></script>
-
-  <script src="//unpkg.com/react-globe.gl"></script>
-<!--  <script src="../../dist/react-globe.gl.js"></script>-->
+<!--  <script type="module">import * as React from 'react'; window.React = React;</script>-->
+<!--  <script src="../../dist/react-globe.gl.js" defer></script>-->
 </head>
 
 <body>
 <div id="globeViz"></div>
 
+<script src="//unpkg.com/@babel/standalone"></script>
 <script type="text/jsx" data-type="module">
-  import * as THREE from '//unpkg.com/three/build/three.module.js';
-
-  const { useState, useEffect, useRef, useMemo } = React;
+  import Globe from 'https://esm.sh/react-globe.gl?external=react';
+  import React, { useState, useEffect, useRef, useMemo } from 'react';
+  import { createRoot } from 'react-dom';
+  import * as satellite from 'https://esm.sh/satellite.js';
+  import * as THREE from 'https://esm.sh/three';
 
   const EARTH_RADIUS_KM = 6371; // km
   const SAT_SIZE = 80; // km
@@ -117,7 +119,7 @@
     </div>;
   };
 
-  ReactDOM.createRoot(document.getElementById('globeViz'))
+  createRoot(document.getElementById('globeViz'))
     .render(<World />);
 </script>
 </body>
\ No newline at end of file
diff --git a/example/solar-terminator/index.html b/example/solar-terminator/index.html
index 07a8227..fdb76dd 100644
--- a/example/solar-terminator/index.html
+++ b/example/solar-terminator/index.html
@@ -1,27 +1,29 @@
 <head>
   <style> body { margin: 0; } </style>
 
-  <script src="//unpkg.com/react@18/umd/react.production.min.js"></script>
-  <script src="//unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
-  <script src="//unpkg.com/@babel/standalone"></script>
+  <script type="importmap">{ "imports": {
+    "react": "https://esm.sh/react",
+    "react-dom": "https://esm.sh/react-dom/client"
+  }}</script>
 
-  <script src="//unpkg.com/solar-calculator"></script>
-
-  <script src="//unpkg.com/react-globe.gl"></script>
-<!--  <script src="../../dist/react-globe.gl.js"></script>-->
+<!--  <script type="module">import * as React from 'react'; window.React = React;</script>-->
+<!--  <script src="../../dist/react-globe.gl.js" defer></script>-->
 </head>
 
 <body>
 <div id="globeViz"></div>
 
+<script src="//unpkg.com/@babel/standalone"></script>
 <script type="text/jsx" data-type="module">
-  import * as THREE from '//unpkg.com/three/build/three.module.js';
-
-  const { useState, useEffect } = React;
+  import Globe from 'https://esm.sh/react-globe.gl?external=react';
+  import React, { useState, useEffect } from 'react';
+  import { createRoot } from 'react-dom';
+  import { MeshLambertMaterial } from 'https://esm.sh/three';
+  import * as solar from 'https://esm.sh/solar-calculator';
 
   const VELOCITY = 9; // minutes per frame
 
-  const solarMaterial = new THREE.MeshLambertMaterial({ color: '#ffff00', opacity: 0.3, transparent: true });
+  const solarMaterial = new MeshLambertMaterial({ color: '#ffff00', opacity: 0.3, transparent: true });
 
   const sunPosAt = dt => {
     const day = new Date(+dt).setUTCHours(0, 0, 0, 0);
@@ -54,7 +56,7 @@
     />;
   };
 
-  ReactDOM.createRoot(document.getElementById('globeViz'))
+  createRoot(document.getElementById('globeViz'))
     .render(<World />);
 </script>
 </body>
\ No newline at end of file
diff --git a/example/submarine-cables/index.html b/example/submarine-cables/index.html
index 611219d..df766f4 100644
--- a/example/submarine-cables/index.html
+++ b/example/submarine-cables/index.html
@@ -1,19 +1,23 @@
 <head>
   <style> body { margin: 0; } </style>
 
-  <script src="//unpkg.com/react@18/umd/react.production.min.js"></script>
-  <script src="//unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
-  <script src="//unpkg.com/@babel/standalone"></script>
+  <script type="importmap">{ "imports": {
+    "react": "https://esm.sh/react",
+    "react-dom": "https://esm.sh/react-dom/client"
+  }}</script>
 
-  <script src="//unpkg.com/react-globe.gl"></script>
-  <!--<script src="../../dist/react-globe.gl.js"></script>-->
+<!--  <script type="module">import * as React from 'react'; window.React = React;</script>-->
+<!--  <script src="../../dist/react-globe.gl.js" defer></script>-->
 </head>
 
 <body>
 <div id="globeViz"></div>
 
-<script type="text/jsx">
-  const { useState, useEffect } = React;
+<script src="//unpkg.com/@babel/standalone"></script>
+<script type="text/jsx" data-type="module">
+  import Globe from 'https://esm.sh/react-globe.gl?external=react';
+  import React, { useState, useEffect } from 'react';
+  import { createRoot } from 'react-dom';
 
   const World = () => {
     const [cablePaths, setCablePaths] = useState([]);
@@ -48,7 +52,7 @@
     />;
   };
 
-  ReactDOM.createRoot(document.getElementById('globeViz'))
+  createRoot(document.getElementById('globeViz'))
     .render(<World />);
 </script>
 </body>
\ No newline at end of file
diff --git a/example/tiles/index.html b/example/tiles/index.html
index c8935f0..609d325 100644
--- a/example/tiles/index.html
+++ b/example/tiles/index.html
@@ -1,19 +1,24 @@
 <head>
   <style> body { margin: 0; } </style>
 
-  <script src="//unpkg.com/react@18/umd/react.production.min.js"></script>
-  <script src="//unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
-  <script src="//unpkg.com/@babel/standalone"></script>
+  <script type="importmap">{ "imports": {
+    "react": "https://esm.sh/react",
+    "react-dom": "https://esm.sh/react-dom/client"
+  }}</script>
 
-  <script src="//unpkg.com/react-globe.gl"></script>
-<!--  <script src="../../dist/react-globe.gl.js"></script>-->
+<!--  <script type="module">import * as React from 'react'; window.React = React;</script>-->
+<!--  <script src="../../dist/react-globe.gl.js" defer></script>-->
 </head>
 
 <body>
 <div id="globeViz"></div>
 
+<script src="//unpkg.com/@babel/standalone"></script>
 <script type="text/jsx" data-type="module">
-  import * as THREE from '//unpkg.com/three/build/three.module.js';
+  import Globe from 'https://esm.sh/react-globe.gl?external=react';
+  import React from 'react';
+  import { createRoot } from 'react-dom';
+  import { MeshLambertMaterial } from 'https://esm.sh/three';
 
   const TILE_MARGIN = 0.35; // degrees
 
@@ -21,7 +26,7 @@
   const GRID_SIZE = [60, 20];
   const COLORS = ['red', 'green', 'yellow', 'blue', 'orange', 'pink', 'brown', 'purple', 'magenta'];
 
-  const materials = COLORS.map(color => new THREE.MeshLambertMaterial({ color, opacity: 0.6, transparent: true }));
+  const materials = COLORS.map(color => new MeshLambertMaterial({ color, opacity: 0.6, transparent: true }));
   const tileWidth = 360 / GRID_SIZE[0];
   const tileHeight = 180 / GRID_SIZE[1];
   const tilesData = [];
@@ -35,7 +40,7 @@
     )
   );
 
-  ReactDOM.createRoot(document.getElementById('globeViz')).render(
+  createRoot(document.getElementById('globeViz')).render(
     <Globe
       tilesData={tilesData}
       tileWidth={tileWidth - TILE_MARGIN}
diff --git a/example/volcanoes-heatmap/index.html b/example/volcanoes-heatmap/index.html
index 2944012..9408e77 100644
--- a/example/volcanoes-heatmap/index.html
+++ b/example/volcanoes-heatmap/index.html
@@ -1,19 +1,23 @@
 <head>
   <style> body { margin: 0; } </style>
 
-  <script src="//unpkg.com/react@18/umd/react.production.min.js"></script>
-  <script src="//unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
-  <script src="//unpkg.com/@babel/standalone"></script>
+  <script type="importmap">{ "imports": {
+    "react": "https://esm.sh/react",
+    "react-dom": "https://esm.sh/react-dom/client"
+  }}</script>
 
-  <script src="//unpkg.com/react-globe.gl"></script>
-  <!--<script src="../../dist/react-globe.gl.js"></script>-->
+<!--  <script type="module">import * as React from 'react'; window.React = React;</script>-->
+<!--  <script src="../../dist/react-globe.gl.js" defer></script>-->
 </head>
 
 <body>
 <div id="globeViz"></div>
 
-<script type="text/jsx">
-  const { useState, useEffect } = React;
+<script src="//unpkg.com/@babel/standalone"></script>
+<script type="text/jsx" data-type="module">
+  import Globe from 'https://esm.sh/react-globe.gl?external=react';
+  import React, { useState, useEffect } from 'react';
+  import { createRoot } from 'react-dom';
 
   const World = () => {
     const [volcanoes, setVolcanoes] = useState([]);
@@ -37,7 +41,7 @@
     />;
   };
 
-  ReactDOM.createRoot(document.getElementById('globeViz'))
+  createRoot(document.getElementById('globeViz'))
     .render(<World />);
 </script>
 </body>
\ No newline at end of file
diff --git a/example/volcanoes/index.html b/example/volcanoes/index.html
index 5bfd5b3..432ec10 100644
--- a/example/volcanoes/index.html
+++ b/example/volcanoes/index.html
@@ -1,22 +1,26 @@
 <head>
   <style> body { margin: 0; } </style>
 
-  <script src="//unpkg.com/react@18/umd/react.production.min.js"></script>
-  <script src="//unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
-  <script src="//unpkg.com/@babel/standalone"></script>
+  <script type="importmap">{ "imports": {
+    "react": "https://esm.sh/react",
+    "react-dom": "https://esm.sh/react-dom/client"
+  }}</script>
 
-  <script src="//unpkg.com/d3"></script>
-  <script src="//unpkg.com/polished@3.5.2/dist/polished.js"></script>
-
-  <script src="//unpkg.com/react-globe.gl"></script>
-  <!--<script src="../../dist/react-globe.gl.js"></script>-->
+<!--  <script type="module">import * as React from 'react'; window.React = React;</script>-->
+<!--  <script src="../../dist/react-globe.gl.js" defer></script>-->
 </head>
 
 <body>
 <div id="globeViz"></div>
 
-<script type="text/jsx">
-  const { useState, useEffect } = React;
+<script src="//unpkg.com/@babel/standalone"></script>
+<script type="text/jsx" data-type="module">
+  import Globe from 'https://esm.sh/react-globe.gl?external=react';
+  import React, { useState, useEffect } from 'react';
+  import { createRoot } from 'react-dom';
+  import { scaleOrdinal } from 'https://esm.sh/d3-scale';
+  import { schemeCategory10 } from 'https://esm.sh/d3-scale-chromatic';
+  import { transparentize } from 'https://esm.sh/polished';
 
   const World = () => {
     const [volcanoes, setVolcanoes] = useState([]);
@@ -27,7 +31,7 @@
         .then(setVolcanoes);
     }, []);
 
-    const catColor = d3.scaleOrdinal(d3.schemeCategory10.map(col => polished.transparentize(0.2, col)));
+    const catColor = scaleOrdinal(schemeCategory10.map(col => transparentize(0.2, col)));
 
     const getAlt = d => d.elevation * 5e-5;
 
@@ -65,7 +69,7 @@
     />;
   };
 
-  ReactDOM.createRoot(document.getElementById('globeViz'))
+  createRoot(document.getElementById('globeViz'))
     .render(<World />);
 </script>
 </body>
\ No newline at end of file
diff --git a/example/world-cities/index.html b/example/world-cities/index.html
index 6c5ec29..8a132ad 100644
--- a/example/world-cities/index.html
+++ b/example/world-cities/index.html
@@ -1,19 +1,23 @@
 <head>
   <style> body { margin: 0; } </style>
 
-  <script src="//unpkg.com/react@18/umd/react.production.min.js"></script>
-  <script src="//unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
-  <script src="//unpkg.com/@babel/standalone"></script>
+  <script type="importmap">{ "imports": {
+    "react": "https://esm.sh/react",
+    "react-dom": "https://esm.sh/react-dom/client"
+  }}</script>
 
-  <script src="//unpkg.com/react-globe.gl"></script>
-  <!--<script src="../../dist/react-globe.gl.js"></script>-->
+<!--  <script type="module">import * as React from 'react'; window.React = React;</script>-->
+<!--  <script src="../../dist/react-globe.gl.js" defer></script>-->
 </head>
 
 <body>
 <div id="globeViz"></div>
 
-<script type="text/jsx">
-  const { useState, useEffect } = React;
+<script src="//unpkg.com/@babel/standalone"></script>
+<script type="text/jsx" data-type="module">
+  import Globe from 'https://esm.sh/react-globe.gl?external=react';
+  import React, { useState, useEffect } from 'react';
+  import { createRoot } from 'react-dom';
 
   const World = () => {
     const [places, setPlaces] = useState([]);
@@ -39,7 +43,7 @@
     />;
   };
 
-  ReactDOM.createRoot(document.getElementById('globeViz'))
+  createRoot(document.getElementById('globeViz'))
     .render(<World />);
 </script>
 </body>
\ No newline at end of file
diff --git a/example/world-population/index.html b/example/world-population/index.html
index 1ba623f..7077a77 100644
--- a/example/world-population/index.html
+++ b/example/world-population/index.html
@@ -1,22 +1,26 @@
 <head>
   <style> body { margin: 0; } </style>
 
-  <script src="//unpkg.com/react@18/umd/react.production.min.js"></script>
-  <script src="//unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
-  <script src="//unpkg.com/@babel/standalone"></script>
+  <script type="importmap">{ "imports": {
+    "react": "https://esm.sh/react",
+    "react-dom": "https://esm.sh/react-dom/client"
+  }}</script>
 
-  <script src="//unpkg.com/d3"></script>
-  <script src="//unpkg.com/d3-dsv"></script>
-
-  <script src="//unpkg.com/react-globe.gl"></script>
-  <!--<script src="../../dist/react-globe.gl.js"></script>-->
+<!--  <script type="module">import * as React from 'react'; window.React = React;</script>-->
+<!--  <script src="../../dist/react-globe.gl.js" defer></script>-->
 </head>
 
 <body>
 <div id="globeViz"></div>
 
-<script type="text/jsx">
-  const { useState, useEffect, useRef } = React;
+<script src="//unpkg.com/@babel/standalone"></script>
+<script type="text/jsx" data-type="module">
+  import Globe from 'https://esm.sh/react-globe.gl?external=react';
+  import React, { useState, useEffect, useRef } from 'react';
+  import { createRoot } from 'react-dom';
+  import { csvParse } from 'https://esm.sh/d3-dsv';
+  import { scaleSequentialSqrt } from 'https://esm.sh/d3-scale';
+  import { interpolateYlOrRd } from 'https://esm.sh/d3-scale-chromatic';
 
   const World = () => {
     const globeEl = useRef();
@@ -25,7 +29,7 @@
     useEffect(() => {
       // load data
       fetch('../datasets/world_population.csv').then(res => res.text())
-        .then(csv => d3.csvParse(csv, ({ lat, lng, pop }) => ({ lat: +lat, lng: +lng, pop: +pop })))
+        .then(csv => csvParse(csv, ({ lat, lng, pop }) => ({ lat: +lat, lng: +lng, pop: +pop })))
         .then(setPopData);
     }, []);
 
@@ -35,7 +39,7 @@
       globeEl.current.controls().autoRotateSpeed = 0.1;
     }, []);
 
-    const weightColor = d3.scaleSequentialSqrt(d3.interpolateYlOrRd)
+    const weightColor = scaleSequentialSqrt(interpolateYlOrRd)
       .domain([0, 1e7]);
 
     return <Globe
@@ -55,7 +59,7 @@
     />;
   };
 
-  ReactDOM.createRoot(document.getElementById('globeViz'))
+  createRoot(document.getElementById('globeViz'))
     .render(<World />);
 </script>
 </body>
\ No newline at end of file
