2b:null 2c:["$","title",null,{"children":"Holiday Souvenir | Tyler Randall - Data Visualization | Observable"}] 31:T3003,//CELL 5: GPX track data pts = [ [37.7576067,-25.2045109,279.8,"12:17"], [37.7575413,-25.2044722,272.3,"12:17"], [37.7575146,-25.2044571,269.7,"12:18"], [37.75752,-25.2044646,269.2,"12:18"], [37.7574202,-25.2043435,265.5,"12:18"], [37.7572875,-25.2040865,264.9,"12:18"], [37.7571612,-25.2038878,258.1,"12:18"], [37.7570578,-25.2035927,248.9,"12:19"], [37.7569123,-25.2034215,243.5,"12:19"], [37.7567183,-25.2032256,240.6,"12:19"], [37.7565079,-25.2030781,240.1,"12:20"], [37.756328,-25.2029455,236.5,"12:20"], [37.7560833,-25.2028204,237.7,"12:20"], [37.7558401,-25.2027026,236.2,"12:21"], [37.7556046,-25.2026039,226.9,"12:21"], [37.7553961,-25.2027599,224.8,"12:21"], [37.755262,-25.2029453,221.7,"12:21"], [37.7551197,-25.2031693,218.4,"12:22"], [37.7549417,-25.2033345,217.0,"12:22"], [37.7548297,-25.2036263,216.1,"12:22"], [37.7546554,-25.2034418,213.0,"12:23"], [37.7547666,-25.2032213,199.8,"12:23"], [37.7547981,-25.2029692,196.5,"12:23"], [37.7548337,-25.2028602,198.0,"12:24"], [37.7548704,-25.2025923,195.2,"12:24"], [37.7551123,-25.20248,197.9,"12:24"], [37.755283,-25.2022709,199.5,"12:24"], [37.7554519,-25.202093,192.5,"12:25"], [37.7556898,-25.2019436,194.7,"12:25"], [37.7558369,-25.2018763,190.4,"12:25"], [37.7560954,-25.2018642,189.1,"12:26"], [37.7563082,-25.201807,187.4,"12:26"], [37.7564073,-25.2018202,182.9,"12:26"], [37.7564791,-25.2017509,178.5,"12:27"], [37.756607,-25.2018343,176.9,"12:27"], [37.7567285,-25.2019272,178.7,"12:27"], [37.7569373,-25.202088,174.5,"12:28"], [37.7570755,-25.2022911,174.6,"12:28"], [37.7572105,-25.2024442,179.8,"12:28"], [37.7572606,-25.2026845,169.6,"12:29"], [37.7600314,-25.1982568,216.0,"12:42"], [37.7602298,-25.1982382,201.9,"12:42"], [37.7604105,-25.1982412,194.0,"12:43"], [37.7605538,-25.1983029,200.8,"12:43"], [37.7605064,-25.1983224,200.0,"12:43"], [37.7604124,-25.1983538,203.7,"12:44"], [37.7604153,-25.1982169,225.9,"12:44"], [37.7602966,-25.1980684,223.5,"12:44"], [37.7603551,-25.1979075,213.7,"12:44"], [37.7603567,-25.1978803,213.9,"12:45"], [37.7603441,-25.1977213,206.9,"12:45"], [37.7604371,-25.1976417,208.4,"12:45"], [37.760391,-25.1976451,208.8,"12:46"], [37.7604503,-25.1974603,203.0,"12:46"], [37.76047,-25.197214,198.7,"12:46"], [37.7604419,-25.1972169,195.9,"12:47"], [37.7603858,-25.197214,196.4,"12:47"], [37.7604435,-25.1972296,195.7,"12:47"], [37.7603589,-25.1970258,197.7,"12:47"], [37.7605596,-25.1970371,198.0,"12:48"], [37.7605566,-25.1968947,199.6,"12:48"], [37.7603976,-25.1968905,201.0,"12:48"], [37.7606308,-25.1968383,199.2,"12:49"], [37.760413,-25.1968354,202.3,"12:49"], [37.760416,-25.1968854,201.9,"12:49"], [37.7605763,-25.1969939,199.7,"12:49"], [37.760598,-25.1971074,199.6,"12:50"], [37.7606077,-25.1970156,202.3,"12:50"], [37.7607342,-25.1969589,203.3,"12:50"], [37.7607343,-25.1970164,207.6,"12:51"], [37.7604358,-25.1968816,202.5,"12:52"], [37.7605815,-25.1968427,204.1,"12:53"], [37.7606849,-25.1968656,201.3,"12:53"], [37.7607473,-25.1969074,202.7,"12:53"], [37.7607619,-25.1969706,203.3,"12:54"], [37.7605882,-25.1970452,201.5,"12:55"], [37.7606477,-25.1970573,200.7,"12:55"], [37.7606526,-25.1969869,202.1,"12:56"], [37.7606308,-25.1970366,201.9,"12:56"], [37.7606919,-25.1970224,203.0,"12:56"], [37.7606308,-25.1969979,204.0,"12:57"], [37.7606394,-25.1970039,202.9,"12:57"], [37.7606315,-25.197029,201.3,"12:59"], [37.760622,-25.1969859,202.3,"12:59"], [37.7604796,-25.1969174,200.9,"13:08"], [37.7605946,-25.1970832,200.0,"13:08"], [37.7606233,-25.1972094,205.7,"13:09"], [37.7605969,-25.1971693,203.0,"13:09"], [37.7604425,-25.1972471,200.2,"13:09"], [37.7605311,-25.1973957,203.1,"13:09"], [37.7606212,-25.1973098,205.5,"13:10"], [37.7605263,-25.1974001,205.5,"13:10"], [37.7606147,-25.197204,204.2,"13:10"], [37.7606914,-25.1971544,212.2,"13:11"], [37.7607401,-25.1969978,203.7,"13:11"], [37.7606807,-25.196877,202.1,"13:11"], [37.7608747,-25.197004,204.0,"13:12"], [37.7607291,-25.1968986,202.9,"13:12"], [37.7608459,-25.1967047,202.2,"13:13"], [37.7609154,-25.1966448,205.9,"13:13"], [37.7609073,-25.1967095,203.9,"13:13"], [37.761028,-25.1968642,204.3,"13:13"], [37.7608137,-25.1965041,196.7,"13:14"], [37.7609187,-25.1966437,204.4,"13:14"], [37.760909,-25.1966932,205.0,"13:14"], [37.7609012,-25.1967685,204.3,"13:15"], [37.7609527,-25.196657,205.2,"13:15"], [37.7609113,-25.1966767,205.1,"13:15"], [37.7609106,-25.1967266,202.8,"13:16"], [37.7609525,-25.1966428,207.7,"13:16"], [37.7609679,-25.1965929,209.7,"13:16"], [37.7609839,-25.1966294,206.9,"13:19"], [37.7608693,-25.196694,204.7,"13:19"], [37.7607149,-25.1967301,203.4,"13:19"], [37.7606893,-25.196746,203.8,"13:20"], [37.7607377,-25.1967437,202.9,"13:20"], [37.7607815,-25.196768,202.9,"13:20"], [37.7607887,-25.1968992,205.5,"13:21"], [37.7606576,-25.1971659,209.5,"13:22"], [37.760524,-25.1969867,199.1,"13:22"], [37.7605044,-25.1973367,201.8,"13:22"], [37.7603922,-25.1975744,201.9,"13:23"], [37.7603263,-25.1979003,212.2,"13:23"], [37.7602815,-25.1976769,214.4,"13:23"], [37.7603132,-25.1978221,210.0,"13:24"], [37.7603331,-25.1979453,217.7,"13:24"], [37.7602878,-25.1982577,221.6,"13:25"], [37.7602662,-25.1980819,217.9,"13:25"], [37.7601125,-25.1982021,217.2,"13:25"], [37.7599934,-25.1983351,219.5,"13:25"], [37.7598298,-25.1984917,215.8,"13:26"], [37.7597621,-25.1986879,215.9,"13:26"], [37.759685,-25.1988608,215.3,"13:26"], [37.7596679,-25.1991133,214.9,"13:27"], [37.7594278,-25.1991397,214.4,"13:27"], [37.7592503,-25.1992148,208.5,"13:27"], [37.7591204,-25.1993025,206.5,"13:27"], [37.7589783,-25.1994777,203.4,"13:28"], [37.7589178,-25.199638,200.8,"13:28"], [37.7588153,-25.1997754,199.4,"13:29"], [37.7586873,-25.1999842,197.1,"13:29"], [37.7586661,-25.2002754,197.9,"13:29"], [37.7586418,-25.2004571,200.5,"13:29"], [37.7585953,-25.200442,199.8,"13:30"], [37.7585089,-25.2003895,197.1,"13:30"], [37.7583769,-25.2004605,194.8,"13:30"], [37.7583088,-25.2005618,193.2,"13:31"], [37.7581633,-25.2006811,190.3,"13:31"], [37.7580193,-25.2009619,190.6,"13:31"], [37.7578634,-25.2011217,186.4,"13:32"], [37.757725,-25.2011848,180.5,"13:32"], [37.7576504,-25.2012486,177.5,"13:32"], [37.7575497,-25.2012552,177.2,"13:33"], [37.7576451,-25.2010421,173.4,"13:33"], [37.7577105,-25.200924,173.5,"13:33"], [37.7577315,-25.2008611,170.7,"13:34"], [37.7575669,-25.2008301,166.4,"13:34"], [37.7574401,-25.2008635,162.8,"13:34"], [37.7573449,-25.2009237,159.3,"13:35"], [37.7572572,-25.2010766,160.6,"13:35"], [37.7573119,-25.2014181,165.2,"13:35"], [37.7572051,-25.2015672,167.2,"13:36"], [37.7571794,-25.201796,170.0,"13:36"], [37.7571396,-25.2015113,165.5,"13:36"], [37.7570981,-25.2013812,162.6,"13:37"], [37.7570537,-25.2013446,160.0,"13:37"], [37.7570435,-25.2012703,155.5,"13:37"], [37.7569668,-25.2010728,149.1,"13:38"], [37.7568665,-25.2010185,143.5,"13:38"], [37.7568121,-25.2008391,134.9,"13:38"], [37.7567802,-25.2007953,133.0,"13:39"], [37.7567561,-25.2008511,133.7,"13:39"], [37.7567552,-25.2008548,133.5,"13:39"], [37.7566119,-25.2008254,134.4,"13:40"], [37.7564521,-25.2007676,126.9,"13:40"], [37.7562629,-25.2008408,122.8,"13:40"], [37.7560984,-25.2009218,122.3,"13:41"], [37.7559422,-25.2009119,121.9,"13:41"], [37.7558753,-25.2008934,116.3,"13:41"], [37.7557355,-25.2009507,113.6,"13:41"], [37.755716,-25.2007953,106.7,"13:42"], [37.7556131,-25.2008318,107.7,"13:42"], [37.7555627,-25.2007603,104.2,"13:42"], [37.7553634,-25.2008016,102.5,"13:42"], [37.7551381,-25.2009429,108.1,"13:43"], [37.7549522,-25.2009167,103.6,"13:43"], [37.7547932,-25.2009071,98.7,"13:43"], [37.7545983,-25.2010743,95.1,"13:43"], [37.7543962,-25.2012435,90.5,"13:44"], [37.7542611,-25.2013369,91.4,"13:44"], [37.7541002,-25.2014494,88.3,"13:44"], [37.7539664,-25.2015557,88.7,"13:45"], [37.7537639,-25.2017294,88.3,"13:45"], [37.7535555,-25.2019197,93.1,"13:45"], [37.7533472,-25.2020795,93.9,"13:46"], [37.7531372,-25.2021329,97.2,"13:46"], [37.7530095,-25.2023307,91.7,"13:46"], [37.7528111,-25.2024452,99.3,"13:46"], [37.7525867,-25.2025723,99.9,"13:47"], [37.752411,-25.2027158,97.2,"13:47"], [37.7523576,-25.2026738,99.4,"13:47"], [37.7522519,-25.2025728,94.0,"13:48"], [37.7521424,-25.2023834,79.5,"13:48"], [37.7520129,-25.2023508,70.5,"13:48"], [37.751865,-25.2024183,69.8,"13:49"], [37.7516607,-25.2024094,68.3,"13:49"], [37.7513771,-25.2023202,75.0,"13:49"], [37.7511875,-25.2022979,76.3,"13:50"], [37.7510256,-25.2022723,74.8,"13:50"], [37.750783,-25.2022219,71.8,"13:50"], [37.7505392,-25.2022576,67.7,"13:50"], [37.7503363,-25.2022927,66.7,"13:51"], [37.7501912,-25.2023285,62.1,"13:51"], [37.7500103,-25.2024047,58.7,"13:51"], [37.7499233,-25.2025193,58.7,"13:52"], [37.7499687,-25.2026482,61.2,"13:52"], [37.7499939,-25.2029136,66.4,"13:52"], [37.7499136,-25.2030784,72.5,"13:53"], [37.7500265,-25.2031842,81.0,"13:53"], [37.7502489,-25.2032409,89.4,"13:53"], [37.7504639,-25.2031907,99.8,"13:54"], [37.7505891,-25.2029847,101.0,"13:54"], [37.7506626,-25.2028476,96.8,"13:54"], [37.7508133,-25.2027579,91.0,"13:55"], [37.7509287,-25.2028662,98.5,"13:55"], [37.7508301,-25.2030173,106.4,"13:55"], [37.7509697,-25.2029614,107.0,"13:56"], [37.7511062,-25.2030037,111.3,"13:56"], [37.7511718,-25.2030763,117.0,"13:57"], [37.7510717,-25.2030385,122.5,"13:57"], [37.7510285,-25.2030936,124.8,"13:57"], [37.7511679,-25.2031406,130.0,"13:58"], [37.7510375,-25.2032182,132.2,"13:58"], [37.7510782,-25.2032568,136.4,"13:58"], [37.7511392,-25.2033123,144.2,"13:58"], [37.7511778,-25.203374,145.5,"13:59"], [37.7513195,-25.2034099,153.4,"13:59"], [37.7515214,-25.2034445,160.0,"14:00"], [37.7516623,-25.2034596,162.4,"14:00"], [37.7518569,-25.203445,162.0,"14:00"], [37.7520609,-25.2034943,160.7,"14:00"], [37.7523135,-25.2035498,164.9,"14:01"], [37.7525635,-25.2035073,163.9,"14:01"], [37.7527529,-25.2035921,164.8,"14:01"], [37.7529582,-25.2037151,170.8,"14:02"], [37.7531468,-25.2036924,173.4,"14:02"], [37.7533527,-25.2035862,170.6,"14:02"], [37.7535187,-25.2035147,173.3,"14:02"], [37.7535196,-25.2033982,170.1,"14:03"], [37.7535578,-25.2032771,167.0,"14:03"], [37.7535055,-25.2033124,167.4,"14:03"], [37.7535381,-25.2033322,167.9,"14:04"], [37.7535462,-25.2032814,167.5,"14:04"], [37.7534959,-25.2032641,167.1,"14:05"], [37.7534909,-25.2032463,166.0,"14:06"], [37.753417,-25.2032882,168.1,"14:06"], [37.7533727,-25.2032485,166.7,"14:06"], [37.7532734,-25.2032919,166.0,"14:12"], [37.7547671,-25.2033032,202.5,"14:22"], [37.7547079,-25.2034363,197.6,"14:22"], [37.7546889,-25.2036439,202.1,"14:22"], [37.7548436,-25.203474,214.4,"14:22"], [37.7549916,-25.203307,216.2,"14:23"], [37.7551102,-25.2031013,217.4,"14:23"], [37.7552505,-25.2028397,221.1,"14:23"], [37.7554282,-25.2026819,224.7,"14:24"], [37.7556146,-25.2026031,225.4,"14:24"], [37.7557094,-25.2025857,225.6,"14:24"], [37.7557488,-25.2026297,228.3,"14:25"], [37.7559618,-25.2027155,233.0,"14:25"], [37.7562053,-25.2028368,236.2,"14:25"], [37.7564277,-25.2029989,238.4,"14:25"], [37.7566007,-25.2031251,239.1,"14:26"], [37.7567326,-25.2032181,241.8,"14:26"], [37.7569163,-25.203374,243.2,"14:26"], [37.7570644,-25.2036305,246.5,"14:27"], [37.7572265,-25.2038857,255.1,"14:27"], [37.7573345,-25.2041477,264.4,"14:27"], [37.7574404,-25.2043456,271.1,"14:27"], [37.7575907,-25.2045048,285.0,"14:28"], [37.7577782,-25.204612,293.0,"14:28"], [37.7579904,-25.204599,293.8,"14:28"], [37.7582059,-25.2046277,293.0,"14:29"], [37.7584035,-25.204745,297.1,"14:29"], [37.7586554,-25.2047992,303.3,"14:29"], [37.7588882,-25.2046548,304.0,"14:30"], [37.7590341,-25.2044784,303.0,"14:30"], [37.7592311,-25.2043478,303.6,"14:30"], [37.7594416,-25.2045327,312.1,"14:30"], [37.7596513,-25.2045678,317.9,"14:31"], [37.7598678,-25.2047019,319.9,"14:31"], [37.7600217,-25.2049641,322.7,"14:31"], [37.7602572,-25.205064,325.0,"14:32"], [37.7602905,-25.20514,325.6,"14:32"] ] 32:T515,// CELL 6: Photo stop data photoStops = [ { idx: 275, lat: 37.75355, lon: -25.2032814, title: "Bar", desc: "A small bar that was a great way to end the day", emoji: "🍻", feeling: "Accomplished", photos: 12, elevation: 227, img: await FileAttachment("Bar.png").url() }, { idx: 120, lat: 37.76109128263066, lon: -25.196677874630566, title: "Salto do Prego", desc: "A beautiful waterfall that is a part of the most popular hike on the island.", emoji: "🌊", feeling: "Bliss", photos: 31, elevation: 168, img: await FileAttachment("Salto do Prego.png").url() }, { idx: 210, lat: 37.7500203, lon: -25.2024047, title: "Village Between the Mountains", desc: "Little Village tucked between the mountains, was supposed to be the beginning of the hike.", emoji: "🏠", feeling: "Freedom", photos: 8, elevation: 59, img: await FileAttachment("Village .png").url() }, { idx: 260, lat: 37.751, lon: -25.2032814, title: "Coastal trail ascent", desc: "Top of the switchbacks with a great view over the ocean through the mountains", emoji: "🌄", feeling: "Tired", photos: 19, elevation: 216, img: await FileAttachment("Coastal Ascent.png").url() } ]33:T843,//CELL 10: Controls UI viewof controls = { const form = html`

