Refactor examples imports

vasturiano · Dec 13, 2024 · 9a558ec · 9a558ec
1 parent 3f16c69
commit 9a558ec
Show file tree

Hide file tree

Showing 15 changed files with 52 additions and 55 deletions.
diff --git a/example/airline-routes/highlight-links.html b/example/airline-routes/highlight-links.html
@@ -1,17 +1,16 @@
 <head>
   <style> body { margin: 0; } </style>
 
-  <script src="//unpkg.com/d3-dsv"></script>
-  <script src="//unpkg.com/index-array-by"></script>
-
   <script src="//unpkg.com/globe.gl"></script>
   <!--<script src="../../dist/globe.gl.js"></script>-->
 </head>
 
 <body>
 <div id="globeViz"></div>
 
-<script>
+<script type="module">
+  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 };
@@ -47,9 +46,9 @@
 
   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);

diff --git a/example/airline-routes/us-international-outbound.html b/example/airline-routes/us-international-outbound.html
@@ -1,17 +1,16 @@
 <head>
   <style> body { margin: 0; } </style>
 
-  <script src="//unpkg.com/d3-dsv"></script>
-  <script src="//unpkg.com/index-array-by"></script>
-
   <script src="//unpkg.com/globe.gl"></script>
   <!--<script src="../../dist/globe.gl.js"></script>-->
 </head>
 
 <body>
 <div id="globeViz"></div>
 
-<script>
+<script type="module">
+  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;
@@ -45,9 +44,9 @@
 
   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);

diff --git a/example/choropleth-countries/index.html b/example/choropleth-countries/index.html
@@ -1,17 +1,18 @@
 <head>
   <style> body { margin: 0; } </style>
 
-  <script src="//unpkg.com/d3"></script>
-
   <script src="//unpkg.com/globe.gl"></script>
   <!--<script src="../../dist/globe.gl.js"></script>-->
 </head>
 
 <body>
   <div id="globeViz"></div>
 
-  <script>
-    const colorScale = d3.scaleSequentialSqrt(d3.interpolateYlOrRd);
+  <script type="module">
+    import { scaleSequentialSqrt } from 'https://esm.sh/d3-scale';
+    import { interpolateYlOrRd } from 'https://esm.sh/d3-scale-chromatic';
+
+    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);

diff --git a/example/clouds/index.html b/example/clouds/index.html
@@ -9,7 +9,7 @@
   <div id="globeViz"></div>
 
   <script type="module">
-    import * as THREE from '//unpkg.com/three/build/three.module.js';
+    import * as THREE from 'https://esm.sh/three';
 
     const world = new Globe(document.getElementById('globeViz'), { animateIn: false })
       .globeImageUrl('//unpkg.com/three-globe/example/img/earth-blue-marble.jpg')

diff --git a/example/custom-globe-styling/index.html b/example/custom-globe-styling/index.html
@@ -9,7 +9,7 @@
   <div id="globeViz"></div>
 
   <script type="module">
-    import * as THREE from '//unpkg.com/three/build/three.module.js';
+    import * as THREE from 'https://esm.sh/three';
 
     const world = new Globe(document.getElementById('globeViz'))
       .globeImageUrl('//unpkg.com/three-globe/example/img/earth-blue-marble.jpg')

diff --git a/example/custom-layer/index.html b/example/custom-layer/index.html
@@ -9,7 +9,7 @@
   <div id="globeViz"></div>
 
   <script type="module">
-    import * as THREE from '//unpkg.com/three/build/three.module.js';
+    import * as THREE from 'https://esm.sh/three';
 
     // Gen random data
     const N = 300;

diff --git a/example/earthquakes/index.html b/example/earthquakes/index.html
@@ -1,17 +1,17 @@
 <head>
   <style> body { margin: 0; } </style>
 
-  <script src="//unpkg.com/d3"></script>
-
   <script src="//unpkg.com/globe.gl"></script>
   <!--<script src="../../dist/globe.gl.js"></script>-->
 </head>
 
 <body>
   <div id="globeViz"></div>
 
-  <script>
-    const weightColor = d3.scaleLinear()
+  <script type="module">
+    import { scaleLinear } from 'https://esm.sh/d3-scale';
+
+    const weightColor = scaleLinear()
       .domain([0, 60])
       .range(['lightblue', 'darkred'])
       .clamp(true);

diff --git a/example/hollow-globe/index.html b/example/hollow-globe/index.html
@@ -1,8 +1,6 @@
 <head>
   <style> body { margin: 0; } </style>
 
-  <script src="//unpkg.com/topojson-client"></script>
-
   <script src="//unpkg.com/globe.gl"></script>
 <!--  <script src="../../dist/globe.gl.js"></script>-->
 </head>
@@ -11,7 +9,8 @@
   <div id="globeViz"></div>
 
   <script type="module">
-    import * as THREE from '//unpkg.com/three/build/three.module.js';
+    import { MeshLambertMaterial, DoubleSide } from 'https://esm.sh/three';
+    import * as topojson from 'https://esm.sh/topojson-client';
 
     const world = new Globe(document.getElementById('globeViz'))
       .backgroundColor('rgba(0,0,0,0)')
@@ -22,7 +21,7 @@
       .then(landTopo => {
         world
           .polygonsData(topojson.feature(landTopo, landTopo.objects.land).features)
-          .polygonCapMaterial(new THREE.MeshLambertMaterial({ color: 'darkslategrey', side: THREE.DoubleSide }))
+          .polygonCapMaterial(new MeshLambertMaterial({ color: 'darkslategrey', side: DoubleSide }))
           .polygonSideColor(() => 'rgba(0,0,0,0)');
       });
   </script>

