Skip to content

Commit

Permalink
Refactor example imports
Browse files Browse the repository at this point in the history
  • Loading branch information
vasturiano committed Dec 13, 2024
1 parent 23c47fb commit 165c6ae
Show file tree
Hide file tree
Showing 28 changed files with 376 additions and 266 deletions.
29 changes: 16 additions & 13 deletions example/airline-routes/highlight-links.html
Original file line number Diff line number Diff line change
@@ -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 };
Expand All @@ -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);
Expand Down Expand Up @@ -87,7 +90,7 @@
/>;
};

ReactDOM.createRoot(document.getElementById('globeViz'))
createRoot(document.getElementById('globeViz'))
.render(<World />);
</script>
</body>
29 changes: 16 additions & 13 deletions example/airline-routes/us-international-outbound.html
Original file line number Diff line number Diff line change
@@ -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;
Expand All @@ -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);
Expand Down Expand Up @@ -84,7 +87,7 @@
/>;
};

ReactDOM.createRoot(document.getElementById('globeViz'))
createRoot(document.getElementById('globeViz'))
.render(<World />);
</script>
</body>
20 changes: 13 additions & 7 deletions example/basic/index.html
Original file line number Diff line number Diff line change
@@ -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(() => ({
Expand All @@ -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}
Expand Down
26 changes: 15 additions & 11 deletions example/choropleth-countries/index.html
Original file line number Diff line number Diff line change
@@ -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: []});
Expand All @@ -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);
Expand Down Expand Up @@ -57,7 +61,7 @@
/>;
};

ReactDOM.createRoot(document.getElementById('globeViz'))
createRoot(document.getElementById('globeViz'))
.render(<World />);
</script>
</body>
21 changes: 12 additions & 9 deletions example/clouds/index.html
Original file line number Diff line number Diff line change
@@ -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();
Expand Down Expand Up @@ -54,7 +57,7 @@
/>;
};

ReactDOM.createRoot(document.getElementById('globeViz'))
createRoot(document.getElementById('globeViz'))
.render(<World />);
</script>
</body>
20 changes: 12 additions & 8 deletions example/countries-population/index.html
Original file line number Diff line number Diff line change
@@ -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();
Expand Down Expand Up @@ -58,7 +62,7 @@
/>;
};

ReactDOM.createRoot(document.getElementById('globeViz'))
createRoot(document.getElementById('globeViz'))
.render(<World />);
</script>
</body>
21 changes: 12 additions & 9 deletions example/custom-globe-styling/index.html
Original file line number Diff line number Diff line change
@@ -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();
Expand Down Expand Up @@ -43,7 +46,7 @@
/>;
};

ReactDOM.createRoot(document.getElementById('globeViz')).render(
createRoot(document.getElementById('globeViz')).render(
<World />,
document.getElementById('globeViz')
);
Expand Down
21 changes: 12 additions & 9 deletions example/custom-layer/index.html
Original file line number Diff line number Diff line change
@@ -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;
Expand Down Expand Up @@ -59,7 +62,7 @@
/>;
};

ReactDOM.createRoot(document.getElementById('globeViz'))
createRoot(document.getElementById('globeViz'))
.render(<World />);
</script>
</body>
Loading

0 comments on commit 165c6ae

Please sign in to comment.