12:17

` let timer = null, playing = false, idx = 0 function tick() { mutable animIndex = idx form.querySelector('#scrubber').value = idx form.querySelector('#timeLabel').textContent = pts[idx][3] idx++ if (idx >= pts.length) { clearInterval(timer); playing = false form.querySelector('#playBtn').textContent = '▶ Animate' } } form.querySelector('#playBtn').onclick = () => { if (playing) { clearInterval(timer); playing = false form.querySelector('#playBtn').textContent = '▶ Animate' } else { if (idx >= pts.length) idx = 0 playing = true form.querySelector('#playBtn').textContent = '⏸ Pause' timer = setInterval(tick, 28) } } form.querySelector('#resetBtn').onclick = () => { clearInterval(timer); playing = false; idx = 0 mutable animIndex = 0 form.querySelector('#playBtn').textContent = '▶ Animate' form.querySelector('#scrubber').value = 0 form.querySelector('#timeLabel').textContent = '12:17' } form.querySelector('#scrubber').oninput = (e) => { clearInterval(timer); playing = false form.querySelector('#playBtn').textContent = '▶ Animate' idx = +e.target.value mutable animIndex = idx form.querySelector('#timeLabel').textContent = pts[idx][3] } return form } 34:T1e36,mapInstance = { const container = html`

