globe.gl 2.34.2 → 2.34.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (18) hide show
  1. package/dist/globe.gl.js +1 -1
  2. package/dist/globe.gl.min.js +1 -1
  3. package/example/airline-routes/highlight-links.html +5 -6
  4. package/example/airline-routes/us-international-outbound.html +5 -6
  5. package/example/choropleth-countries/index.html +5 -4
  6. package/example/clouds/index.html +1 -1
  7. package/example/custom-globe-styling/index.html +1 -1
  8. package/example/custom-layer/index.html +1 -1
  9. package/example/earthquakes/index.html +4 -4
  10. package/example/hollow-globe/index.html +3 -4
  11. package/example/moon-landing-sites/index.html +4 -5
  12. package/example/population-heatmap/index.html +4 -4
  13. package/example/satellites/index.html +2 -3
  14. package/example/solar-terminator/index.html +3 -4
  15. package/example/tiles/index.html +1 -1
  16. package/example/volcanoes/index.html +6 -5
  17. package/example/world-population/index.html +7 -6
  18. package/package.json +1 -1
package/example/airline-routes/highlight-links.html CHANGED
@@ -1,9 +1,6 @@
1
1
  <head>
2
2
  <style> body { margin: 0; } </style>
3
3
 
4
- <script src="//unpkg.com/d3-dsv"></script>
5
- <script src="//unpkg.com/index-array-by"></script>
6
-
7
4
  <script src="//unpkg.com/globe.gl"></script>
8
5
  <!--<script src="../../dist/globe.gl.js"></script>-->
9
6
  </head>
@@ -11,7 +8,9 @@
11
8
  <body>
12
9
  <div id="globeViz"></div>
13
10
 
14
- <script>
11
+ <script type="module">
12
+ import { csvParseRows } from 'https://esm.sh/d3-dsv';
13
+ import indexBy from 'https://esm.sh/index-array-by';
15
14
 
16
15
  const COUNTRY = 'Portugal';
17
16
  const MAP_CENTER = { lat: 37.6, lng: -16.6, altitude: 0.4 };
@@ -47,9 +46,9 @@
47
46
 