diff --git a/example/moon-landing-sites/index.html b/example/moon-landing-sites/index.html
@@ -1,18 +1,17 @@
 <head>
   <style> body { margin: 0; } </style>
 
-  <script src="//unpkg.com/d3-array"></script>
-  <script src="//unpkg.com/d3-scale"></script>
-
   <script src="//unpkg.com/globe.gl"></script>
   <!--<script src="../../dist/globe.gl.js"></script>-->
 </head>
 
 <body>
 <div id="globeViz"></div>
 
-<script>
-  const colorScale = d3.scaleOrdinal(['orangered', 'mediumblue', 'darkgreen', 'yellow']);
+<script type="module">
+  import { scaleOrdinal } from 'https://esm.sh/d3-scale';
+
+  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
 

diff --git a/example/population-heatmap/index.html b/example/population-heatmap/index.html
@@ -1,16 +1,16 @@
 <head>
   <style> body { margin: 0; } </style>
 
-  <script src="//unpkg.com/d3-dsv"></script>
-
   <script src="//unpkg.com/globe.gl"></script>
 <!--  <script src="../../dist/globe.gl.js"></script>-->
 </head>
 
 <body>
   <div id="globeViz"></div>
 
-  <script>
+  <script type="module">
+    import { csvParse } from 'https://esm.sh/d3-dsv';
+
     const world = new Globe(document.getElementById('globeViz'))
       .globeImageUrl('//unpkg.com/three-globe/example/img/earth-night.jpg')
       .heatmapPointLat('lat')
@@ -21,7 +21,7 @@
       .enablePointerInteraction(false);
 
     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(data => world.heatmapsData([data]));
   </script>
 </body>
diff --git a/example/satellites/index.html b/example/satellites/index.html
@@ -15,8 +15,6 @@
     }
   </style>
 
-  <script src="//unpkg.com/satellite.js/dist/satellite.min.js"></script>
-
   <script src="//unpkg.com/globe.gl"></script>
 <!--  <script src="../../dist/globe.gl.js"></script>-->
 </head>
@@ -26,7 +24,8 @@
   <div id="time-log"></div>
 
   <script type="module">
-    import * as THREE from '//unpkg.com/three/build/three.module.js';
+    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 = 100; // km

diff --git a/example/solar-terminator/index.html b/example/solar-terminator/index.html
@@ -15,16 +15,15 @@
 
   <script src="//unpkg.com/globe.gl"></script>
 <!--  <script src="../../dist/globe.gl.js"></script>-->
-
-  <script src="//unpkg.com/solar-calculator"></script>
 </head>
 
 <body>
   <div id="globeViz"></div>
   <div id="time"></div>
 
   <script type="module">
-    import * as THREE from '//unpkg.com/three/build/three.module.js';
+    import { MeshLambertMaterial } from 'https://esm.sh/three';
+    import * as solar from 'https://esm.sh/solar-calculator';
 
     const VELOCITY = 9; // minutes per frame
 
@@ -48,7 +47,7 @@
       .tileWidth(180)
       .tileHeight(180)
       .tileUseGlobeProjection(false)
-      .tileMaterial(() => new THREE.MeshLambertMaterial({ color: '#ffff00', opacity: 0.3, transparent: true }))
+      .tileMaterial(() => new MeshLambertMaterial({ color: '#ffff00', opacity: 0.3, transparent: true }))
       .tilesTransitionDuration(0);
 
     // animate time of day

diff --git a/example/tiles/index.html b/example/tiles/index.html
@@ -9,7 +9,7 @@
 <div id="globeViz"></div>
 
 <script type="module">
-  import * as THREE from '//unpkg.com/three/build/three.module.js';
+  import * as THREE from 'https://esm.sh/three';
 
   const TILE_MARGIN = 0.35; // degrees
 

diff --git a/example/volcanoes/index.html b/example/volcanoes/index.html
@@ -1,18 +1,19 @@
 <head>
   <style> body { margin: 0; } </style>
 
-  <script src="//unpkg.com/d3"></script>
-  <script src="//unpkg.com/[email protected]/dist/polished.js"></script>
-
   <script src="//unpkg.com/globe.gl"></script>
   <!--<script src="../../dist/globe.gl.js"></script>-->
 </head>
 
 <body>
   <div id="globeViz"></div>
 
-  <script>
-    const catColor = d3.scaleOrdinal(d3.schemeCategory10.map(col => polished.transparentize(0.2, col)));
+  <script type="module">
+    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 catColor = scaleOrdinal(schemeCategory10.map(col => transparentize(0.2, col)));
 
     const getAlt = d => d.elevation * 5e-5;
 

diff --git a/example/world-population/index.html b/example/world-population/index.html
@@ -1,18 +1,19 @@
 <head>
   <style> body { margin: 0; } </style>
 
-  <script src="//unpkg.com/d3"></script>
-  <script src="//unpkg.com/d3-dsv"></script>
-
   <script src="//unpkg.com/globe.gl"></script>
   <!--<script src="../../dist/globe.gl.js"></script>-->
 </head>
 
 <body>
   <div id="globeViz"></div>
 
-  <script>
-    const weightColor = d3.scaleSequentialSqrt(d3.interpolateYlOrRd)
+  <script type="module">
+    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 weightColor = scaleSequentialSqrt(interpolateYlOrRd)
       .domain([0, 1e7]);
 
     const world = new Globe(document.getElementById('globeViz'))
@@ -28,7 +29,7 @@
       .enablePointerInteraction(false); // performance improvement
 
     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(data => world.hexBinPointsData(data));
 
     // Add auto-rotation