` const mapDiv = document.createElement('div') mapDiv.style.cssText = 'width:100%;height:100%;' container.appendChild(mapDiv) const stats = document.createElement('div') stats.style.cssText = `position:absolute;top:12px;left:12px;z-index:10; background:rgba(255,255,255,0.92);border-radius:10px;padding:10px 14px; font-family:sans-serif;font-size:12px;line-height:1.9; box-shadow:0 2px 8px rgba(0,0,0,0.15);border:1px solid rgba(0,0,0,0.07);` stats.innerHTML = `

🌿 São Miguel, Azores

📅 April 20, 2026

📏 ~6.2 km | ⏱ 2h 15m

⛰ Max: 326 m | Min: 59 m

📷 4 photo stops

` container.appendChild(stats) const legend = document.createElement('div') legend.style.cssText = `position:absolute;bottom:30px;left:12px;z-index:10; background:rgba(255,255,255,0.92);border-radius:10px;padding:10px 14px; font-family:sans-serif;font-size:11px;line-height:2; box-shadow:0 2px 8px rgba(0,0,0,0.15);border:1px solid rgba(0,0,0,0.07);` legend.innerHTML = `

Elevation

${[["#E24B4A","High (>240 m)"],["#BA7517","Mid (160–240 m)"], ["#378ADD","Low (100–160 m)"],["#1D9E75","Valley (<100 m)"]].map(([c,l]) => `

${l}

`).join('')}

