30:Tb70,{ const containerWidth = width; const containerHeight = 500; const container = html`

`; yield container; const COUNTRY = 'Portugal'; const MAP_CENTER = { lat: 37.6, lng: -16.6, altitude: 0.4 }; const OPACITY = 0.1; const myGlobe = Globe() .width(containerWidth) .height(containerHeight) (container) .globeImageUrl('//cdn.jsdelivr.net/npm/three-globe/example/img/earth-night.jpg') .arcLabel(d => `${d.airline}: ${d.srcIata} → ${d.dstIata}`) .arcStartLat(d => d.srcAirport.lat) .arcStartLng(d => d.srcAirport.lng) .arcEndLat(d => d.dstAirport.lat) .arcEndLng(d => d.dstAirport.lng) .arcColor(d => [`rgba(0, 255, 0, ${OPACITY})`, `rgba(255, 0, 0, ${OPACITY})`]) .arcDashLength(0.4) .arcDashGap(0.2) .arcDashAnimateTime(1500) .onArcHover(hoverArc => myGlobe .arcColor(d => { const op = !hoverArc ? OPACITY : d === hoverArc ? 0.9 : OPACITY / 4; return [`rgba(0, 255, 0, ${op})`, `rgba(255, 0, 0, ${op})`]; }) ) .pointColor(() => 'orange') .pointAltitude(0) .pointRadius(0.04) .pointsMerge(true); // load data const airportParse = ([airportId, name, city, country, iata, icao, lat, lng, alt, timezone, dst, tz, type, source]) => ({ airportId, name, city, country, iata, icao, lat, lng, alt, timezone, dst, tz, type, source }); const routeParse = ([airline, airlineId, srcIata, srcAirportId, dstIata, dstAirportId, codeshare, stops, equipment]) => ({ airline, airlineId, srcIata, srcAirportId, dstIata, dstAirportId, codeshare, stops, equipment}); Promise.all([ fetch('https://raw.githubusercontent.com/jpatokal/openflights/master/data/airports.dat').then(res => res.text()) .then(d => d3.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(([airports, routes]) => { const filteredAirports = airports.filter(d => d.country === COUNTRY); const byIata = indexBy(filteredAirports, 'iata', false); const filteredRoutes = routes .filter(d => byIata.hasOwnProperty(d.srcIata) && byIata.hasOwnProperty(d.dstIata)) // exclude unknown airports .filter(d => d.stops === '0') // non-stop flights only .map(d => Object.assign(d, { srcAirport: byIata[d.srcIata], dstAirport: byIata[d.dstIata] })) // .filter(d => d.srcAirport.country !== d.dstAirport.country); // international routes // .filter(d => d.srcAirport.country === d.dstAirport.country); // domestic routes .filter(d => d.srcAirport.country === COUNTRY && d.dstAirport.country === COUNTRY); // domestic routes within country myGlobe .pointsData(filteredAirports) .arcsData(filteredRoutes) .pointOfView(MAP_CENTER, 4000); }); yield container; }31:T64b,{ const containerWidth = width; const containerHeight = 500; const container = html`

`; yield container; const colorScale = d3.scaleSequentialSqrt(d3.interpolateYlOrRd); // GDP per capita (avoiding countries with small pop) const getVal = feat => feat.properties.GDP_MD_EST / Math.max(1e5, feat.properties.POP_EST); fetch('https://raw.githubusercontent.com/vasturiano/globe.gl/master/example/datasets/ne_110m_admin_0_countries.geojson').then(res => res.json()).then(countries => { const maxVal = Math.max(...countries.features.map(getVal)); colorScale.domain([0, maxVal]); const world = Globe() .width(containerWidth) .height(containerHeight) (container) .globeImageUrl('//cdn.jsdelivr.net/npm/three-globe/example/img/earth-night.jpg') .polygonsData(countries.features) .polygonAltitude(0.06) .polygonCapColor(feat => colorScale(getVal(feat))) .polygonSideColor(() => 'rgba(0, 100, 0, 0.15)') .polygonStrokeColor(() => '#111'); world.polygonLabel(({ properties: d }) => ` ${d.ADMIN} (${d.ISO_A2}):
GDP: ${d.GDP_MD_EST} M$
Population: ${d.POP_EST} `) .onPolygonHover(hoverD => world .polygonAltitude(d => d === hoverD ? 0.12 : 0.06) .polygonCapColor(d => d === hoverD ? 'steelblue' : colorScale(getVal(d))) ) .polygonsTransitionDuration(300) (document.getElementById('globeViz')) }); yield container; }32:T4b6,{ const containerWidth = width; const containerHeight = 500; const container = html`

`; yield container; const world = Globe() .width(containerWidth) .height(containerHeight) (container) .globeImageUrl('//cdn.jsdelivr.net/npm/three-globe/example/img/earth-dark.jpg') .pointOfView({ altitude: 4 }, 5000) .polygonCapColor(feat => 'rgba(200, 0, 0, 0.6)') .polygonSideColor(() => 'rgba(0, 100, 0, 0.05)') .polygonLabel(({ properties: d }) => ` ${d.ADMIN} (${d.ISO_A2})
Population: ${Math.round(+d.POP_EST / 1e4) / 1e2}M `); // Auto-rotate world.controls().autoRotate = true; world.controls().autoRotateSpeed = 0.3; fetch('https://raw.githubusercontent.com/vasturiano/globe.gl/master/example/datasets/ne_110m_admin_0_countries.geojson').then(res => res.json()).then(countries => { world.polygonsData(countries.features); setTimeout(() => world .polygonsTransitionDuration(4000) .polygonAltitude(feat => Math.max(0.1, Math.sqrt(+feat.properties.POP_EST) * 7e-5)) , 3000); }); yield container; }33:T53a,{ const containerWidth = width; const containerHeight = 500; const container = html`

`; yield container; // Gen random data const N = 300; const gData = [...Array(N).keys()].map(() => ({ lat: (Math.random() - 0.5) * 180, lng: (Math.random() - 0.5) * 360, alt: Math.random() * 0.8 + 0.1, radius: Math.random() * 5, color: ['red', 'white', 'blue', 'green'][Math.round(Math.random() * 3)] })); const world = Globe() .width(containerWidth) .height(containerHeight) (container) .globeImageUrl('//cdn.jsdelivr.net/npm/three-globe/example/img/earth-blue-marble.jpg') .bumpImageUrl('//cdn.jsdelivr.net/npm/three-globe/example/img/earth-topology.png') .pointOfView({ altitude: 3.5 }) .customLayerData(gData) .customThreeObject(d => new THREE.Mesh( new THREE.SphereBufferGeometry(d.radius), new THREE.MeshLambertMaterial({ color: d.color }) )) .customThreeObjectUpdate((obj, d) => { Object.assign(obj.position, world.getCoords(d.lat, d.lng, d.alt)); }); (function moveSpheres() { gData.forEach(d => d.lat += 0.2); world.customLayerData(world.customLayerData()); requestAnimationFrame(moveSpheres); })(); yield container; }34:T4e0,{ const containerWidth = width; const containerHeight = 500; const container = html`

`; yield container; const weightColor = d3.scaleSequentialSqrt(d3.interpolateYlOrRd) .domain([0, 1e7]); const world = Globe() .width(containerWidth) .height(containerHeight) (container) .globeImageUrl('//cdn.jsdelivr.net/npm/three-globe/example/img/earth-night.jpg') .bumpImageUrl('//cdn.jsdelivr.net/npm/three-globe/example/img/earth-topology.png') .hexBinPointWeight('pop') .hexAltitude(d => d.sumWeight * 6e-8) .hexBinResolution(4) .hexTopColor(d => weightColor(d.sumWeight)) .hexSideColor(d => weightColor(d.sumWeight)) .hexBinMerge(true) .enablePointerInteraction(false); // performance improvement fetch('https://raw.githubusercontent.com/vasturiano/globe.gl/master/example/datasets/world_population.csv').then(res => res.text()) .then(csv => d3.csvParse(csv, ({ lat, lng, pop }) => ({ lat: +lat, lng: +lng, pop: +pop }))) .then(data => world.hexBinPointsData(data)); // Add auto-rotation world.controls().autoRotate = true; world.controls().autoRotateSpeed = 0.1; yield container; }35:T9ee,{ const containerWidth = width; const containerHeight = 500; const container = html`

`; yield container; // Gen random data const COUNTRY = 'United States'; const OPACITY = 0.1; const myGlobe = Globe() .width(containerWidth) .height(containerHeight) (container) .globeImageUrl('//cdn.jsdelivr.net/npm/three-globe/example/img/earth-night.jpg') .pointOfView({ lat: 39.6, lng: -98.5, altitude: 2 }) // aim at continental US centroid .arcLabel(d => `${d.airline}: ${d.srcIata} → ${d.dstIata}`) .arcStartLat(d => +d.srcAirport.lat) .arcStartLng(d => +d.srcAirport.lng) .arcEndLat(d => +d.dstAirport.lat) .arcEndLng(d => +d.dstAirport.lng) .arcDashLength(0.25) .arcDashGap(1) .arcDashInitialGap(() => Math.random()) .arcDashAnimateTime(4000) .arcColor(d => [`rgba(0, 255, 0, ${OPACITY})`, `rgba(255, 0, 0, ${OPACITY})`]) .arcsTransitionDuration(0) .pointColor(() => 'orange') .pointAltitude(0) .pointRadius(0.02) .pointsMerge(true); // load data const airportParse = ([airportId, name, city, country, iata, icao, lat, lng, alt, timezone, dst, tz, type, source]) => ({ airportId, name, city, country, iata, icao, lat, lng, alt, timezone, dst, tz, type, source }); const routeParse = ([airline, airlineId, srcIata, srcAirportId, dstIata, dstAirportId, codeshare, stops, equipment]) => ({ airline, airlineId, srcIata, srcAirportId, dstIata, dstAirportId, codeshare, stops, equipment}); Promise.all([ fetch('https://raw.githubusercontent.com/jpatokal/openflights/master/data/airports.dat').then(res => res.text()) .then(d => d3.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(([airports, routes]) => { const byIata = indexBy(airports, 'iata', false); const filteredRoutes = routes .filter(d => byIata.hasOwnProperty(d.srcIata) && byIata.hasOwnProperty(d.dstIata)) // exclude unknown airports .filter(d => d.stops === '0') // non-stop flights only .map(d => Object.assign(d, { srcAirport: byIata[d.srcIata], dstAirport: byIata[d.dstIata] })) .filter(d => d.srcAirport.country === COUNTRY && d.dstAirport.country !== COUNTRY); // international routes from country myGlobe .pointsData(airports) .arcsData(filteredRoutes); }); yield container; }36:[] 2e:{"title":"Globe.gl","cells":[{"id":0,"value":"md`# Globe.gl`","pinned":false,"hidden":false,"mode":"ojs"},{"id":5,"value":"md`[Globe.gl](https://vasturiano.github.io/globe.gl/) is a convenience wrapper around the three-globe . \n\nThis very cool looking and promising library is maintained by [vasturiano](https://vasturiano.github.io/globe.gl/) .\n\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":9,"value":"md`Let's port it to Observable...`","pinned":false,"hidden":false,"mode":"ojs"},{"id":143,"value":"md`We are displaying many webgl contexts in one page, this will cause performance problems. Though , we usually need one only context. In that case performance will be very good `","pinned":false,"hidden":false,"mode":"ojs"},{"id":14,"value":"Globe = require(\"globe.gl\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":72,"value":"d3 = require('d3')","pinned":true,"hidden":false,"mode":"ojs"},{"id":128,"value":"THREE = {\n const THREE = window.THREE = await require(\"three@0.99.0/build/three.min.js\");\n await require(\"three@0.99.0/examples/js/controls/OrbitControls.js\").catch(() => {});\n return window.THREE;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":74,"value":"indexBy = require('index-array-by')","pinned":true,"hidden":false,"mode":"ojs"},{"id":34,"value":"md`# Basic`","pinned":false,"hidden":false,"mode":"ojs"},{"id":21,"value":"{\n const containerWidth = width;\n const containerHeight = 500;\n const container = html`

`;\n yield container;\n \n // Gen random data\n const N = 300;\n const gData = [...Array(N).keys()].map(() => ({\n lat: (Math.random() - 0.5) * 180,\n lng: (Math.random() - 0.5) * 360,\n size: Math.random() / 3,\n color: ['red', 'white', 'blue', 'green'][Math.round(Math.random() * 3)]\n }));\n \n \n Globe()\n .globeImageUrl('//cdn.jsdelivr.net/npm/three-globe/example/img/earth-night.jpg')\n .pointsData(gData)\n .pointAltitude('size')\n .pointColor('color')\n .width(containerWidth)\n .height(containerHeight)\n (container)\n \n yield container;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":52,"value":"md`# ArcLinks`","pinned":false,"hidden":false,"mode":"ojs"},{"id":46,"value":"{\n const containerWidth = width;\n const containerHeight = 500;\n const container = html`

`;\n yield container;\n \n // Gen random data\n const N = 20;\n const arcsData = [...Array(N).keys()].map(() => ({\n startLat: (Math.random() - 0.5) * 180,\n startLng: (Math.random() - 0.5) * 360,\n endLat: (Math.random() - 0.5) * 180,\n endLng: (Math.random() - 0.5) * 360,\n color: [['red', 'white', 'blue', 'green'][Math.round(Math.random() * 3)], ['red', 'white', 'blue', 'green'][Math.round(Math.random() * 3)]]\n }));\n Globe()\n .globeImageUrl('//cdn.jsdelivr.net/npm/three-globe/example/img/earth-night.jpg')\n .arcsData(arcsData)\n .arcColor('color')\n .arcDashLength(() => Math.random())\n .arcDashGap(() => Math.random())\n .arcDashAnimateTime(() => Math.random() * 4000 + 500)\n .width(containerWidth)\n .height(containerHeight)\n (container)\n \n yield container;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":55,"value":"md`# Link Highlight`","pinned":false,"hidden":false,"mode":"ojs"},{"id":58,"value":"$30","pinned":true,"hidden":false,"mode":"ojs"},{"id":78,"value":"md`# Choropleth`","pinned":false,"hidden":false,"mode":"ojs"},{"id":76,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":84,"value":"md`# Elevated Polygons`","pinned":false,"hidden":false,"mode":"ojs"},{"id":109,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"},{"id":88,"value":"md`# Map Labels`","pinned":false,"hidden":false,"mode":"ojs"},{"id":111,"value":"{\n const containerWidth = width;\n const containerHeight = 500;\n const container = html`

`;\n yield container;\n \n fetch('https://raw.githubusercontent.com/vasturiano/globe.gl/master/example/datasets/ne_110m_populated_places_simple.geojson').then(res => res.json()).then(places => {\n Globe()\n .width(containerWidth)\n .height(containerHeight)\n (container)\n .globeImageUrl('//cdn.jsdelivr.net/npm/three-globe/example/img/earth-night.jpg')\n .labelsData(places.features)\n .labelLat(d => d.properties.latitude)\n .labelLng(d => d.properties.longitude)\n .labelText(d => d.properties.name)\n .labelSize(d => Math.sqrt(d.properties.pop_max) * 4e-4)\n .labelDotRadius(d => Math.sqrt(d.properties.pop_max) * 4e-4)\n .labelColor(() => 'rgba(255, 165, 0, 0.75)')\n .labelResolution(2)\n (document.getElementById('globeViz'))\n });\n \n \n yield container;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":91,"value":"md`# Custom Layer`","pinned":false,"hidden":false,"mode":"ojs"},{"id":113,"value":"$33","pinned":true,"hidden":false,"mode":"ojs"},{"id":94,"value":"md`# World Population`","pinned":false,"hidden":false,"mode":"ojs"},{"id":115,"value":"$34","pinned":true,"hidden":false,"mode":"ojs"},{"id":104,"value":"md`# US outbound international airline routes`","pinned":false,"hidden":false,"mode":"ojs"},{"id":121,"value":"$35","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W36","stdlib":"1","titling":"auto"}