48
47
  Promise.all([
49
48
  fetch('https://raw.githubusercontent.com/jpatokal/openflights/master/data/airports.dat').then(res => res.text())
50
- .then(d => d3.csvParseRows(d, airportParse)),
49
+ .then(d => csvParseRows(d, airportParse)),
51
50
  fetch('https://raw.githubusercontent.com/jpatokal/openflights/master/data/routes.dat').then(res => res.text())
52
- .then(d => d3.csvParseRows(d, routeParse))
51
+ .then(d => csvParseRows(d, routeParse))
53
52
  ]).then(([airports, routes]) => {
54
53
 
55
54
  const filteredAirports = airports.filter(d => d.country === COUNTRY);
package/example/airline-routes/us-international-outbound.html CHANGED
@@ -1,9 +1,6 @@
1
1
  <head>
2
2
  <style> body { margin: 0; } </style>
3
3
 
4
- <script src="//unpkg.com/d3-dsv"></script>
5
- <script src="//unpkg.com/index-array-by"></script>
6
-
7
4
  <script src="//unpkg.com/globe.gl"></script>
8
5
  <!--<script src="../../dist/globe.gl.js"></script>-->
9
6
  </head>
@@ -11,7 +8,9 @@
11
8
  <body>
12
9
  <div id="globeViz"></div>
13
10
 
14
- <script>
11
+ <script type="module">
12
+ import { csvParseRows } from 'https://esm.sh/d3-dsv';
13
+ import indexBy from 'https://esm.sh/index-array-by';
15
14
 
16
15
  const COUNTRY = 'United States';
17
16
  const OPACITY = 0.22;
@@ -45,9 +44,9 @@
45
44
 
46
45
  Promise.all([
47
46
  fetch('https://raw.githubusercontent.com/jpatokal/openflights/master/data/airports.dat').then(res => res.text())
48
- .then(d => d3.csvParseRows(d, airportParse)),
47
+ .then(d => csvParseRows(d, airportParse)),
49
48
  fetch('https://raw.githubusercontent.com/jpatokal/openflights/master/data/routes.dat').then(res => res.text())
50
- .then(d => d3.csvParseRows(d, routeParse))
49
+ .then(d => csvParseRows(d, routeParse))
51
50
  ]).then(([airports, routes]) => {
52
51
 
53
52
  const byIata = indexBy(airports, 'iata', false);
package/example/choropleth-countries/index.html CHANGED
@@ -1,8 +1,6 @@
1
1
  <head>
2
2
  <style> body { margin: 0; } </style>
3
3
 
4
- <script src="//unpkg.com/d3"></script>
5
-
6
4
  <script src="//unpkg.com/globe.gl"></script>
7
5
  <!--<script src="../../dist/globe.gl.js"></script>-->
8
6
  </head>
@@ -10,8 +8,11 @@
10
8
  <body>
11
9
  <div id="globeViz"></div>
12
10
 
13
- <script>
14
- const colorScale = d3.scaleSequentialSqrt(d3.interpolateYlOrRd);
11
+ <script type="module">
12
+ import { scaleSequentialSqrt } from 'https://esm.sh/d3-scale';
13
+ import { interpolateYlOrRd } from 'https://esm.sh/d3-scale-chromatic';
14
+
15
+ const colorScale = scaleSequentialSqrt(interpolateYlOrRd);
15
16
 
16
17
  // GDP per capita (avoiding countries with small pop)
17
18
  const getVal = feat => feat.properties.GDP_MD_EST / Math.max(1e5, feat.properties.POP_EST);
package/example/clouds/index.html CHANGED
@@ -9,7 +9,7 @@
9
9
  <div id="globeViz"></div>
10
10
 
11
11
  <script type="module">
12
- import * as THREE from '//unpkg.com/three/build/three.module.js';
12
+ import * as THREE from 'https://esm.sh/three';
13
13
 
14
14
  const world = new Globe(document.getElementById('globeViz'), { animateIn: false })
15
15
  .globeImageUrl('//unpkg.com/three-globe/example/img/earth-blue-marble.jpg')
package/example/custom-globe-styling/index.html CHANGED
@@ -9,7 +9,7 @@
9
9
  <div id="globeViz"></div>
10
10
 
11
11
  <script type="module">
12
- import * as THREE from '//unpkg.com/three/build/three.module.js';
12
+ import * as THREE from 'https://esm.sh/three';
13
13
 
14
14
  const world = new Globe(document.getElementById('globeViz'))
15
15
  .globeImageUrl('//unpkg.com/three-globe/example/img/earth-blue-marble.jpg')
package/example/custom-layer/index.html CHANGED
@@ -9,7 +9,7 @@
9
9
  <div id="globeViz"></div>
10
10
 
11
11
  <script type="module">
12
- import * as THREE from '//unpkg.com/three/build/three.module.js';
12
+ import * as THREE from 'https://esm.sh/three';
13
13
 
14
14
  // Gen random data
15
15
  const N = 300;
package/example/earthquakes/index.html CHANGED
@@ -1,8 +1,6 @@
1
1
  <head>
2
2
  <style> body { margin: 0; } </style>
3
3
 
4
- <script src="//unpkg.com/d3"></script>
5
-
6
4
  <script src="//unpkg.com/globe.gl"></script>
7
5
  <!--<script src="../../dist/globe.gl.js"></script>-->
8
6
  </head>
@@ -10,8 +8,10 @@
10
8
  <body>
11
9
  <div id="globeViz"></div>
12
10
 
13
- <script>
14
- const weightColor = d3.scaleLinear()
11
+ <script type="module">
12
+ import { scaleLinear } from 'https://esm.sh/d3-scale';
13
+
14
+ const weightColor = scaleLinear()
15
15
  .domain([0, 60])
16
16
  .range(['lightblue', 'darkred'])
17
17
  .clamp(true);
package/example/hollow-globe/index.html CHANGED
@@ -1,8 +1,6 @@
1
1
  <head>
2
2
  <style> body { margin: 0; } </style>
3
3
 
4
- <script src="//unpkg.com/topojson-client"></script>
5
-
6
4
  <script src="//unpkg.com/globe.gl"></script>
7
5
  <!-- <script src="../../dist/globe.gl.js"></script>-->
8
6
  </head>
@@ -11,7 +9,8 @@
11
9
  <div id="globeViz"></div>
12
10
 
13
11
  <script type="module">
14
- import * as THREE from '//unpkg.com/three/build/three.module.js';
12
+ import { MeshLambertMaterial, DoubleSide } from 'https://esm.sh/three';
13
+ import * as topojson from 'https://esm.sh/topojson-client';
15
14
 
16
15
  const world = new Globe(document.getElementById('globeViz'))
17
16
  .backgroundColor('rgba(0,0,0,0)')
@@ -22,7 +21,7 @@
22
21
  .then(landTopo => {
23
22
  world
24
23
  .polygonsData(topojson.feature(landTopo, landTopo.objects.land).features)
25
- .polygonCapMaterial(new THREE.MeshLambertMaterial({ color: 'darkslategrey', side: THREE.DoubleSide }))
24
+ .polygonCapMaterial(new MeshLambertMaterial({ color: 'darkslategrey', side: DoubleSide }))
26
25
  .polygonSideColor(() => 'rgba(0,0,0,0)');
27
26
  });
28
27
  </script>
package/example/moon-landing-sites/index.html CHANGED
@@ -1,9 +1,6 @@
1
1
  <head>
2
2
  <style> body { margin: 0; } </style>
3
3
 
4
- <script src="//unpkg.com/d3-array"></script>
5
- <script src="//unpkg.com/d3-scale"></script>
6
-
7
4
  <script src="//unpkg.com/globe.gl"></script>
8
5
  <!--<script src="../../dist/globe.gl.js"></script>-->
9
6
  </head>
@@ -11,8 +8,10 @@
11
8
  <body>
12
9
  <div id="globeViz"></div>
13
10
 
14
- <script>
15
- const colorScale = d3.scaleOrdinal(['orangered', 'mediumblue', 'darkgreen', 'yellow']);
11
+ <script type="module">
12
+ import { scaleOrdinal } from 'https://esm.sh/d3-scale';
13
+
14
+ const colorScale = scaleOrdinal(['orangered', 'mediumblue', 'darkgreen', 'yellow']);
16
15
 
17
16
  const labelsTopOrientation = new Set(['Apollo 12', 'Luna 2', 'Luna 20', 'Luna 21', 'Luna 24', 'LCROSS Probe']); // avoid label collisions
18
17
 
package/example/population-heatmap/index.html CHANGED
@@ -1,8 +1,6 @@
1
1
  <head>
2
2
  <style> body { margin: 0; } </style>
3
3
 
4
- <script src="//unpkg.com/d3-dsv"></script>
5
-
6
4
  <script src="//unpkg.com/globe.gl"></script>
7
5
  <!-- <script src="../../dist/globe.gl.js"></script>-->
8
6
  </head>
@@ -10,7 +8,9 @@
10
8
  <body>
11
9
  <div id="globeViz"></div>
12
10
 
13
- <script>
11
+ <script type="module">
12
+ import { csvParse } from 'https://esm.sh/d3-dsv';
13
+
14
14
  const world = new Globe(document.getElementById('globeViz'))
15
15
  .globeImageUrl('//unpkg.com/three-globe/example/img/earth-night.jpg')
16
16
  .heatmapPointLat('lat')
@@ -21,7 +21,7 @@
21
21
  .enablePointerInteraction(false);
22
22
 
23
23
  fetch('../datasets/world_population.csv').then(res => res.text())
24
- .then(csv => d3.csvParse(csv, ({ lat, lng, pop }) => ({ lat: +lat, lng: +lng, pop: +pop })))
24
+ .then(csv => csvParse(csv, ({ lat, lng, pop }) => ({ lat: +lat, lng: +lng, pop: +pop })))
25
25
  .then(data => world.heatmapsData([data]));
26
26
  </script>
27
27
  </body>
package/example/satellites/index.html CHANGED
@@ -15,8 +15,6 @@
15
15
  }
16
16
  </style>
17
17
 
18
- <script src="//unpkg.com/satellite.js/dist/satellite.min.js"></script>
19
-
20
18
  <script src="//unpkg.com/globe.gl"></script>
21
19
  <!-- <script src="../../dist/globe.gl.js"></script>-->
22
20
  </head>
@@ -26,7 +24,8 @@
26
24
  <div id="time-log"></div>
27
25
 
28
26
  <script type="module">
29
- import * as THREE from '//unpkg.com/three/build/three.module.js';
27
+ import * as satellite from 'https://esm.sh/satellite.js';
28
+ import * as THREE from 'https://esm.sh/three';
30
29
 
31
30
  const EARTH_RADIUS_KM = 6371; // km
32
31
  const SAT_SIZE = 100; // km
package/example/solar-terminator/index.html CHANGED
@@ -15,8 +15,6 @@
15
15
 
16
16
  <script src="//unpkg.com/globe.gl"></script>
17
17
  <!-- <script src="../../dist/globe.gl.js"></script>-->
18
-
19
- <script src="//unpkg.com/solar-calculator"></script>
20
18
  </head>
21
19
 
22
20
  <body>
@@ -24,7 +22,8 @@
24
22
  <div id="time"></div>
25
23
 
26
24
  <script type="module">
27
- import * as THREE from '//unpkg.com/three/build/three.module.js';
25
+ import { MeshLambertMaterial } from 'https://esm.sh/three';
26
+ import * as solar from 'https://esm.sh/solar-calculator';
28
27
 
29
28
  const VELOCITY = 9; // minutes per frame
30
29
 
@@ -48,7 +47,7 @@
48
47
  .tileWidth(180)
49
48
  .tileHeight(180)
50
49
  .tileUseGlobeProjection(false)
51
- .tileMaterial(() => new THREE.MeshLambertMaterial({ color: '#ffff00', opacity: 0.3, transparent: true }))
50
+ .tileMaterial(() => new MeshLambertMaterial({ color: '#ffff00', opacity: 0.3, transparent: true }))
52
51
  .tilesTransitionDuration(0);
53
52
 
54
53
  // animate time of day
package/example/tiles/index.html CHANGED
@@ -9,7 +9,7 @@
9
9
  <div id="globeViz"></div>
10
10
 
11
11
  <script type="module">
12
- import * as THREE from '//unpkg.com/three/build/three.module.js';
12
+ import * as THREE from 'https://esm.sh/three';
13
13
 
14
14
  const TILE_MARGIN = 0.35; // degrees
15
15
 
package/example/volcanoes/index.html CHANGED
@@ -1,9 +1,6 @@
1
1
  <head>
2
2
  <style> body { margin: 0; } </style>
3
3
 
4
- <script src="//unpkg.com/d3"></script>
5
- <script src="//unpkg.com/polished@3.5.2/dist/polished.js"></script>
6
-
7
4
  <script src="//unpkg.com/globe.gl"></script>
8
5
  <!--<script src="../../dist/globe.gl.js"></script>-->
9
6
  </head>
@@ -11,8 +8,12 @@
11
8
  <body>
12
9
  <div id="globeViz"></div>
13
10
 
14
- <script>
15
- const catColor = d3.scaleOrdinal(d3.schemeCategory10.map(col => polished.transparentize(0.2, col)));
11
+ <script type="module">
12
+ import { scaleOrdinal } from 'https://esm.sh/d3-scale';
13
+ import { schemeCategory10 } from 'https://esm.sh/d3-scale-chromatic';
14
+ import { transparentize } from 'https://esm.sh/polished';
15
+
16
+ const catColor = scaleOrdinal(schemeCategory10.map(col => transparentize(0.2, col)));
16
17
 
17
18
  const getAlt = d => d.elevation * 5e-5;
18
19
 
package/example/world-population/index.html CHANGED
@@ -1,9 +1,6 @@
1
1
  <head>
2
2
  <style> body { margin: 0; } </style>
3
3
 
4
- <script src="//unpkg.com/d3"></script>
5
- <script src="//unpkg.com/d3-dsv"></script>
6
-
7
4
  <script src="//unpkg.com/globe.gl"></script>
8
5
  <!--<script src="../../dist/globe.gl.js"></script>-->
9
6
  </head>
@@ -11,8 +8,12 @@
11
8
  <body>
12
9
  <div id="globeViz"></div>
13
10
 
14
- <script>
15
- const weightColor = d3.scaleSequentialSqrt(d3.interpolateYlOrRd)
11
+ <script type="module">
12
+ import { csvParse } from 'https://esm.sh/d3-dsv';
13
+ import { scaleSequentialSqrt } from 'https://esm.sh/d3-scale';
14
+ import { interpolateYlOrRd } from 'https://esm.sh/d3-scale-chromatic';
15
+
16
+ const weightColor = scaleSequentialSqrt(interpolateYlOrRd)
16
17
  .domain([0, 1e7]);
17
18
 
18
19
  const world = new Globe(document.getElementById('globeViz'))
@@ -28,7 +29,7 @@
28
29
  .enablePointerInteraction(false); // performance improvement
29
30
 
30
31
  fetch('../datasets/world_population.csv').then(res => res.text())
31
- .then(csv => d3.csvParse(csv, ({ lat, lng, pop }) => ({ lat: +lat, lng: +lng, pop: +pop })))
32
+ .then(csv => csvParse(csv, ({ lat, lng, pop }) => ({ lat: +lat, lng: +lng, pop: +pop })))
32
33
  .then(data => world.hexBinPointsData(data));
33
34
 
34
35
  // Add auto-rotation
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "globe.gl",
3
- "version": "2.34.2",
3
+ "version": "2.34.3",
4
4
  "description": "UI component for Globe Data Visualization using ThreeJS/WebGL",
5
5
  "type": "module",
6
6
  "unpkg": "dist/globe.gl.min.js",