📷 Photo stop

` container.appendChild(legend) const ctrlBar = document.createElement('div') ctrlBar.style.cssText = `position:absolute;bottom:0;left:0;right:0;z-index:10; background:rgba(255,255,255,0.92);padding:8px 14px; display:flex;align-items:center;gap:10px;font-family:sans-serif;font-size:13px;` const playBtn = document.createElement('button') playBtn.textContent = '▶ Animate' playBtn.style.cssText = `padding:5px 16px;border-radius:20px;border:none; background:#1D9E75;color:#fff;font-size:13px;cursor:pointer;font-weight:500;` const scrubber = document.createElement('input') scrubber.type = 'range' scrubber.min = 0 scrubber.max = pts.length - 1 scrubber.value = 0 scrubber.style.cssText = 'flex:1;accent-color:#1D9E75;' const timeLabel = document.createElement('span') timeLabel.textContent = '12:17' timeLabel.style.cssText = 'min-width:38px;color:#555;' const resetBtn = document.createElement('button') resetBtn.textContent = '↺ Reset' resetBtn.style.cssText = `padding:5px 14px;border-radius:20px; border:1px solid #ccc;background:#fff;font-size:13px;cursor:pointer;` ctrlBar.appendChild(playBtn) ctrlBar.appendChild(scrubber) ctrlBar.appendChild(timeLabel) ctrlBar.appendChild(resetBtn) container.appendChild(ctrlBar) yield container mapboxgl.accessToken = MAPBOX_TOKEN const map = new mapboxgl.Map({ container: mapDiv, style: "mapbox://styles/mapbox/outdoors-v12", center: [-25.2008, 37.7555], zoom: 13.5, pitch: 45, bearing: -20 }) invalidation.then(() => map.remove()) map.addControl(new mapboxgl.NavigationControl(), 'top-right') await new Promise(resolve => map.on('load', resolve)) map.addSource('ghost', { type: 'geojson', data: { type: 'Feature', geometry: { type: 'LineString', coordinates: pts.map(p => [p[1], p[0]]) } }}) map.addLayer({ id: 'ghost-layer', type: 'line', source: 'ghost', layout: { 'line-join': 'round', 'line-cap': 'round' }, paint: { 'line-color': '#999', 'line-width': 2, 'line-opacity': 0.3 } }) map.addSource('anim', { type: 'geojson', data: { type: 'Feature', geometry: { type: 'LineString', coordinates: [] } }}) map.addLayer({ id: 'anim-layer', type: 'line', source: 'anim', layout: { 'line-join': 'round', 'line-cap': 'round' }, paint: { 'line-color': '#1D9E75', 'line-width': 5, 'line-opacity': 1 } }) map.addSource('dot', { type: 'geojson', data: { type: 'Feature', geometry: { type: 'Point', coordinates: [pts[0][1], pts[0][0]] } }}) map.addLayer({ id: 'dot-layer', type: 'circle', source: 'dot', paint: { 'circle-radius': 9, 'circle-color': '#1D9E75', 'circle-stroke-width': 3, 'circle-stroke-color': '#fff' } }) new mapboxgl.Marker({ color: '#1D9E75' }) .setLngLat([pts[0][1], pts[0][0]]) .setPopup(new mapboxgl.Popup().setHTML('Start
12:17 · 280 m')) .addTo(map) new mapboxgl.Marker({ color: '#E24B4A' }) .setLngLat([pts[pts.length-1][1], pts[pts.length-1][0]]) .setPopup(new mapboxgl.Popup().setHTML('End
14:32 · 326 m')) .addTo(map) photoStops.forEach(s => { const el = document.createElement('div') el.style.cssText = `width:30px;height:30px;background:#BA7517; border:2px solid white;border-radius:6px; display:flex;align-items:center;justify-content:center; font-size:15px;cursor:pointer;box-shadow:0 2px 6px rgba(0,0,0,0.35);` el.textContent = '📷' const imgHTML = s.img ? '

