2a:null 2b:["$","title",null,{"children":"WebGL Globe | Frank Yang | Observable"}] 30:T37eb,function fnBuildGlobe(){ let scale = d3.scaleLinear().domain([altitude.range[0],altitude.range[1]]).range([0,1]); let data = []; //As per data format: https://github.com/dataarts/webgl-globe#data-format for (let i = 0; i < airportData["Latitude_Decimal_Degrees"].length; i++){ let countryFilter = countries.length > 0 ? countries.some(country => country == airportData["Country"][i]) : true; let latFilter = fnInRange(airportData["Latitude_Decimal_Degrees"][i],latitude); let lngFilter = fnInRange(airportData["Longitude_Decimal_Degrees"][i],longitude); let altFilter = fnInRange(airportData["Rate"][i],altitude); if (countryFilter && latFilter && lngFilter && altFilter){ data.push(airportData["Latitude_Decimal_Degrees"][i]); data.push(airportData["Longitude_Decimal_Degrees"][i]); data.push(scale(airportData["Rate"][i])); } //if } //for let globe = new datGlobe(container); globe.addData(data, {format: 'magnitude', name: "GlobeData", animated: false}); globe.createPoints(); globe.animate(); function fnInRange(measure,filter){ return measure >= filter.range[0] && measure <= filter.range[1]; } return html`⏎ Click cell to see code that builds WebGL Globe`; //datGlobe constructor function datGlobe(container, opts) { opts = opts || {}; var colorFn = opts.colorFn || function(x) { var c = new THREE.Color(); c.setHSL( ( 0.6 - ( x * 0.5 ) ), 1.0, 0.5 ); return c; }; //var imgDir = opts.imgDir || '/globe/'; //worldJPG_URL is string in ObservableHQ cell var imgURL = opts.imgURL || worldJPG_URL; var Shaders = { 'earth' : { uniforms: { 'texture': { type: 't', value: null } }, vertexShader: [ 'varying vec3 vNormal;', 'varying vec2 vUv;', 'void main() {', 'gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );', 'vNormal = normalize( normalMatrix * normal );', 'vUv = uv;', '}' ].join('\n'), fragmentShader: [ 'uniform sampler2D texture;', 'varying vec3 vNormal;', 'varying vec2 vUv;', 'void main() {', 'vec3 diffuse = texture2D( texture, vUv ).xyz;', 'float intensity = 1.05 - dot( vNormal, vec3( 0.0, 0.0, 1.0 ) );', 'vec3 atmosphere = vec3( 1.0, 1.0, 1.0 ) * pow( intensity, 3.0 );', 'gl_FragColor = vec4( diffuse + atmosphere, 1.0 );', '}' ].join('\n') }, 'atmosphere' : { uniforms: {}, vertexShader: [ 'varying vec3 vNormal;', 'void main() {', 'vNormal = normalize( normalMatrix * normal );', 'gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );', '}' ].join('\n'), fragmentShader: [ 'varying vec3 vNormal;', 'void main() {', 'float intensity = pow( 0.8 - dot( vNormal, vec3( 0, 0, 1.0 ) ), 12.0 );', 'gl_FragColor = vec4( 1.0, 1.0, 1.0, 1.0 ) * intensity;', '}' ].join('\n') } }; var camera, scene, renderer, w, h; var mesh, atmosphere, point; var overRenderer; var curZoomSpeed = 0; var zoomSpeed = 50; var mouse = { x: 0, y: 0 }, mouseOnDown = { x: 0, y: 0 }; var rotation = { x: 0, y: 0 }, target = { x: Math.PI*1.7, y: Math.PI / 5.0 }, targetOnDown = { x: 0, y: 0 }; var distance = 100000, distanceTarget = 100000; var padding = 40; var PI_HALF = Math.PI / 2; var ROTATIONSPEED = 0.003; var k = ROTATIONSPEED; var f = false; function init() { container.style.color = '#fff'; container.style.font = '13px/20px Arial, sans-serif'; var shader, uniforms, material; w = container.offsetWidth || window.innerWidth; h = container.offsetHeight || window.innerHeight; camera = new THREE.PerspectiveCamera(26, w / h, 1, 10000); camera.position.z = distance; scene = new THREE.Scene(); var geometry = new THREE.SphereGeometry(150, 40, 30); shader = Shaders['earth']; uniforms = THREE.UniformsUtils.clone(shader.uniforms); //uniforms['texture'].value = THREE.ImageUtils.loadTexture(imgDir+'world.jpg'); const textureLoader = new THREE.TextureLoader; uniforms['texture'].value = textureLoader.load(imgURL); material = new THREE.ShaderMaterial({ uniforms: uniforms, vertexShader: shader.vertexShader, fragmentShader: shader.fragmentShader }); mesh = new THREE.Mesh(geometry, material); mesh.rotation.y = Math.PI; scene.add(mesh); shader = Shaders['atmosphere']; uniforms = THREE.UniformsUtils.clone(shader.uniforms); material = new THREE.ShaderMaterial({ uniforms: uniforms, vertexShader: shader.vertexShader, fragmentShader: shader.fragmentShader, side: THREE.BackSide, blending: THREE.AdditiveBlending, transparent: true }); mesh = new THREE.Mesh(geometry, material); mesh.scale.set( 1.1, 1.1, 1.1 ); scene.add(mesh); geometry = new THREE.BoxGeometry(0.75, 0.75, 1); //geometry = new THREE.CubeGeometry(0.75, 0.75, 1); geometry.applyMatrix(new THREE.Matrix4().makeTranslation(0,0,-0.5)); point = new THREE.Mesh(geometry); renderer = new THREE.WebGLRenderer({antialias: true}); renderer.setSize(w, h); renderer.domElement.style.position = 'absolute'; container.appendChild(renderer.domElement); container.addEventListener('mousedown', onMouseDown, false); //container.addEventListener('mousewheel', onMouseWheel, false); container.addEventListener('wheel', onMouseWheel, false); document.addEventListener('keydown', onDocumentKeyDown, false); //window.addEventListener('resize', onWindowResize, false); container.addEventListener('mouseover', function() { overRenderer = true; }, false); container.addEventListener('mouseout', function() { overRenderer = false; }, false); } //init const addData = function(data, opts) { var lat, lng, size, color, i, step, colorFnWrapper; opts.animated = opts.animated || false; this.is_animated = opts.animated; opts.format = opts.format || 'magnitude'; // other option is 'legend' //console.log(opts.format); if (opts.format === 'magnitude') { step = 3; colorFnWrapper = function(data, i) { return colorFn(data[i+2]); } } else if (opts.format === 'legend') { step = 4; colorFnWrapper = function(data, i) { return colorFn(data[i+3]); } } else { throw('error: format not supported: '+opts.format); } if (opts.animated) { if (this._baseGeometry === undefined) { this._baseGeometry = new THREE.Geometry(); for (i = 0; i < data.length; i += step) { lat = data[i]; lng = data[i + 1]; // size = data[i + 2]; color = colorFnWrapper(data,i); size = 0; addPoint(lat, lng, size, color, this._baseGeometry); } } if(this._morphTargetId === undefined) { this._morphTargetId = 0; } else { this._morphTargetId += 1; } opts.name = opts.name || 'morphTarget'+this._morphTargetId; } var subgeo = new THREE.Geometry(); for (i = 0; i < data.length; i += step) { lat = data[i]; lng = data[i + 1]; color = colorFnWrapper(data,i); size = data[i + 2]; size = size*150; addPoint(lat, lng, size, color, subgeo); } if (opts.animated) { this._baseGeometry.morphTargets.push({'name': opts.name, vertices: subgeo.vertices}); } else { this._baseGeometry = subgeo; } }; function createPoints() { if (this._baseGeometry !== undefined) { if (this.is_animated === false) { this.points = new THREE.Mesh(this._baseGeometry, new THREE.MeshBasicMaterial({ color: 0xffffff, vertexColors: THREE.FaceColors, morphTargets: false })); } else { if (this._baseGeometry.morphTargets.length < 8) { console.log('t l',this._baseGeometry.morphTargets.length); var padding = 8-this._baseGeometry.morphTargets.length; console.log('padding', padding); for(var i=0; i<=padding; i++) { console.log('padding',i); this._baseGeometry.morphTargets.push({'name': 'morphPadding'+i, vertices: this._baseGeometry.vertices } ); } } this.points = new THREE.Mesh(this._baseGeometry, new THREE.MeshBasicMaterial({ color: 0xffffff, vertexColors: THREE.FaceColors, morphTargets: true })); } scene.add(this.points); } } function addPoint(lat, lng, size, color, subgeo) { var phi = (90 - lat) * Math.PI / 180; var theta = (180 - lng) * Math.PI / 180; point.position.x = 150 * Math.sin(phi) * Math.cos(theta); point.position.y = 150 * Math.cos(phi); point.position.z = 150 * Math.sin(phi) * Math.sin(theta); point.lookAt(mesh.position); point.scale.z = Math.max( size, 0.1 ); // avoid non-invertible matrix point.updateMatrix(); for (var i = 0; i < point.geometry.faces.length; i++) { point.geometry.faces[i].color = color; } //THREE.GeometryUtils.merge(subgeo, point); subgeo.merge(point.geometry, point.matrix); } function onMouseDown(event) { event.preventDefault(); k = 0; f = true; container.addEventListener('mousemove', onMouseMove, false); container.addEventListener('mouseup', onMouseUp, false); container.addEventListener('mouseout', onMouseOut, false); target.y = rotation.y; mouseOnDown.x = - event.clientX; mouseOnDown.y = event.clientY; targetOnDown.x = target.x; targetOnDown.y = target.y; container.style.cursor = 'move'; } function onMouseMove(event) { mouse.x = - event.clientX; mouse.y = event.clientY; var zoomDamp = distance/1000; target.x = targetOnDown.x + (mouse.x - mouseOnDown.x) * 0.005 * zoomDamp; target.y = targetOnDown.y + (mouse.y - mouseOnDown.y) * 0.005 * zoomDamp; target.y = target.y > PI_HALF ? PI_HALF : target.y; target.y = target.y < - PI_HALF ? - PI_HALF : target.y; } function onMouseUp(event) { k = ROTATIONSPEED; f = false; container.removeEventListener('mousemove', onMouseMove, false); container.removeEventListener('mouseup', onMouseUp, false); container.removeEventListener('mouseout', onMouseOut, false); container.style.cursor = 'auto'; } function onMouseOut(event) { k = ROTATIONSPEED; f = false; container.removeEventListener('mousemove', onMouseMove, false); container.removeEventListener('mouseup', onMouseUp, false); container.removeEventListener('mouseout', onMouseOut, false); } function onMouseWheel(event) { event.preventDefault(); if (overRenderer) { //zoom(event.wheelDeltaY * 0.3); zoom(event.deltaY* 0.3 * 10); } return false; } function onDocumentKeyDown(event) { switch (event.keyCode) { case 38: zoom(100); event.preventDefault(); break; case 40: zoom(-100); event.preventDefault(); break; } } function onWindowResize( event ) { camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); renderer.setSize( window.innerWidth, window.innerHeight ); } function zoom(delta) { distanceTarget -= delta; distanceTarget = distanceTarget > 1100 ? 1100 : distanceTarget; distanceTarget = distanceTarget < 350 ? 350 : distanceTarget; } function animate() { requestAnimationFrame(animate); render(); } function render() { zoom(curZoomSpeed); target.x -= k; rotation.x += (target.x - rotation.x) * 0.2; if (f == true){ rotation.y += (target.y - rotation.y) * 0.2;} if (f == false){ target.y = Math.PI / 5.0; rotation.y += (target.y - rotation.y) * 0.02; }; distance += (distanceTarget - distance) * 0.3; camera.position.x = distance * Math.sin(rotation.x) * Math.cos(rotation.y); camera.position.y = distance * Math.sin(rotation.y); camera.position.z = distance * Math.cos(rotation.x) * Math.cos(rotation.y); camera.lookAt(mesh.position); renderer.render(scene, camera); } init(); this.animate = animate; this.__defineGetter__('time', function() { return this._time || 0; }); this.__defineSetter__('time', function(t) { var validMorphs = []; var morphDict = this.points.morphTargetDictionary; for(var k in morphDict) { if(k.indexOf('morphPadding') < 0) { validMorphs.push(morphDict[k]); } } validMorphs.sort(); var l = validMorphs.length-1; var scaledt = t*l+1; var index = Math.floor(scaledt); for (var i=0;i= 0) { this.points.morphTargetInfluences[lastIndex] = 1 - leftover; } this.points.morphTargetInfluences[index] = leftover; this._time = t; }); this.addData = addData; this.createPoints = createPoints; this.renderer = renderer; this.scene = scene; return this; } //datGlobe }() // IIFE: https://www.javatpoint.com/es6-immediately-invoked-function-expression 31:[{"id":"db7763d47acffa25e100f5ff53f9006fe856c6507f7ea87e8ac28f177a33d131a3487a5c4bdde27bda29ff58fc02bd77f336eb2b8d74277257f691b565146b92","href":"https://static.observableusercontent.com/files/db7763d47acffa25e100f5ff53f9006fe856c6507f7ea87e8ac28f177a33d131a3487a5c4bdde27bda29ff58fc02bd77f336eb2b8d74277257f691b565146b92","name":"data11.json","type":"application/json","lastModified":1657686235566.275,"size":29317},{"id":"f0d864a3464f91d541a30bbbf597a4ac81be8e793fe11cb3fb97a2a0215b02b7b63f64351f2aaf465fb9e418dcb006dd7dadf3790497424f074fa34ef0253556","href":"https://static.observableusercontent.com/files/f0d864a3464f91d541a30bbbf597a4ac81be8e793fe11cb3fb97a2a0215b02b7b63f64351f2aaf465fb9e418dcb006dd7dadf3790497424f074fa34ef0253556","name":"data22.json","type":"application/json","lastModified":1657686235556.372,"size":23890},{"id":"a28c041722431387bd4584c93b5468754786683ac6c967419a30855ec1dc004674943ccb280bd60532a5b9607f4388cf852977e220275ff340f084cc7f29cf98","href":"https://static.observableusercontent.com/files/a28c041722431387bd4584c93b5468754786683ac6c967419a30855ec1dc004674943ccb280bd60532a5b9607f4388cf852977e220275ff340f084cc7f29cf98","name":"data88.json","type":"application/json","lastModified":1657686235598.05,"size":30887},{"id":"b5c88c6195363221dc2409be61c436dd6fd389611ed6be539ebd67754cc5961d2d25ffac8e4d3da027fd2ef470601364a9a1234fdca38e27e7f98d3785275d4e","href":"https://static.observableusercontent.com/files/b5c88c6195363221dc2409be61c436dd6fd389611ed6be539ebd67754cc5961d2d25ffac8e4d3da027fd2ef470601364a9a1234fdca38e27e7f98d3785275d4e","name":"data55.json","type":"application/json","lastModified":1657686235648.526,"size":41180},{"id":"e6853807e4f500508463a441f4d293ab0632711cc2e8f3453f3a7a25f5b1a42cb94b97ad3cb7a61787474a7c2c79029f63236395ed9532f989a61e98ad9efac4","href":"https://static.observableusercontent.com/files/e6853807e4f500508463a441f4d293ab0632711cc2e8f3453f3a7a25f5b1a42cb94b97ad3cb7a61787474a7c2c79029f63236395ed9532f989a61e98ad9efac4","name":"data33.json","type":"application/json","lastModified":1657686235711.439,"size":62403},{"id":"0bee55ed9f81f56ba656bc712b506edc29ad0dad3b43433397e195b17f3b3148971bcec9e5e7f435cfaf5c67bb2ccab7dacf4cbbc183aeb52c2baa5460a3b41b","href":"https://static.observableusercontent.com/files/0bee55ed9f81f56ba656bc712b506edc29ad0dad3b43433397e195b17f3b3148971bcec9e5e7f435cfaf5c67bb2ccab7dacf4cbbc183aeb52c2baa5460a3b41b","name":"data44.json","type":"application/json","lastModified":1657686235563.393,"size":47665},{"id":"6a115bd8eb861218b1ec74ad05e61801887a692fd9a7f8914ea1f82e585f773f068f71d1db20df001499b3712d5b8e45fb9cf17994e4dd77b39b039c8b44bfb6","href":"https://static.observableusercontent.com/files/6a115bd8eb861218b1ec74ad05e61801887a692fd9a7f8914ea1f82e585f773f068f71d1db20df001499b3712d5b8e45fb9cf17994e4dd77b39b039c8b44bfb6","name":"data66.json","type":"application/json","lastModified":1657686235497.23,"size":21570},{"id":"348706ce0659cc4bfe154628e17ab7d5b115332aa328b2c1f15511bd37ede54a4aa00f56638fbf1acce9adfef54104a762822f485609dfe275db43f8a1b662b5","href":"https://static.observableusercontent.com/files/348706ce0659cc4bfe154628e17ab7d5b115332aa328b2c1f15511bd37ede54a4aa00f56638fbf1acce9adfef54104a762822f485609dfe275db43f8a1b662b5","name":"data77.json","type":"application/json","lastModified":1657686235518.056,"size":29226},{"id":"9f1601dc4125d7fcde8c62df14377d43e5f0fdadf3334ffd034e9d1bc26fa069d95870a0498a733ad5a173f77266cf0212b7a1501f3972b4c07f6e7c062266f9","href":"https://static.observableusercontent.com/files/9f1601dc4125d7fcde8c62df14377d43e5f0fdadf3334ffd034e9d1bc26fa069d95870a0498a733ad5a173f77266cf0212b7a1501f3972b4c07f6e7c062266f9","name":"data6@4.json","type":"application/json","lastModified":1657691521150.213,"size":23508},{"id":"ad976cfb3b60f90aa4161035aa8bf31e1d804da6730e15e9330fcf57d07fbcbbcfd4ef3b0e71a769d5ac3633ba144dec337e0cdfbd99c56fd7415f61abdf6e3e","href":"https://static.observableusercontent.com/files/ad976cfb3b60f90aa4161035aa8bf31e1d804da6730e15e9330fcf57d07fbcbbcfd4ef3b0e71a769d5ac3633ba144dec337e0cdfbd99c56fd7415f61abdf6e3e","name":"data555.json","type":"application/json","lastModified":1657688990651.58,"size":40993},{"id":"db7763d47acffa25e100f5ff53f9006fe856c6507f7ea87e8ac28f177a33d131a3487a5c4bdde27bda29ff58fc02bd77f336eb2b8d74277257f691b565146b92","href":"https://static.observableusercontent.com/files/db7763d47acffa25e100f5ff53f9006fe856c6507f7ea87e8ac28f177a33d131a3487a5c4bdde27bda29ff58fc02bd77f336eb2b8d74277257f691b565146b92","name":"data111.json","type":"application/json","lastModified":1657688990545.376,"size":29317},{"id":"0bee55ed9f81f56ba656bc712b506edc29ad0dad3b43433397e195b17f3b3148971bcec9e5e7f435cfaf5c67bb2ccab7dacf4cbbc183aeb52c2baa5460a3b41b","href":"https://static.observableusercontent.com/files/0bee55ed9f81f56ba656bc712b506edc29ad0dad3b43433397e195b17f3b3148971bcec9e5e7f435cfaf5c67bb2ccab7dacf4cbbc183aeb52c2baa5460a3b41b","name":"data444.json","type":"application/json","lastModified":1657688990630.499,"size":47665},{"id":"a28c041722431387bd4584c93b5468754786683ac6c967419a30855ec1dc004674943ccb280bd60532a5b9607f4388cf852977e220275ff340f084cc7f29cf98","href":"https://static.observableusercontent.com/files/a28c041722431387bd4584c93b5468754786683ac6c967419a30855ec1dc004674943ccb280bd60532a5b9607f4388cf852977e220275ff340f084cc7f29cf98","name":"data888.json","type":"application/json","lastModified":1657688990726.217,"size":30887},{"id":"348706ce0659cc4bfe154628e17ab7d5b115332aa328b2c1f15511bd37ede54a4aa00f56638fbf1acce9adfef54104a762822f485609dfe275db43f8a1b662b5","href":"https://static.observableusercontent.com/files/348706ce0659cc4bfe154628e17ab7d5b115332aa328b2c1f15511bd37ede54a4aa00f56638fbf1acce9adfef54104a762822f485609dfe275db43f8a1b662b5","name":"data777.json","type":"application/json","lastModified":1657688990685.292,"size":29226},{"id":"6919ca1377c541cee44daa33c6d37ee7c49c0a427765a775d240af8e22d917901ff1ba13b7e17425948291ffec104ed2391a3bf7d8e0f91ba9a5d77f99698504","href":"https://static.observableusercontent.com/files/6919ca1377c541cee44daa33c6d37ee7c49c0a427765a775d240af8e22d917901ff1ba13b7e17425948291ffec104ed2391a3bf7d8e0f91ba9a5d77f99698504","name":"data666.json","type":"application/json","lastModified":1657688990659.147,"size":32896},{"id":"e6853807e4f500508463a441f4d293ab0632711cc2e8f3453f3a7a25f5b1a42cb94b97ad3cb7a61787474a7c2c79029f63236395ed9532f989a61e98ad9efac4","href":"https://static.observableusercontent.com/files/e6853807e4f500508463a441f4d293ab0632711cc2e8f3453f3a7a25f5b1a42cb94b97ad3cb7a61787474a7c2c79029f63236395ed9532f989a61e98ad9efac4","name":"data333.json","type":"application/json","lastModified":1657688990600.058,"size":62403},{"id":"f0d864a3464f91d541a30bbbf597a4ac81be8e793fe11cb3fb97a2a0215b02b7b63f64351f2aaf465fb9e418dcb006dd7dadf3790497424f074fa34ef0253556","href":"https://static.observableusercontent.com/files/f0d864a3464f91d541a30bbbf597a4ac81be8e793fe11cb3fb97a2a0215b02b7b63f64351f2aaf465fb9e418dcb006dd7dadf3790497424f074fa34ef0253556","name":"data222.json","type":"application/json","lastModified":1657688990498.692,"size":23890},{"id":"ad976cfb3b60f90aa4161035aa8bf31e1d804da6730e15e9330fcf57d07fbcbbcfd4ef3b0e71a769d5ac3633ba144dec337e0cdfbd99c56fd7415f61abdf6e3e","href":"https://static.observableusercontent.com/files/ad976cfb3b60f90aa4161035aa8bf31e1d804da6730e15e9330fcf57d07fbcbbcfd4ef3b0e71a769d5ac3633ba144dec337e0cdfbd99c56fd7415f61abdf6e3e","name":"data5@1.json","type":"application/json","lastModified":1657689664416.887,"size":40993},{"id":"e6853807e4f500508463a441f4d293ab0632711cc2e8f3453f3a7a25f5b1a42cb94b97ad3cb7a61787474a7c2c79029f63236395ed9532f989a61e98ad9efac4","href":"https://static.observableusercontent.com/files/e6853807e4f500508463a441f4d293ab0632711cc2e8f3453f3a7a25f5b1a42cb94b97ad3cb7a61787474a7c2c79029f63236395ed9532f989a61e98ad9efac4","name":"data3@1.json","type":"application/json","lastModified":1657689664261.09,"size":62403},{"id":"348706ce0659cc4bfe154628e17ab7d5b115332aa328b2c1f15511bd37ede54a4aa00f56638fbf1acce9adfef54104a762822f485609dfe275db43f8a1b662b5","href":"https://static.observableusercontent.com/files/348706ce0659cc4bfe154628e17ab7d5b115332aa328b2c1f15511bd37ede54a4aa00f56638fbf1acce9adfef54104a762822f485609dfe275db43f8a1b662b5","name":"data7@1.json","type":"application/json","lastModified":1657689664505.833,"size":29226},{"id":"a28c041722431387bd4584c93b5468754786683ac6c967419a30855ec1dc004674943ccb280bd60532a5b9607f4388cf852977e220275ff340f084cc7f29cf98","href":"https://static.observableusercontent.com/files/a28c041722431387bd4584c93b5468754786683ac6c967419a30855ec1dc004674943ccb280bd60532a5b9607f4388cf852977e220275ff340f084cc7f29cf98","name":"data8@1.json","type":"application/json","lastModified":1657689664358.061,"size":30887},{"id":"c7c56513bdaf829b51510d31604e1862101fd2d6626c9dbdb238b322a7c59ef13840754beab089bd3773e9f38a1adf6d2f81ebb8ac52e9fdbecc946046a07285","href":"https://static.observableusercontent.com/files/c7c56513bdaf829b51510d31604e1862101fd2d6626c9dbdb238b322a7c59ef13840754beab089bd3773e9f38a1adf6d2f81ebb8ac52e9fdbecc946046a07285","name":"data6@8.json","type":"application/json","lastModified":1657692808259.404,"size":21123},{"id":"0bee55ed9f81f56ba656bc712b506edc29ad0dad3b43433397e195b17f3b3148971bcec9e5e7f435cfaf5c67bb2ccab7dacf4cbbc183aeb52c2baa5460a3b41b","href":"https://static.observableusercontent.com/files/0bee55ed9f81f56ba656bc712b506edc29ad0dad3b43433397e195b17f3b3148971bcec9e5e7f435cfaf5c67bb2ccab7dacf4cbbc183aeb52c2baa5460a3b41b","name":"data4@1.json","type":"application/json","lastModified":1657689664449.593,"size":47665},{"id":"7c4b48d533516638739a5790e327d8549fd152af39d0ade4978eb3ba4b90b123acf10a9312365b890865ebb48cf5980aa536426f21f66699359d2409ab8cc25c","href":"https://static.observableusercontent.com/files/7c4b48d533516638739a5790e327d8549fd152af39d0ade4978eb3ba4b90b123acf10a9312365b890865ebb48cf5980aa536426f21f66699359d2409ab8cc25c","name":"data6@10.json","type":"application/json","lastModified":1657693445527.071,"size":20594},{"id":"412e680603493264be72e06bb2b91d23239b070fea9735ec13ebaca4e8b59f6a466861f6961a9d42dd7a2b3fda4336c45cc9f4d9e9b8826949d8c8503c531097","href":"https://static.observableusercontent.com/files/412e680603493264be72e06bb2b91d23239b070fea9735ec13ebaca4e8b59f6a466861f6961a9d42dd7a2b3fda4336c45cc9f4d9e9b8826949d8c8503c531097","name":"data6@2.json","type":"application/json","lastModified":1657690455118.981,"size":21774}] 2e:{"id":"586d48bb44149bf6","slug":"webgl-globe","title":"WebGL Globe","thumbnail":"b414adc4af6f8e79fe8f67737cd3a5a2e0dbc783a53e3b69aee201978032ab9a","access_level":"public","create_time":"$D2022-07-09T16:47:07.400Z","update_time":"$D2022-07-13T06:24:20.575Z","view_time":null,"first_public_time":"$D2022-07-13T04:27:23.599Z","has_unpublished_edits":null,"fork":{"id":"a73ac79a233b7e61","slug":"webgl-globe","title":"WebGL Globe","owner":{"id":"f57b9f8a19d28778","login":"mariodelgadosr","name":"Mario Delgado "}},"stars":0,"starred":false,"owner":{"type":"team","id":"236d5d82467ccf64","login":"whoisfrankyang","name":"Frank Yang","avatar_url":"https://avatars-next.observableusercontent.com/6b9e7324e8b3093b153430327b6a8157e3691c93d0be616f33de4a8332cc797d","tier":"starter_2024"},"version":550,"publish_version":550,"role":null,"authored":false,"authors":[{"type":"individual","id":"dcec53845674ab1d","login":"whoisfrankyang","name":"Frank Yang","avatar_url":"https://avatars-next.observableusercontent.com/6b9e7324e8b3093b153430327b6a8157e3691c93d0be616f33de4a8332cc797d","tier":null}],"members":[{"type":"individual","id":"dcec53845674ab1d","login":"whoisfrankyang","name":"Frank Yang","avatar_url":"https://avatars-next.observableusercontent.com/6b9e7324e8b3093b153430327b6a8157e3691c93d0be616f33de4a8332cc797d","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"WebGL Globe","cells":[{"id":0,"value":"md`# WebGL Globe`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"md`## Adapted from:\n * [Night Skies — Lights and Light Pollution WebGL Globe](https://observablehq.com/@jashkenas/night-skies-lights-and-light-pollution-globe)\n * [WebGL Globe](https://github.com/dataarts/webgl-globe)\n * [Airport Data](http://www.partow.net/miscellaneous/airportdatabase/)\n * [Data driven range sliders](https://observablehq.com/@bumbeishvili/data-driven-range-sliders)\n * [Select Filter](https://observablehq.com/@jashkenas/inputs#selectDemo)\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":231,"value":"md`#### Note: Collaborations with [@bumbeishvili](https://observablehq.com/@bumbeishvili) contributed toward enhanced filtering logic.` ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":169,"value":"md`## Visualization of altitudes for world's major airports:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":46,"value":"container = html`

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":431,"value":"ICAO_Code= FileAttachment(\"data111.json\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":441,"value":"IATA_Code = FileAttachment(\"data222.json\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":442,"value":"Airport_Name = FileAttachment(\"data3@1.json\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":443,"value":"City = FileAttachment(\"data4@1.json\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":444,"value":" Country = FileAttachment(\"data5@1.json\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":445,"value":"Rate = FileAttachment(\"data6@10.json\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":446,"value":"Latitude_Decimal_Degrees = FileAttachment(\"data7@1.json\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":447,"value":"Longitude_Decimal_Degrees = FileAttachment(\"data8@1.json\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":438,"value":"airportData = Object({ICAO_Code: ICAO_Code,\n IATA_Code: IATA_Code,\n Airport_Name: Airport_Name,\n City: City,\n Country: Country,\n Rate: Rate,\n Latitude_Decimal_Degrees: Latitude_Decimal_Degrees,\n Longitude_Decimal_Degrees: Longitude_Decimal_Degrees})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"//Wrangled Data from http://www.partow.net/miscellaneous/airportdatabase/\nairportData2 = d3.json('https://gist.githubusercontent.com/MarioDelgadoSr/2a74c279eb984e755706940288494af3/raw/514a2e08c473e095b4a077b5416282f75d902b1e/airportData.js');","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":266,"value":"md`## Country [filter](https://observablehq.com/@jashkenas/inputs#selectDemo) for the airportData JSON:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":263,"value":"viewof countries = select({\n description: \"Country(ies)\",\n options: [...new Set(airportData.Country)].sort(),\n size: 5,\n multiple: true\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":172,"value":"md`## Range [filters](https://observablehq.com/@bumbeishvili/data-driven-range-sliders) for the airportData JSON:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":121,"value":"md`Min/Max [Altitude](https://en.wikipedia.org/wiki/Altitude) (meters):`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":184,"value":"viewof altitude = {btnResetAlt; return rangeSlider(airportData[\"Rate\"], d=>d)}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":237,"value":"viewof btnResetAlt = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":143,"value":"md`Min/Max [Latitude](https://en.wikipedia.org/wiki/Latitude) (degrees):`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":200,"value":"viewof latitude = {btnResetLat; return rangeSlider(airportData[\"Latitude_Decimal_Degrees\"], d=>d)}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":245,"value":"viewof btnResetLat = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":146,"value":"md`Min/Max [Longitude](https://en.wikipedia.org/wiki/Longitude) (degrees):`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":207,"value":"viewof longitude = {btnResetLng; return rangeSlider(airportData[\"Longitude_Decimal_Degrees\"], d=>d)}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":251,"value":"viewof btnResetLng = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":259,"value":"md`### Source Code:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":316,"value":"$30","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":227,"value":"md`### Image used for globe's texture:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":52,"value":"//Image is hosted in a comment associated with https://gist.github.com/MarioDelgadoSr/2a74c279eb984e755706940288494af3\n//worldJPG_URL is used by datGlobe constructor for the texture\nworldJPG_URL = \"https://gist.githubusercontent.com/MarioDelgadoSr/2a74c279eb984e755706940288494af3/raw/f03c3a0bc942f0835286b750a390cbbc0492bde6/world.jpg\";","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":49,"value":"imagePreview = {\n const img = DOM.element(\"img\");\n img.src = worldJPG_URL;\n img.style.maxHeight = \"350px\";\n return img;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":183,"value":"import {rangeSlider} from \"@bumbeishvili/utils\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":267,"value":"import {select} from \"@jashkenas/inputs\"\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":38,"value":"//D3 Reference\nd3 = require(\"d3@6\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":29,"value":"// THREE JS Module\nTHREE = {\n const THREE = window.THREE = await require(\"three@0.99.0/build/three.min.js\");\n return window.THREE;\n //const THREE = window.THREE = await require('three');\n //return THREE; \n \n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"//https://github.com/sole/tween.js\n//TWEEN = require('@tweenjs/tween.js');\nTWEEN = require(\"https://cdnjs.cloudflare.com/ajax/libs/tween.js/16.3.5/Tween.min.js\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W31","stdlib":"1"}} 2f:"$2e:body"