From 21eabfa180cbe05f93f2f7a88c7e3a260bc26fe0 Mon Sep 17 00:00:00 2001
From: vasco <vastur@gmail.com>
Date: Thu, 12 Dec 2024 20:45:33 +0000
Subject: [PATCH] Refactor imports in example

---
 example/multiple-globes/globes.js  | 6 ++++--
 example/multiple-globes/index.html | 3 ---
 2 files changed, 4 insertions(+), 5 deletions(-)

diff --git a/example/multiple-globes/globes.js b/example/multiple-globes/globes.js
index cdc8d6c..bdbf75d 100644
--- a/example/multiple-globes/globes.js
+++ b/example/multiple-globes/globes.js
@@ -1,4 +1,6 @@
 import { createElement, useMemo, useState, useEffect, useCallback } from 'react';
+import { csvParse, scaleSequentialSqrt, interpolateYlOrRd } from 'https://esm.sh/d3';
+import * as topojson from 'https://esm.sh/topojson-client';
 
 export const Points = ptProps => {
   const N = 300;
@@ -161,11 +163,11 @@ export const Population = ptProps => {
   useEffect(() => {
     // load data
     fetch('./data/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);
   }, []);
 
-  const weightColor = d3.scaleSequentialSqrt(d3.interpolateYlOrRd)
+  const weightColor = scaleSequentialSqrt(interpolateYlOrRd)
     .domain([0, 1e7]);
 
   return createElement(R3fGlobe, {
diff --git a/example/multiple-globes/index.html b/example/multiple-globes/index.html
index ce8d242..c143df1 100644
--- a/example/multiple-globes/index.html
+++ b/example/multiple-globes/index.html
@@ -32,9 +32,6 @@
   </script>
 
   <script src="//unpkg.com/@babel/standalone"></script>
-  <script src="//unpkg.com/d3"></script>
-  <script src="//unpkg.com/d3-dsv"></script>
-  <script src="//unpkg.com/topojson-client"></script>
 
   <script src="//unpkg.com/r3f-globe" defer></script>
 <!--  <script src="../../dist/r3f-globe.js" defer></script>-->