' : '' new mapboxgl.Marker({ element: el }) .setLngLat([s.lon, s.lat]) .setPopup(new mapboxgl.Popup({ offset: 20, maxWidth: '290px' }).setHTML( '

' + imgHTML + '

' + s.emoji + '

' + '

' + s.title + '

' + '

' + s.desc + '

' + '

Feeling: ' + s.feeling + ' · ' + s.photos + ' photos · ' + s.elevation + ' m

' + '

' )) .addTo(map) }) function updateMap(i) { const idx = Math.min(Math.max(i, 0), pts.length - 1) mutable animIndex = idx map.getSource('anim').setData({ type: 'Feature', geometry: { type: 'LineString', coordinates: pts.slice(0, idx + 1).map(p => [p[1], p[0]]) } }) map.getSource('dot').setData({ type: 'Feature', geometry: { type: 'Point', coordinates: [pts[idx][1], pts[idx][0]] } }) map.setPaintProperty('dot-layer', 'circle-color', eleColor(pts[idx][2])) scrubber.value = idx timeLabel.textContent = pts[idx][3] } let timer = null, playing = false, idx = 0 playBtn.onclick = () => { if (playing) { clearInterval(timer); playing = false playBtn.textContent = '▶ Animate' } else { if (idx >= pts.length - 1) idx = 0 playing = true playBtn.textContent = '⏸ Pause' timer = setInterval(() => { updateMap(idx) idx++ if (idx >= pts.length) { clearInterval(timer); playing = false playBtn.textContent = '▶ Animate' } }, 28) } } resetBtn.onclick = () => { clearInterval(timer); playing = false; idx = 0 playBtn.textContent = '▶ Animate' updateMap(0) } scrubber.oninput = e => { clearInterval(timer); playing = false playBtn.textContent = '▶ Animate' idx = +e.target.value updateMap(idx) } updateMap(pts.length - 1) updateMap(0) }35:T954,// CELL 13: Elevation chart with synced dot { const W = 680, H = 120, PL = 40, PR = 10, PT = 10, PB = 30 const w = W - PL - PR, h = H - PT - PB const eles = pts.map(p => p[2]) const minE = Math.min(...eles), maxE = Math.max(...eles) const scaleY = v => h - ((v - minE) / (maxE - minE)) * h const scaleX = i => (i / (pts.length - 1)) * w const polyPts = pts.map((p,i) => `${scaleX(i)},${scaleY(p[2])}`).join(' ') const areaPath = `M0,${h} ` + pts.map((p,i) => `${scaleX(i)},${scaleY(p[2])}`).join(' ') + ` ${w},${h} Z` const photoTicksHTML = photoStops.map(s => { const x = scaleX(s.idx) return ` ${s.emoji} ` }).join('') const x = scaleX(animIndex) // animIndex used here makes this cell reactive const y = scaleY(pts[animIndex][2]) const ele = pts[animIndex][2] const anchor = x > w - 40 ? 'end' : 'middle' return html`` }36:T4e1,//CELL 14: Photo stops summary table html`

