2b:null 2c:["$","title",null,{"children":"Untitled | Eduardo Belluti | Observable"}] 31:T415,const resorts = [ { name: "Valle Nevado", country: "Chile", coordinates: [-70.248, -33.353], elevation: 3025 }, { name: "La Parva", country: "Chile", coordinates: [-70.287, -33.333], elevation: 2750 }, { name: "El Colorado", country: "Chile", coordinates: [-70.293, -33.348], elevation: 2430 }, { name: "Portillo", country: "Chile", coordinates: [-70.129, -32.837], elevation: 2880 }, { name: "Las Leñas", country: "Argentina", coordinates: [-70.082, -35.145], elevation: 2240 }, { name: "Nevados de Chillán", country: "Chile", coordinates: [-71.414, -36.903], elevation: 1650 }, { name: "Corralco", country: "Chile", coordinates: [-71.503, -38.407], elevation: 1550 }, { name: "Chapelco", country: "Argentina", coordinates: [-71.29, -40.20], elevation: 1250 }, { name: "Cerro Catedral", country: "Argentina", coordinates: [-71.446, -41.167], elevation: 1030 } ];32:T1493,const andesMap = (() => { const { Deck, GeoJsonLayer, PathLayer, ScatterplotLayer, TextLayer } = deckLib; const HEIGHT = 720; const container = html`

South America

The Andes

Explore ski destinations along the world’s longest continental mountain range.

`; const canvas = container.querySelector("canvas"); const makeLayers = time => { const pulse = (Math.sin(time / 650) + 1) / 2; return [ new GeoJsonLayer({ id: "south-america", data: southAmerica, filled: true, stroked: true, pickable: true, autoHighlight: true, getFillColor: [10, 25, 39, 230], getLineColor: [99, 163, 227, 100], getLineWidth: 1, lineWidthUnits: "pixels", highlightColor: [207, 112, 39, 50] }), new PathLayer({ id: "andes-glow", data: [{path: andesPath}], getPath: d => d.path, getColor: [207, 112, 39, 40], getWidth: 16 + pulse * 10, widthUnits: "pixels", capRounded: true, jointRounded: true }), new PathLayer({ id: "andes-line", data: [{path: andesPath}], getPath: d => d.path, getColor: [217, 127, 58, 230], getWidth: 2.5, widthUnits: "pixels", capRounded: true, jointRounded: true }), new ScatterplotLayer({ id: "resort-pulses", data: resorts, getPosition: d => d.coordinates, getRadius: (d, {index}) => 18000 + 9000 * Math.sin(time / 600 + index * 0.8), radiusUnits: "meters", getFillColor: [99, 163, 227, 30], getLineColor: [99, 163, 227, 100], stroked: true, getLineWidth: 1, lineWidthUnits: "pixels" }), new ScatterplotLayer({ id: "resort-points", data: resorts, pickable: true, autoHighlight: true, getPosition: d => d.coordinates, getRadius: 6500, radiusUnits: "meters", radiusMinPixels: 5, radiusMaxPixels: 10, getFillColor: [207, 112, 39, 255], getLineColor: [255, 255, 255, 230], getLineWidth: 1.5, lineWidthUnits: "pixels", highlightColor: [217, 127, 58, 255] }), new TextLayer({ id: "resort-labels", data: resorts, getPosition: d => d.coordinates, getText: d => d.name, getColor: [245, 245, 243, 220], getSize: 12, sizeUnits: "pixels", getPixelOffset: [10, -10], getTextAnchor: "start", getAlignmentBaseline: "bottom", fontFamily: "Inter, system-ui, sans-serif", billboard: true }) ]; }; const map = new Deck({ canvas, width, height: HEIGHT, useDevicePixels: true, initialViewState: { longitude: -69, latitude: -24, zoom: 2.45, pitch: 28, bearing: 4 }, controller: true, layers: makeLayers(0), getTooltip: ({object}) => { if (!object?.name) return null; return { html: ` ${object.name}

${object.country}

${object.elevation.toLocaleString()} m

`, style: { backgroundColor: "rgba(4, 10, 17, 0.96)", color: "#f5f5f3", fontFamily: "Inter, system-ui, sans-serif", fontSize: "12px", padding: "10px 12px", border: "1px solid rgba(99, 163, 227, 0.25)", borderRadius: "8px" } }; } }); let animationFrame; function animate(time) { map.setProps({ layers: makeLayers(time) }); animationFrame = requestAnimationFrame(animate); } animationFrame = requestAnimationFrame(animate); invalidation.then(() => { cancelAnimationFrame(animationFrame); map.finalize(); }); return container; })(); display(andesMap);33:[] 2f:{"id":"66289fd37cca3c7a","slug":"andes","title":"","thumbnail":"224b552a74493649209fc14705e1de13c52e78423d1801b471476547c4a94f18","access_level":"public","create_time":"$D2026-09-09T17:07:51.806Z","update_time":"$D2026-09-09T18:04:04.016Z","view_time":null,"first_public_time":"$D2026-09-09T17:47:30.272Z","fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"53010a9da96b9061","login":"eduardo-belluti","name":"Eduardo Belluti","avatar_url":"https://avatars-next.observableusercontent.com/d6cb66999ee4424f4de8147b1a598c04711dabf780d9d3c3d9143750fee6113d","tier":"starter_2024"},"version":47,"publish_version":47,"role":null,"authored":false,"authors":[{"type":"individual","id":"0298c339a9479dd0","login":"ebelluti","name":"Eduardo Belluti","avatar_url":"https://avatars-next.observableusercontent.com/d6cb66999ee4424f4de8147b1a598c04711dabf780d9d3c3d9143750fee6113d","tier":null}],"members":[{"type":"team","id":"53010a9da96b9061","login":"eduardo-belluti","name":"Eduardo Belluti","avatar_url":"https://avatars-next.observableusercontent.com/d6cb66999ee4424f4de8147b1a598c04711dabf780d9d3c3d9143750fee6113d","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"$undefined","cells":[{"id":1,"value":"deck = require(\"deck.gl@8.9.36/dist.min.js\")","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":7,"value":"const deckLib = await new Promise((resolve, reject) => {\n if (window.deck) {\n resolve(window.deck);\n return;\n }\n\n const script = document.createElement(\"script\");\n script.src = \"https://unpkg.com/deck.gl@8.9.36/dist.min.js\";\n script.onload = () => resolve(window.deck);\n script.onerror = () => reject(\n new Error(\"Could not load deck.gl from unpkg\")\n );\n\n document.head.appendChild(script);\n});","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined"},{"id":11,"value":"Object.keys(deckLib).filter(name =>\n [\n \"Deck\",\n \"GeoJsonLayer\",\n \"PathLayer\",\n \"ScatterplotLayer\",\n \"TextLayer\"\n ].includes(name)\n)","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined"},{"id":2,"value":"const world = await fetch(\n \"https://raw.githubusercontent.com/nvkelso/natural-earth-vector/master/geojson/ne_110m_admin_0_countries.geojson\"\n).then(response => {\n if (!response.ok) {\n throw new Error(`Could not load map data: ${response.status}`);\n }\n\n return response.json();\n});","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined"},{"id":3,"value":"const southAmerica = {\n type: \"FeatureCollection\",\n features: world.features.filter(\n feature => feature.properties.CONTINENT === \"South America\"\n )\n};","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined"},{"id":4,"value":"$31","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined"},{"id":5,"value":"const andesPath = [\n [-77.0, 8.5],\n [-77.2, 1.0],\n [-78.5, -7.0],\n [-74.5, -14.0],\n [-69.5, -22.0],\n [-70.2, -30.0],\n [-70.5, -36.0],\n [-71.5, -43.0],\n [-72.5, -50.0],\n [-69.5, -55.0]\n];","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined"},{"id":10,"value":"$32","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined"}],"files":"$W33","stdlib":"2","titling":"auto"}} 30:"$2f:body"