${photoStops.map((s,i) => ` `).join('')}

Stop	Location	Feeling	Photos	Elevation
${s.emoji}	${s.title}	${s.feeling}	${s.photos} 📷	${s.elevation} m

`37:[{"id":"16c7eea9e50fc709062aab183f657c2693006d5c2368094f6a75b26d525ea5e78d0e912658a26c97ac13dcf841103a51ad5d2f1cffb4bc5bb78d7988a0d9ec33","href":"https://static.observableusercontent.com/files/16c7eea9e50fc709062aab183f657c2693006d5c2368094f6a75b26d525ea5e78d0e912658a26c97ac13dcf841103a51ad5d2f1cffb4bc5bb78d7988a0d9ec33","name":"Bar.png","type":"image/png","lastModified":1778414850718.835,"size":3591920},{"id":"b34208ff6656bb5a6dafda4ebea94ed2394662479ef160a7a5d9817a89fcf205c454308d93d34c4abb14fe011489288b3d2fee655eb5300a6f911d18819415c1","href":"https://static.observableusercontent.com/files/b34208ff6656bb5a6dafda4ebea94ed2394662479ef160a7a5d9817a89fcf205c454308d93d34c4abb14fe011489288b3d2fee655eb5300a6f911d18819415c1","name":"Salto do Prego.png","type":"image/png","lastModified":1778414844529.226,"size":4315918},{"id":"b43e6e974315c2796e3c1ee7a63fedd667ee15813f83c383f5bb814172e06ba4be06b630f26d2e85e1ec00a5ddc4aa840c9deb1f05d20f261760b652f7ab9cda","href":"https://static.observableusercontent.com/files/b43e6e974315c2796e3c1ee7a63fedd667ee15813f83c383f5bb814172e06ba4be06b630f26d2e85e1ec00a5ddc4aa840c9deb1f05d20f261760b652f7ab9cda","name":"Coastal Ascent.png","type":"image/png","lastModified":1778414848213.297,"size":3876819},{"id":"005feb61acf24c17effc744298fcf24a405d5a8cfdaa401d57b20f6d6c4a71e6c822abc278cbf0c61bd94ad07fdc0ee01a0bd557a270b6d09bca6008e8c0637a","href":"https://static.observableusercontent.com/files/005feb61acf24c17effc744298fcf24a405d5a8cfdaa401d57b20f6d6c4a71e6c822abc278cbf0c61bd94ad07fdc0ee01a0bd557a270b6d09bca6008e8c0637a","name":"Village .png","type":"image/png","lastModified":1778414853505.365,"size":3291103}] 2f:{"id":"85b8a90207f52c9a","slug":"holiday-souvenir","title":"Holiday Souvenir","thumbnail":"49e3b8e7b5c25c76853ac31b4ed41e895e2facb91573182f4e68e995d0ccb899","access_level":"public","create_time":"$D2026-05-04T10:12:00.144Z","update_time":"$D2026-05-11T08:43:41.452Z","view_time":null,"first_public_time":"$D2026-05-04T12:11:21.039Z","fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"4ed2d20a5c4515bc","login":"tyler-randall-data-visualization","name":"Tyler Randall - Data Visualization","avatar_url":"https://avatars-next.observableusercontent.com/a505c6134bc3584a60659120f7ce92c9bf46b9062292c998f8bad15db485bd3e","tier":"starter_2024"},"version":172,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"57428a96192d5cd7","login":"tyler-randall","name":"Tyler Randall","avatar_url":"https://avatars-next.observableusercontent.com/3c434fe018a031762e4025fbf40632bee15a9e04314434899fb3ebb8516bf422","tier":null}],"members":[{"type":"individual","id":"57428a96192d5cd7","login":"tyler-randall","name":"Tyler Randall","avatar_url":"https://avatars-next.observableusercontent.com/3c434fe018a031762e4025fbf40632bee15a9e04314434899fb3ebb8516bf422","tier":null,"role":"editor"},{"type":"team","id":"4ed2d20a5c4515bc","login":"tyler-randall-data-visualization","name":"Tyler Randall - Data Visualization","avatar_url":"https://avatars-next.observableusercontent.com/a505c6134bc3584a60659120f7ce92c9bf46b9062292c998f8bad15db485bd3e","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Holiday Souvenir","cells":[{"id":0,"value":"# Holiday Souvenir\n#Tyler Randall: CC-BY","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":38,"value":"\n/*\n🌿 Azores Hike — São Miguel\n//April 20, 2026 · 12:17–14:32 · ~6.2 km · 326 m elevation\n\n\n\n*/\n\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"//CELL 2: Imports\nmapboxgl = require(\"mapbox-gl@2.15.0/dist/mapbox-gl.js\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"//CELL 3: Mapbox CSS\nhtml``\n\n\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":41,"value":"//CELL 4: Mapbox token \nMAPBOX_TOKEN = \"pk.eyJ1IjoiZGlzc3RvY2tob2xtIiwiYSI6ImNsYXB4ZDBsODFjeGYzcHF2bDd5dmtuajQifQ.aqSUxGoF8DkpeJyEx3diOg\"\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"$31","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"$32","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"//CELL 7: Colour helper\nfunction eleColor(ele) {\n if (ele > 240) return \"#E24B4A\" // high — red\n if (ele > 160) return \"#BA7517\" // mid — amber\n if (ele > 100) return \"#378ADD\" // low — blue\n return \"#1D9E75\" // valley — green\n}\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":23,"value":"//CELL 8: GeoJSON for the full track\ntrackGeoJSON = ({\n type: \"FeatureCollection\",\n features: pts.slice(0, -1).map((p, i) => ({\n type: \"Feature\",\n properties: { color: eleColor((p[2] + pts[i+1][2]) / 2) },\n geometry: {\n type: \"LineString\",\n coordinates: [[p[1], p[0]], [pts[i+1][1], pts[i+1][0]]]\n }\n }))\n})\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":26,"value":"//CELL 9: Animation state (mutable)\nmutable animIndex = 0\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":29,"value":"$33","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":32,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":35,"value":"$35","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":44,"value":"$36","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W37","stdlib":"1","titling":"auto"}} 30:"$2f:body"