44:["$","title",null,{"children":"Hootopia 2026 | Tony Griffiths | Observable"}] 4c:Tb29,const formatClock = minutes => { const m = ((minutes % 1440) + 1440) % 1440; return `${String(Math.floor(m / 60)).padStart(2, "0")}:${String(m % 60).padStart(2, "0")}`; }; const timeWidget = document.createElement("div"); timeWidget.className = "hootopia-clock-control"; timeWidget.style.cssText = "width:100%;max-width:850px;font:13px system-ui;margin-bottom:16px;"; timeWidget.innerHTML = ` Festival clock · 20:30 `; const timeSlider = timeWidget.querySelector("input"); const timeReadout = timeWidget.querySelector("output"); const timeTicks = timeWidget.querySelector(".ticks"); for (const minute of [720, 900, 1080, 1260, 1440]) { const tick = document.createElement("span"); tick.style.left = `${100 * (minute - 720) / 720}%`; tick.textContent = formatClock(minute); timeTicks.append(tick); } timeWidget.value = timeSlider.valueAsNumber; timeSlider.addEventListener("input", () => { timeWidget.value = timeSlider.valueAsNumber; timeReadout.value = formatClock(timeWidget.value); timeSlider.setAttribute("aria-valuetext", timeReadout.value); // The native input event bubbles to timeWidget for Observable. }); timeSlider.setAttribute("aria-valuetext", "20:30"); const festivalTime = view(timeWidget); const selectedGenre = view(Inputs.select(genres, { label: "Music genre", value: "All genres" }));4d:T9b76,// CELL C - map (replace old map creation cell) import * as maplibregl from "npm:maplibre-gl@5.24.0"; const mapCSS = document.createElement("link"); mapCSS.rel = "stylesheet"; mapCSS.href = "https://cdn.jsdelivr.net/npm/maplibre-gl@5.24.0/dist/maplibre-gl.css"; document.head.appendChild(mapCSS); const hootieFrame = document.createElement("div"); hootieFrame.style.cssText = "position:relative;width:100%;"; const mapElement = document.createElement("div"); mapElement.style.cssText = "height:580px;width:100%;overflow:hidden;border-radius:14px;"; hootieFrame.append(mapElement); mapElement.classList.add("hootopia-map"); mapElement.style.position = "relative"; const hud = document.createElement("div"); hud.style.cssText = "position:absolute;left:17px;top:17px;z-index:10;background:rgba(20,28,35,.87);color:#fff8e8;padding:12px 16px;border-radius:10px;pointer-events:none;font:13px system-ui;box-shadow:0 3px 15px #0004;"; const hudTitle = document.createElement("div"); hudTitle.style.cssText = "font:italic 900 29px/1.1 Georgia,serif;letter-spacing:-1px;background:linear-gradient(105deg,#ffe7a3 15%,#ffaec8 55%,#8ce9d4);background-clip:text;-webkit-background-clip:text;color:transparent;padding:2px 0 5px;filter:drop-shadow(0 2px 0 #0008);"; hudTitle.textContent = "Hootopia 2026"; const hootieClock = document.createElement("div"); hootieClock.style.cssText = "font-size:29px;font-weight:700;font-variant-numeric:tabular-nums;margin:3px 0;"; hootieClock.textContent = "20:30"; const hootieStatus = document.createElement("div"); hootieStatus.style.cssText = "display:grid;gap:9px;width:220px;max-width:100%;"; hud.style.maxWidth = "calc(100% - 100px)"; function makeHootieMeter(label) { const row = document.createElement("div"); const caption = document.createElement("div"); caption.style.cssText = "display:flex;justify-content:space-between;gap:12px;font-size:11px;margin-bottom:4px;"; const name = document.createElement("span"); name.textContent = label; const value = document.createElement("strong"); caption.append(name, value); const track = document.createElement("div"); track.setAttribute("role", "meter"); track.setAttribute("aria-label", label); track.setAttribute("aria-valuemin", "0"); track.style.cssText = "display:grid;grid-template-columns:repeat(20,1fr);gap:3px;height:10px;"; const segments = Array.from({length:20}, (_, i) => { const segment = document.createElement("span"); segment.style.cssText = "border-radius:1px;transition:opacity 120ms;opacity:.15;"; segment.style.background = i < 13 ? "#5ee094" : i < 17 ? "#ffd166" : "#ff845d"; track.append(segment); return segment; }); row.append(caption, track); hootieStatus.append(row); return (count, maximum, scaleLabel) => { const max = Math.max(1, maximum); value.textContent = count + " / " + maximum; row.title = scaleLabel; track.setAttribute("aria-valuemax", String(max)); track.setAttribute("aria-valuenow", String(count)); track.setAttribute("aria-valuetext", count + "; " + scaleLabel); const lit = count > 0 ? Math.ceil(20 * Math.min(count / max, 1)) : 0; segments.forEach((segment, i) => { segment.style.opacity = i < lit ? "1" : ".15"; }); }; } const updateVenueMeter = makeHootieMeter("Active venues"); const updatePerformanceMeter = makeHootieMeter("Live performances"); const hootieStageName = gig => String(gig.stage || "").trim() || "Stage not specified"; // Official festival artist metadata retrieved 8 November 2026; link enrichment only. // The workbook remains the sole source for programme, stages, times and venues. const hootieSpotifyProfiles = [ { "name": "Monumental", "profile": "https://www.hanwellhootie.co.uk/monumental/", "url": "https://open.spotify.com/artist/2aeljLNtuUAETKLpc6l9NM" }, { "name": "RU Music", "profile": "https://www.hanwellhootie.co.uk/rumusic/", "url": "https://open.spotify.com/artist/1Pw4vxXDmTmzN713d9lJiz" }, { "name": "Loose Puppet", "profile": "https://www.hanwellhootie.co.uk/loosepuppet/", "url": "https://open.spotify.com/artist/2iRTcGOfySIb5qddg5YT3k" }, { "name": "Veronica Adaeze", "profile": "https://www.hanwellhootie.co.uk/veronicaadaeze/", "url": "https://open.spotify.com/artist/57sd7NhzEWbX6Y6UavTOOe" }, { "name": "The Outlawed", "profile": "https://www.hanwellhootie.co.uk/theoutlawed/", "url": "https://open.spotify.com/artist/1T9zQFoeuPBzVcc187RJcp" }, { "name": "Modern Syndicate", "profile": "https://www.hanwellhootie.co.uk/modernsyndicate/", "url": "https://open.spotify.com/artist/789nKYVVaaCvJ0KVBfj4ZT" }, { "name": "Laurie Wright", "profile": "https://www.hanwellhootie.co.uk/lauriewright/", "url": "https://open.spotify.com/artist/5DhyddYFidEDGe9kcc2rt3" }, { "name": "Michael Hill", "profile": "https://www.hanwellhootie.co.uk/michaelhill/", "url": "https://open.spotify.com/artist/684oDJ3wKIggBXSVUKIa2i" }, { "name": "Sparky’s Magic Piano", "profile": "https://www.hanwellhootie.co.uk/sparkysmagicpiano/", "url": "https://open.spotify.com/artist/75B4GvKh6I45PSoM2iu1rc" }, { "name": "Bertie", "profile": "https://www.hanwellhootie.co.uk/bertie/", "url": "https://open.spotify.com/artist/3H6uBudoNirmf3niGCvHWg" }, { "name": "Mokat", "profile": "https://www.hanwellhootie.co.uk/mokat/", "url": "https://open.spotify.com/artist/7K7HrivlI0QBjtjF3rzdod" }, { "name": "Fly/Kick", "profile": "https://www.hanwellhootie.co.uk/dead-rat-society-2/", "url": "https://open.spotify.com/artist/7mYGQmyTbrZrDfQtJmBzk7" }, { "name": "Vic Allen", "profile": "https://www.hanwellhootie.co.uk/vicallen/", "url": "https://open.spotify.com/artist/0RnJLVAyhdFNVNJ3lgbIHr" }, { "name": "Dune", "profile": "https://www.hanwellhootie.co.uk/dune/", "url": "https://open.spotify.com/artist/1SdmCyHXekrAOk3MlV71fp" }, { "name": "Laura Masterson", "profile": "https://www.hanwellhootie.co.uk/lauramasterson/", "url": "https://open.spotify.com/artist/6yHbYOV6dy02BVqWg5pVKp" }, { "name": "Scarlet Sometimes", "profile": "https://www.hanwellhootie.co.uk/scarletsometimes/", "url": "https://open.spotify.com/artist/66wtz95D6hiYcZRJqCOKuc" }, { "name": "Frankie Morrow", "profile": "https://www.hanwellhootie.co.uk/frankiemorrow/", "url": "https://open.spotify.com/artist/2WTWlVGUyWeMBwrNVwGFhU" }, { "name": "Dom Glynn and his Sunday Best", "profile": "https://www.hanwellhootie.co.uk/domglynnandhissundaybest/", "url": "https://open.spotify.com/artist/12LdvaO6BJcQwdQFok28Di" }, { "name": "Jack Browett", "profile": "https://www.hanwellhootie.co.uk/jackbrowett/", "url": "https://open.spotify.com/artist/4HDwMnT0BLthHZd0Xt4U6c" }, { "name": "The Ariston", "profile": "https://www.hanwellhootie.co.uk/theariston/", "url": "https://open.spotify.com/artist/2dkPa8dhWjqkiYxUxJwX9A" }, { "name": "Harry Moon and the Cardboard Rocket", "profile": "https://www.hanwellhootie.co.uk/harrymoonandthecardboardrocket/", "url": "https://open.spotify.com/artist/7qen7GLJApXVYtJGfnhj55" }, { "name": "Girl Like That", "profile": "https://www.hanwellhootie.co.uk/girllikethat/", "url": "https://open.spotify.com/artist/5NgRffIucF1qoif5HTBb7o" }, { "name": "Thwack!", "profile": "https://www.hanwellhootie.co.uk/thwack/", "url": "https://open.spotify.com/artist/36ShmaNEDHjB54Fd2d6weJ" }, { "name": "The Hornets", "profile": "https://www.hanwellhootie.co.uk/thehornets/", "url": "https://open.spotify.com/artist/0eAbuk4EL9GkC1uUQRQVpl" }, { "name": "DANAMA", "profile": "https://www.hanwellhootie.co.uk/danama/", "url": "https://open.spotify.com/artist/5kjg1V3FLw9FHcFKW5NaG3" }, { "name": "Divided Compass", "profile": "https://www.hanwellhootie.co.uk/dividedcompass/", "url": "https://open.spotify.com/artist/3SyUZTnnV1Et0nxkj7XC0H" }, { "name": "Ziggurat", "profile": "https://www.hanwellhootie.co.uk/ziggurat/", "url": "https://open.spotify.com/artist/5XkCoDM3k8SGgXOE2f1UkI" }, { "name": "MAYA LIKES TO RUN HER MOUTH", "profile": "https://www.hanwellhootie.co.uk/mayalikestorunhermouth/", "url": "https://open.spotify.com/artist/4PxH2l3SNxpcYbgU6j4qP0" }, { "name": "Sam Foster", "profile": "https://www.hanwellhootie.co.uk/samfoster/", "url": "https://open.spotify.com/artist/4PxH2l3SNxpcYbgU6j4qP0" }, { "name": "Catlea", "profile": "https://www.hanwellhootie.co.uk/catlea/", "url": "https://open.spotify.com/artist/3MKB5HGt7ZcprzEZt4BxMV" }, { "name": "Jimmy Tarpey", "profile": "https://www.hanwellhootie.co.uk/jimmytarpey/", "url": "https://open.spotify.com/artist/4pp4IHVXUmvz35DPD0LceY" }, { "name": "Max Montanaro", "profile": "https://www.hanwellhootie.co.uk/maxmontanaro/", "url": "https://open.spotify.com/artist/1mXTirJDtMfG9EAR7LAIKM" }, { "name": "Sophie Stewart", "profile": "https://www.hanwellhootie.co.uk/sophiestewart/", "url": "https://open.spotify.com/artist/3VzpoJ2R1cAnZjqvGp4gJl" }, { "name": "Daytura", "profile": "https://www.hanwellhootie.co.uk/daytura/", "url": "https://open.spotify.com/artist/2hq3uMUKEFXizy89yoYQ4o" }, { "name": "Yuke", "profile": "https://www.hanwellhootie.co.uk/yuke/", "url": "https://open.spotify.com/artist/5L15jmo2TMwclItkgtDh2N" }, { "name": "A Void", "profile": "https://www.hanwellhootie.co.uk/avoid/", "url": "https://open.spotify.com/artist/3ha9mtXhb0Ia40lnrU2cOI" }, { "name": "Room 11", "profile": "https://www.hanwellhootie.co.uk/room11/", "url": "https://open.spotify.com/artist/2VLklAzE9rJBov1Mi7mh0D" }, { "name": "SANTU", "profile": "https://www.hanwellhootie.co.uk/santu/", "url": "https://open.spotify.com/artist/5ymCpjOW2qMsFEPMenTN7x" }, { "name": "Hootini Brass Band", "profile": "https://www.hanwellhootie.co.uk/hootingbrassband/", "url": "https://open.spotify.com/artist/50WIyEsMBrvCUmln8jgCvU" }, { "name": "Daisy Veacock", "profile": "https://www.hanwellhootie.co.uk/daisyveacock/", "url": "https://open.spotify.com/artist/3PCWmgzCD4eAIiVGMjBL1M" }, { "name": "Marianne Leigh", "profile": "https://www.hanwellhootie.co.uk/marianneleigh/", "url": "https://open.spotify.com/artist/1iFfYdsTHCQ7D0jUS5dE5n" }, { "name": "Parlay", "profile": "https://www.hanwellhootie.co.uk/parlay/", "url": "https://open.spotify.com/artist/5u18L2iyCXqC6U02hDbTFc" }, { "name": "h.eldritch", "profile": "https://www.hanwellhootie.co.uk/h-eldritch/", "url": "https://open.spotify.com/artist/4N1tME2fjd4iMSvIpcBJRo" }, { "name": "Brooke Law", "profile": "https://www.hanwellhootie.co.uk/brookelaw/", "url": "https://open.spotify.com/artist/0mDLTE0tzaN3lPl91t550q" }, { "name": "The New Immigrants", "profile": "https://www.hanwellhootie.co.uk/thenewimmigrants/", "url": "https://open.spotify.com/artist/2hV3JyMKRfaoRCXIgz1wQG" }, { "name": "Ashaine White", "profile": "https://www.hanwellhootie.co.uk/ashainewhite/", "url": "https://open.spotify.com/artist/3nhn1Qpg3aXPWN2IzaLj05" }, { "name": "Autumn Fires", "profile": "https://www.hanwellhootie.co.uk/autumnfires/", "url": "https://open.spotify.com/artist/6pUrc8sCjFQ0JZVe9IQWfO" }, { "name": "Sterling Press", "profile": "https://www.hanwellhootie.co.uk/sterlingpress/", "url": "https://open.spotify.com/artist/70yWi0xCAXMiqOTeQVdED2" }, { "name": "Daytime TV", "profile": "https://www.hanwellhootie.co.uk/daytimetv/", "url": "https://open.spotify.com/artist/35ls7qnn5iKLPMT8PnOBy8" }, { "name": "Tom Scammel", "profile": "https://www.hanwellhootie.co.uk/tomscammel/", "url": "https://open.spotify.com/artist/2gvBzMCOcUo5F20BFoiimh" }, { "name": "The Geoff Garbow Band ft Terry Marshall", "profile": "https://www.hanwellhootie.co.uk/thegeoffgarbowbandftterrymarshall/", "url": "https://open.spotify.com/artist/78LNHpu7bx9jLYuqTOmjdh" }, { "name": "The TJ Johnson Band", "profile": "https://www.hanwellhootie.co.uk/thetjjohnsonband/", "url": "https://open.spotify.com/artist/6hOgTHLSM5mxhNNr0VIRxQ" }, { "name": "The Gospel", "profile": "https://www.hanwellhootie.co.uk/the-gospel/", "url": "https://open.spotify.com/artist/3GQgu9CGKhscJgiao67cOs" }, { "name": "Perkelt", "profile": "https://www.hanwellhootie.co.uk/perkelt/", "url": "https://open.spotify.com/artist/0Owb7clAVVeneks7W4ZpDx" } ]; const hootieArtistKey = value => { const text = document.createElement("textarea"); text.innerHTML = String(value || ""); return text.value.normalize("NFKC").toLowerCase().replace(/[’‘]/g,"'").replace(/\s+/g," ").trim(); }; function hootieSpotifyURL(gig) { const valid = raw => { try { const url=new URL(String(raw||"")); return url.protocol==="https:" && url.hostname==="open.spotify.com" && /^\/(?:intl-[a-z]+\/)?artist\/[A-Za-z0-9]+\/?$/.test(url.pathname) ? url.origin+url.pathname : ""; } catch {return "";} }; for (const key of ["spotify_url","artist_spotify_url","spotify_profile_url","hh_spotify","artist_url"]) { const url=valid(gig[key]); if(url) return url; } const byName=hootieSpotifyProfiles.filter(p=>hootieArtistKey(p.name)===hootieArtistKey(gig.artist)); const urls=[...new Set(byName.map(p=>p.url))]; // Only an unambiguous exact name match; no guessed or fuzzy artist matches. return urls.length===1 ? valid(urls[0]) : ""; } const hootieStages = new Map(); for (const gig of sets) { const id = String(gig.venue_id); if (!hootieStages.has(id)) hootieStages.set(id, new Set()); hootieStages.get(id).add(hootieStageName(gig)); } const hootieScheduledVenueCount = new Set(sets.map(gig => String(gig.venue_id))).size; // Fixed peak of simultaneous performances in the slider window, all genres. const hootiePeakEvents = []; for (const gig of sets) { const start = Math.max(720, Number(gig.start_minute)); const end = Math.min(1440, Number(gig.end_minute)); if (Number.isFinite(start) && Number.isFinite(end) && end > start) { hootiePeakEvents.push([start, 1], [end, -1]); } } hootiePeakEvents.sort((a, b) => a[0] - b[0] || a[1] - b[1]); const hootiePeak = {running:0, maximum:0}; for (const [, delta] of hootiePeakEvents) { hootiePeak.running += delta; hootiePeak.maximum = Math.max(hootiePeak.maximum, hootiePeak.running); } const hootieMeterNote = document.createElement("div"); hootieMeterNote.style.cssText = "font-size:10px;opacity:.75;margin-top:6px;max-width:220px;"; hootieMeterNote.textContent = "Scales: scheduled venues / peak concurrent sets"; hud.append(hudTitle, hootieClock, hootieStatus, hootieMeterNote); hootieFrame.append(hud); const categoryColours = { "Pub": "#d86b48", "Outdoor": "#3c9971", "Community": "#806bc2", "Public space": "#339fba", "Other": "#c3994c" }; const venueCategory = (type, name = "") => { if (/clock tower/i.test(name)) return "Public space"; const v = String(type || "").toLowerCase(); if (v.includes("public") || v.includes("busking")) return "Public space"; if (v.includes("pub")) return "Pub"; if (v.includes("field") || v.includes("outdoor")) return "Outdoor"; if (v.includes("community") || v.includes("retail")) return "Community"; if (v.includes("public") || v.includes("busking")) return "Public space"; return "Other"; }; const legend = document.createElement("div"); legend.style.cssText = "position:absolute;bottom:25px;left:16px;z-index:10;background:rgba(20,28,35,.84);color:#fff;padding:10px 12px;border-radius:9px;display:flex;flex-wrap:wrap;gap:8px;font:11px system-ui;pointer-events:none;max-width:65%;"; for (const [name, colour] of Object.entries(categoryColours)) { const item = document.createElement("span"); item.style.cssText = "display:inline-flex;align-items:center;gap:4px;"; const dot = document.createElement("i"); dot.style.cssText = `width:9px;height:9px;border-radius:50%;background:${colour};display:inline-block;`; item.append(dot, document.createTextNode(name)); legend.append(item); } hootieFrame.append(legend); display(hootieFrame); const coordEditor = document.createElement("details"); coordEditor.style.cssText = "margin:9px 0;font:13px system-ui;"; const editorHeading = document.createElement("summary"); editorHeading.textContent = "Correct venue locations (optional)"; const editorIntro = document.createElement("p"); editorIntro.textContent = "Select a venue, then click Pick location and click its actual position on the map. Shift-click also works while this editor is open. You can also edit latitude and longitude below. Copy corrections into venueOverrides to keep them after a reload."; const venuePicker = document.createElement("select"); for (const v of geoVenues) { const option = document.createElement("option"); option.value = String(v.venue_id); option.textContent = v.venue_name; venuePicker.append(option); } venuePicker.setAttribute("aria-label", "Venue to relocate"); const pickButton = document.createElement("button"); pickButton.type = "button"; pickButton.textContent = "Pick location"; pickButton.style.marginLeft = "8px"; pickButton.setAttribute("aria-pressed", "false"); const coordFields = document.createElement("div"); coordFields.style.cssText = "display:flex;flex-wrap:wrap;gap:8px;align-items:end;margin:10px 0;"; function makeCoordField(labelText, min, max) { const label = document.createElement("label"); label.textContent = labelText + " "; const input = document.createElement("input"); input.type = "number"; input.step = "0.000001"; input.min = String(min); input.max = String(max); input.style.width = "120px"; label.append(input); coordFields.append(label); return input; } const latitudeInput = makeCoordField("Latitude", -90, 90); const longitudeInput = makeCoordField("Longitude", -180, 180); const applyCoordsButton = document.createElement("button"); applyCoordsButton.type = "button"; applyCoordsButton.textContent = "Apply coordinates"; coordFields.append(applyCoordsButton); const coordStatus = document.createElement("p"); coordStatus.setAttribute("role", "status"); const coordOutput = document.createElement("textarea"); coordOutput.readOnly = true; coordOutput.rows = 4; coordOutput.setAttribute("aria-label", "Coordinate overrides to copy"); coordOutput.style.cssText = "display:block;width:100%;max-width:850px;box-sizing:border-box;font:12px monospace;"; coordOutput.placeholder = "Corrections made here will appear as records to paste inside venueOverrides."; const copyCoordsButton = document.createElement("button"); copyCoordsButton.type = "button"; copyCoordsButton.textContent = "Copy corrections"; copyCoordsButton.disabled = true; coordEditor.append(editorHeading, editorIntro, venuePicker, pickButton, coordFields, coordStatus, coordOutput, copyCoordsButton); display(coordEditor); const hootieStyles = { day: "https://tiles.openfreemap.org/styles/liberty", night: "https://tiles.openfreemap.org/styles/dark" }; const hootieState = { theme: "day", minute: 1230, picking: false, popup: null, lastPulseMinute: null, lastPulseGenre: null, coordinateEdits: new Map(), data: {type: "FeatureCollection", features: []} }; const hootieMap = new maplibregl.Map({ container: mapElement, style: hootieStyles.day, center: [-0.338, 51.507], zoom: 14 }); // Reserve Shift-click for coordinate picking rather than Shift-drag box zoom. hootieMap.boxZoom.disable(); function setHootiePicking(enabled) { hootieState.picking = enabled; pickButton.textContent = enabled ? "Cancel picking" : "Pick location"; pickButton.setAttribute("aria-pressed", String(enabled)); hootieMap.getCanvas().style.cursor = enabled ? "crosshair" : ""; } function loadHootieCoordinates() { const venue = geoVenues.find(v => String(v.venue_id) === venuePicker.value); const fix = hootieState.coordinateEdits.get(venuePicker.value) || venue; latitudeInput.value = fix ? String(fix.latitude) : ""; longitudeInput.value = fix ? String(fix.longitude) : ""; setHootiePicking(false); coordStatus.textContent = "Select Pick location or enter coordinates for " + (venue?.venue_name || "this venue") + "."; } function applyHootieCoordinates(latitude, longitude) { const venue = geoVenues.find(v => String(v.venue_id) === venuePicker.value); if (!venue || !Number.isFinite(latitude) || !Number.isFinite(longitude) || Math.abs(latitude) > 90 || Math.abs(longitude) > 180) { coordStatus.textContent = "Enter valid latitude (-90 to 90) and longitude (-180 to 180)."; return; } const fix = {venue_id: venue.venue_id, latitude: Number(latitude.toFixed(6)), longitude: Number(longitude.toFixed(6)), source: "manual map check"}; hootieState.coordinateEdits.set(String(venue.venue_id), fix); latitudeInput.value = String(fix.latitude); longitudeInput.value = String(fix.longitude); for (const feature of hootieState.data.features) { if (String(feature.properties.venue_id) === String(venue.venue_id)) { feature.geometry.coordinates = [fix.longitude, fix.latitude]; } } hootieMap.getSource("hootie-venues")?.setData(hootieState.data); refreshHootieLabels(); hootieState.popup?.remove(); setHootiePicking(false); coordOutput.value = [...hootieState.coordinateEdits.values()].map(fix => JSON.stringify(fix) + ",").join("\n"); copyCoordsButton.disabled = false; coordStatus.textContent = venue.venue_name + " moved to " + fix.latitude + ", " + fix.longitude + ". Preview applied. Copy corrections into venueOverrides to save; replace existing entries for these venue IDs."; } venuePicker.addEventListener("change", loadHootieCoordinates); pickButton.addEventListener("click", () => { setHootiePicking(!hootieState.picking); coordStatus.textContent = hootieState.picking ? "Click the selected venue's actual position on the map." : "Picking cancelled."; }); applyCoordsButton.addEventListener("click", () => applyHootieCoordinates(latitudeInput.valueAsNumber, longitudeInput.valueAsNumber)); coordEditor.addEventListener("toggle", () => { if (!coordEditor.open) setHootiePicking(false); }); hootieFrame.addEventListener("keydown", e => { if (e.key === "Escape") setHootiePicking(false); }); copyCoordsButton.addEventListener("click", async () => { try { await navigator.clipboard.writeText(coordOutput.value); coordStatus.textContent = "Copied. Paste these records inside venueOverrides, replacing existing records for the same venue IDs."; } catch { coordOutput.focus(); coordOutput.select(); coordStatus.textContent = "Press Ctrl+C (or Command+C) to copy the selected records, then paste inside venueOverrides."; } }); loadHootieCoordinates(); invalidation.then(() => { cancelAnimationFrame(hootieLayoutFrame); hootieVisuals.forEach(v => v.animation?.cancel()); hootieResizeObserver.disconnect(); hootieState.popup?.remove(); hootieMap.remove(); mapCSS.remove(); }); hootieMap.addControl(new maplibregl.NavigationControl({showCompass: false}), "top-right"); hootieMap.on("error", e => console.error("Hootie map:", e.error)); const duskOpacity = minute => { const begin = 19 * 60 + 35; const sunset = 20 * 60 + 36; const finish = 21 * 60 + 15; if (minute < begin) return 0.10; if (minute < sunset) return 0.10 + 0.64 * (minute - begin) / (sunset - begin); if (minute < finish) return 0.74 * (1 - (minute - sunset) / (finish - sunset)); return 0; }; function installHootieLayers() { if (!hootieMap.getSource("hootie-venues")) { hootieMap.addSource("hootie-venues", {type: "geojson", data: hootieState.data}); } if (!hootieMap.getSource("hootie-labels")) { hootieMap.addSource("hootie-labels", {type: "geojson", data: {type:"FeatureCollection",features:[]}}); } if (!hootieMap.getLayer("hootie-twilight")) { hootieMap.addLayer({ id: "hootie-twilight", type: "background", paint: { "background-color": hootieState.minute < 1175 ? "#f5b57c" : "#172941", "background-opacity": duskOpacity(hootieState.minute), "background-opacity-transition": {duration: 350} } }); } refreshHootieLabels(); } // Festival LEDs and individually clickable labels are independent of basemap styles. const hootieVisualStyle = document.createElement("style"); hootieVisualStyle.textContent = ` .hootopia-map {--hoot-paper:#fff7e5;--hoot-ink:#292b36;--hoot-accent:#86521f;--hoot-link:#285f90} .hootopia-map[data-theme=night] {--hoot-paper:#19222d;--hoot-ink:#fff2d6;--hoot-accent:#ffd58a;--hoot-link:#8ddcfa} .hootopia-map .hoot-led-position {position:absolute;width:28px;height:28px;pointer-events:auto;z-index:3} .hootopia-map .hoot-led {display:block;width:28px;height:28px;padding:4px;border:1px solid #96938a;border-radius:50%;cursor:pointer;background:linear-gradient(135deg,#777d7e,#171b20 45%,#555b61);box-shadow:0 2px 4px #0009;box-sizing:border-box} .hootopia-map .hoot-lens {display:block;width:100%;height:100%;border-radius:50%;background:radial-gradient(circle at 32% 24%,#ffffff45,transparent 35%),var(--led);box-shadow:inset 0 0 0 2px #0004,inset 0 -4px 6px #000a;filter:brightness(.33) saturate(.9);transition:filter .2s,box-shadow .2s} .hootopia-map .hoot-led[data-active="1"] .hoot-lens {filter:brightness(1.35) saturate(1.2);box-shadow:inset 0 1px 3px #fff9,0 0 8px var(--led),0 0 21px var(--led)} .hootopia-map .hoot-label {position:absolute;pointer-events:auto;z-index:2;max-width:190px;padding:5px 9px;border:1px solid var(--led);border-left:4px solid var(--led);border-radius:5px 12px 5px 12px;background:var(--hoot-paper);color:var(--hoot-ink);font:800 15px/1.15 "Trebuchet MS",system-ui,sans-serif;letter-spacing:.1px;text-align:left;box-shadow:0 2px 5px #0004;cursor:pointer;box-sizing:border-box} .hootopia-map button:focus-visible {outline:3px solid #eaaf44;outline-offset:3px} .hootopia-map .hootopia-popup {z-index:6} .hootopia-map .hootopia-popup .maplibregl-popup-content {background:var(--hoot-paper);color:var(--hoot-ink);padding:17px;border-radius:12px;box-shadow:0 8px 30px #0006} .hootopia-map .hootopia-popup a {color:var(--hoot-link)} .hootopia-map .hootopia-popup .maplibregl-popup-close-button {color:var(--hoot-ink);font-size:20px;padding:2px 7px} .hootopia-map .hootopia-popup.maplibregl-popup-anchor-bottom .maplibregl-popup-tip, .hootopia-map .hootopia-popup.maplibregl-popup-anchor-bottom-left .maplibregl-popup-tip, .hootopia-map .hootopia-popup.maplibregl-popup-anchor-bottom-right .maplibregl-popup-tip {border-top-color:var(--hoot-paper)} .hootopia-map .hootopia-popup.maplibregl-popup-anchor-top .maplibregl-popup-tip, .hootopia-map .hootopia-popup.maplibregl-popup-anchor-top-left .maplibregl-popup-tip, .hootopia-map .hootopia-popup.maplibregl-popup-anchor-top-right .maplibregl-popup-tip {border-bottom-color:var(--hoot-paper)} .hootopia-map .hootopia-popup.maplibregl-popup-anchor-left .maplibregl-popup-tip {border-right-color:var(--hoot-paper)} .hootopia-map .hootopia-popup.maplibregl-popup-anchor-right .maplibregl-popup-tip {border-left-color:var(--hoot-paper)} @media(prefers-reduced-motion:reduce) {.hootopia-map .hoot-lens {transition:none}} `; hootieFrame.append(hootieVisualStyle); const hootieOverlay = document.createElement("div"); hootieOverlay.style.cssText = "position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:2;"; const hootieLeaders = document.createElementNS("http://www.w3.org/2000/svg", "svg"); hootieLeaders.style.cssText = "position:absolute;width:100%;height:100%;overflow:hidden;pointer-events:none;"; hootieOverlay.append(hootieLeaders); mapElement.append(hootieOverlay); const hootieVisuals = new Map(); let hootieLayoutFrame = 0; const hootieResizeObserver = new ResizeObserver(() => queueHootieLayout()); hootieResizeObserver.observe(mapElement); function queueHootieLayout() { if (hootieLayoutFrame) return; hootieLayoutFrame = requestAnimationFrame(() => { hootieLayoutFrame = 0; layoutHootieLabels(); }); } function refreshHootieLabels() { mapElement.dataset.theme = hootieState.theme; for (const feature of hootieState.data.features) { const p = feature.properties, id = String(p.venue_id); let visual = hootieVisuals.get(id); if (!visual) { const position = document.createElement("div"); position.className = "hoot-led-position"; const led = document.createElement("button"); led.type = "button"; led.className = "hoot-led"; const lens = document.createElement("span"); lens.className = "hoot-lens"; led.append(lens); position.append(led); const label = document.createElement("button"); label.type = "button"; label.className = "hoot-label"; const leader = document.createElementNS("http://www.w3.org/2000/svg", "line"); leader.setAttribute("stroke-width", "1.5"); leader.setAttribute("stroke-opacity", ".65"); hootieLeaders.append(leader); const click = e => { // Let map clicks through during coordinate picking, including Shift-click. if (hootieState.picking || (coordEditor.open && e.shiftKey)) return; e.stopPropagation(); openHootieVenue(id); }; led.addEventListener("click", click); label.addEventListener("click", click); hootieOverlay.append(position, label); visual = {position, led, lens, label, leader, animation:null}; hootieVisuals.set(id, visual); } visual.feature = feature; const colour = categoryColours[p.category] || categoryColours.Other; visual.position.style.setProperty("--led", colour); visual.label.style.setProperty("--led", colour); visual.leader.setAttribute("stroke", colour); visual.led.dataset.active = String(p.active); visual.led.setAttribute("aria-label", p.name + (p.active ? ", live now" : ", between sets")); visual.label.textContent = p.name; visual.label.title = p.name + " — click for stages and acts"; if (!p.active) visual.animation?.cancel(); } layoutHootieLabels(); } function layoutHootieLabels() { const width = mapElement.clientWidth, height = mapElement.clientHeight; if (!width || !height) return; const root = mapElement.getBoundingClientRect(); const boxes = [hud, legend].map(el => { const r = el.getBoundingClientRect(); return {x:r.left-root.left-6,y:r.top-root.top-6,w:r.width+12,h:r.height+12}; }); // Keep label plates away from navigation and attribution controls. boxes.push({x:width-58,y:0,w:58,h:115},{x:0,y:height-25,w:width,h:25}); const visible = []; for (const visual of hootieVisuals.values()) { const point = hootieMap.project(visual.feature.geometry.coordinates); visual.point = point; const onScreen = point.x >= 0 && point.y >= 0 && point.x <= width && point.y <= height; visual.position.hidden = !onScreen; visual.label.hidden = !onScreen || !visual.feature.properties.active; visual.labelPlaced = false; visual.leader.style.display = "none"; visual.position.style.transform = "translate(" + (point.x-14) + "px," + (point.y-14) + "px)"; if (onScreen) visible.push(visual); } // All marker footprints are reserved before placing any label. for (const visual of visible) boxes.push({x:visual.point.x-18,y:visual.point.y-18,w:36,h:36}); const overlaps = (a,b) => a.x < b.x+b.w+5 && a.x+a.w+5 > b.x && a.y < b.y+b.h+5 && a.y+a.h+5 > b.y; visible.sort((a,b) => a.point.y-b.point.y || String(a.feature.properties.venue_id).localeCompare(String(b.feature.properties.venue_id))); for (const visual of visible.filter(v => v.feature.properties.active)) { visual.label.style.visibility = "hidden"; visual.label.hidden = false; const w = visual.label.offsetWidth, h = visual.label.offsetHeight; const {x,y} = visual.point; const candidates = []; for (const gap of [23,50,82,116,156,200,260]) { candidates.push({x:x-w/2,y:y+gap},{x:x-w/2,y:y-gap-h}, {x:x+gap,y:y-h/2},{x:x-gap-w,y:y-h/2}, {x:x+gap,y:y+gap},{x:x-gap-w,y:y+gap}, {x:x+gap,y:y-gap-h},{x:x-gap-w,y:y-gap-h}); } let chosen = candidates.find(p => p.x>=6 && p.y>=6 && p.x+w<=width-6 && p.y+h<=height-6 && !boxes.some(b=>overlaps({...p,w,h},b))); // Dense clusters can use a nearby free row, with a leader to the exact venue. if (!chosen) { const free = []; for (let yy=8; yy+hoverlaps({x:xx,y:yy,w,h},b))) free.push({x:xx,y:yy}); free.sort((a,b)=>Math.hypot(a.x+w/2-x,a.y+h/2-y)-Math.hypot(b.x+w/2-x,b.y+h/2-y)); chosen=free[0]; } if (!chosen) {visual.label.hidden=true; continue;} // LED remains clickable; zoom for more room. visual.labelPlaced = true; visual.labelOffset = {x:chosen.x-x,y:chosen.y-y,w,h}; visual.label.style.left=chosen.x+"px"; visual.label.style.top=chosen.y+"px"; visual.label.style.visibility="visible"; boxes.push({...chosen,w,h}); visual.leader.setAttribute("x1",String(x)); visual.leader.setAttribute("y1",String(y)); visual.leader.setAttribute("x2",String(Math.max(chosen.x,Math.min(x,chosen.x+w)))); visual.leader.setAttribute("y2",String(Math.max(chosen.y,Math.min(y,chosen.y+h)))); visual.leader.style.display=""; } } function positionHootieOverlays() { const width=mapElement.clientWidth, height=mapElement.clientHeight; for (const visual of hootieVisuals.values()) { const {x,y}=hootieMap.project(visual.feature.geometry.coordinates); const onScreen=x>=0 && y>=0 && x<=width && y<=height; visual.position.hidden=!onScreen; visual.position.style.transform="translate("+(x-14)+"px,"+(y-14)+"px)"; const show=onScreen && visual.feature.properties.active && visual.labelPlaced; visual.label.hidden=!show; visual.leader.style.display=show ? "" : "none"; if (!show) continue; const offset=visual.labelOffset, left=x+offset.x, top=y+offset.y; visual.label.style.left=left+"px"; visual.label.style.top=top+"px"; visual.leader.setAttribute("x1",String(x));visual.leader.setAttribute("y1",String(y)); visual.leader.setAttribute("x2",String(Math.max(left,Math.min(x,left+offset.w)))); visual.leader.setAttribute("y2",String(Math.max(top,Math.min(y,top+offset.h)))); } } function surgeHootieStarts(minute, genre) { const previous = hootieState.lastPulseMinute; const forward = previous !== null && minute > previous && genre === hootieState.lastPulseGenre; hootieState.lastPulseMinute = minute; hootieState.lastPulseGenre = genre; if (!forward || matchMedia("(prefers-reduced-motion: reduce)").matches) return; const starts = new Set(sets.filter(gig => Number(gig.start_minute)>previous && Number(gig.start_minute)<=minute && Number(gig.end_minute)>minute && (genre==="All genres" || gig.genre_category===genre)).map(gig=>String(gig.venue_id))); for (const id of starts) { const visual=hootieVisuals.get(id); if (!visual || !visual.feature.properties.active) continue; visual.animation?.cancel(); visual.animation=visual.led.animate([ {transform:"scale(1)",filter:"brightness(1)"}, {transform:"scale(1.65)",filter:"brightness(1.85)",offset:.22}, {transform:"scale(1.22)",filter:"brightness(1.2)",offset:.55}, {transform:"scale(1)",filter:"brightness(1)"} ],{duration:1600,easing:"ease-out",iterations:1}); } } hootieMap.on("style.load", installHootieLayers); hootieMap.on("render", positionHootieOverlays); hootieMap.on("moveend", queueHootieLayout); hootieMap.on("resize", queueHootieLayout); hootieMap.on("click", e => { if (hootieState.picking || (coordEditor.open && e.originalEvent?.shiftKey)) { applyHootieCoordinates(e.lngLat.lat, ((e.lngLat.lng + 180) % 360 + 360) % 360 - 180); } }); function openHootieVenue(id) { const selected = hootieState.data.features.find(f => String(f.properties.venue_id) === String(id)); if (!selected) return; const panel = document.createElement("div"); panel.style.cssText = "font:14px/1.45 Trebuchet MS,system-ui;max-width:300px;max-height:330px;overflow:auto;"; for (const feature of [selected]) { const p = feature.properties; const section = document.createElement("section"); section.style.cssText = "padding:4px 0 9px;margin:0 0 7px;border-bottom:1px solid #ddd;"; const name = document.createElement("strong"); name.textContent = p.name; name.style.cssText = "font-size:19px;line-height:1.2;display:block;margin-right:15px;"; section.append(name); const type = document.createElement("div"); type.style.cssText = "opacity:.7;margin:5px 0;"; type.textContent = p.category; section.append(type); const playing = JSON.parse(p.acts_json || "[]"); const stages = new Set(hootieStages.get(String(p.venue_id)) || []); for (const act of playing) stages.add(act.stage); if (!stages.size) stages.add("Stage not specified"); for (const stage of stages) { const stageSection = document.createElement("div"); stageSection.style.cssText = "border-left:3px solid #d6a650;padding-left:9px;margin-top:12px;"; const stageTitle = document.createElement("div"); stageTitle.style.cssText = "font-weight:800;color:var(--hoot-accent);"; stageTitle.textContent = stage; stageSection.append(stageTitle); const stageActs = playing.filter(act => act.stage === stage); if (!stageActs.length) { const blank = document.createElement("div"); blank.style.cssText = "opacity:.65;font-size:12px;margin-top:4px;"; blank.textContent = hootieState.lastPulseGenre === "All genres" ? "Between sets" : "No matching act at this time"; stageSection.append(blank); } for (const act of stageActs) { const actRow = document.createElement("div"); actRow.style.marginTop = "7px"; const band = document.createElement("strong"); band.textContent = act.artist; actRow.append(band); const genre = document.createElement("div"); genre.textContent = act.genre; actRow.append(genre); if (act.url && /^https?:\/\//i.test(act.url)) { const link = document.createElement("a"); link.href = act.url; link.textContent = act.direct ? "Artist website / social" : "Artist biography / profile"; link.target = "_blank"; link.rel = "noopener noreferrer"; actRow.append(link); } if (act.spotify) { const spotify = document.createElement("a"); spotify.href=act.spotify; spotify.textContent="Listen on Spotify"; spotify.target="_blank"; spotify.rel="noopener noreferrer"; spotify.style.cssText="display:block;margin-top:4px;"; actRow.append(spotify); } stageSection.append(actRow); } section.append(stageSection); } panel.append(section); } hootieState.popup?.remove(); hootieState.popup = new maplibregl.Popup({offset:18, maxWidth:"330px", className:"hootopia-popup"}).setLngLat(selected.geometry.coordinates).setDOMContent(panel).addTo(hootieMap); } if (hootieMap.isStyleLoaded()) installHootieLayers(); else await new Promise(resolve => hootieMap.once("style.load", resolve)); const bounds = new maplibregl.LngLatBounds(); for (const v of geoVenues) bounds.extend([v.longitude, v.latitude]); if (geoVenues.length) hootieMap.fitBounds(bounds, {padding:{top:190,right:60,bottom:70,left:60}, maxZoom:14.8, duration:0}); 4e:Taa1,// CELL D - replace the complete existing reactive map-update cell. const byVenue = new Map(); for (const gig of activeSets) { const id = String(gig.venue_id); if (!byVenue.has(id)) byVenue.set(id, []); byVenue.get(id).push(gig); } const venueGeoJSON = { type: "FeatureCollection", features: geoVenues.map(v => { const playing = byVenue.get(String(v.venue_id)) || []; const fix = hootieState.coordinateEdits.get(String(v.venue_id)) || v; return { type: "Feature", geometry: {type: "Point", coordinates: [Number(fix.longitude), Number(fix.latitude)]}, properties: { venue_id: v.venue_id, name: v.venue_name, category: venueCategory(v.venue_type, v.venue_name), active: playing.length ? 1 : 0, acts_json: JSON.stringify(playing.map(d => ({ artist: d.artist, spotify: hootieSpotifyURL(d), stage: hootieStageName(d), genre: d.genre_detail || d.genre_category || "Unclassified", url: d.artist_url || d.artist_profile_url || d.artist_discovery_url || d.artist_festival_biography_url || "", direct: Boolean(d.artist_url) }))) } }; }) }; hootieState.data = venueGeoJSON; hootieState.minute = festivalTime; hootieClock.textContent = formatClock(festivalTime); updateVenueMeter(byVenue.size, hootieScheduledVenueCount, "Maximum: " + hootieScheduledVenueCount + " venues with scheduled performances, all genres"); updatePerformanceMeter(activeSets.length, hootiePeak.maximum, "Maximum: " + hootiePeak.maximum + " simultaneous performances across noon–midnight, all genres"); hootieMeterNote.textContent = (selectedGenre === "All genres" ? "All genres" : selectedGenre) + " · Scales: scheduled venues / peak concurrent sets"; // Avoid leaving a popup displaying acts from the previous time or genre. hootieState.popup?.remove(); hootieState.popup = null; const desiredTheme = festivalTime >= 20 * 60 + 36 ? "night" : "day"; if (desiredTheme !== hootieState.theme) { hootieState.theme = desiredTheme; hootieMap.setStyle(hootieStyles[desiredTheme], {diff:false}); } else { // style.load reinstalls the layers using the latest cached state after a switch. hootieMap.getSource("hootie-venues")?.setData(venueGeoJSON); if (hootieMap.getLayer("hootie-twilight")) { hootieMap.setPaintProperty("hootie-twilight", "background-color", festivalTime < 1175 ? "#f5b57c" : "#172941"); hootieMap.setPaintProperty("hootie-twilight", "background-opacity", duskOpacity(festivalTime)); } refreshHootieLabels(); } // DOM LEDs survive style replacement; animate only newly crossed starts. refreshHootieLabels(); surgeHootieStarts(festivalTime, selectedGenre); 4f:Tcec,**Hootopia 2026 — a little utopia, turned up loud** For my map challenge, I wanted to explore a utopia that exists briefly, close to home: a neighbourhood transformed by live music. Hootopia maps the Hanwell Hootie on 9 May 2026. Move the clock from afternoon to midnight and watch venues light up as performances begin. The map shifts from warm daylight through dusk into darkness, while amplifier-inspired LEDs and mixer-style meters show where the music is happening. The geography is part of the appeal. Pubs including The Fox, The Viaduct, Kings Arms and The Green W7 become stages, alongside the Hobbayne Centre, Hanwell Clock Tower’s busking stage and the outdoor space at Viaduct Meadow. Familiar places acquire another purpose; moving between them becomes part of the festival. Most venues sit within an easily walkable area of Hanwell. [Festival information](https://www.hanwellhootie.co.uk/2026-festival/) **A neighbourhood with amplification in its DNA** Hanwell’s musical connection reaches back to 1962, when Jim and Terry Marshall built their first amplifier here. The sound travelled around the world; the Hootie brings that heritage back into the neighbourhood. [Marshall’s history](https://www.marshall.com/cw/en/about-marshall) The festival grew from a local initiative in 2012 to commemorate Jim Marshall, with the first Hootie held in April 2013. It began across three pubs and developed into a much larger celebration of grassroots music. Today it is volunteer-led and run through a Community Interest Company, with Marshall providing longstanding support and sponsorship. The organisers describe a particularly appealing principle: audiences attend free, while musicians are paid. [Festival history and ethos](https://www.hanwellhootie.co.uk/), [Ealing’s account of its beginnings](https://www.aroundealing.com/news/hanwell-hootie-2026/) **The data behind the lights** The map uses a single workbook bringing together the published festival programme, venue and stage details, performance times, genres and available artist links. Sources include the [official 2026 festival information](https://www.hanwellhootie.co.uk/2026-festival/) and the [Hanwell Hootie Clashfinder timetable](https://clashfinder.com/s/hanwellhootie2026/). I manually refined venue positions so nearby pubs appear at their individual locations. The map is built in Observable with MapLibre GL JS, using OpenFreeMap basemaps based on OpenStreetMap data. Spotify links are included where available from the festival’s artist records. The lights represent the published schedule, rather than a live feed or confirmation of what actually happened. [OpenFreeMap](https://openfreemap.org/) **Why this feels like utopia to me** My version of utopia has people wandering between pubs, discovering a band they have never heard of, and sharing a space with neighbours they might otherwise pass without speaking. For a few hours, music gives the neighbourhood a shared rhythm. Local businesses, volunteers, performers and audiences all contribute something. Ordinary streets become routes between small moments of discovery. That is what I wanted the map to capture: a place becoming more alive through the things people choose to do together. A little utopia—temporary, local and turned up loud.50:T73a, const venueOverrides = [ // Insert corrected records here. // Each needs venue_id, latitude and longitude. {"venue_id":"hobbayne_centre","latitude":51.506237,"longitude":-0.33809,"source":"manual map check"}, {"venue_id":"village_inn","latitude":51.505852,"longitude":-0.337178,"source":"manual map check"}, {"venue_id":"prince_of_wales","latitude":51.506302,"longitude":-0.337483,"source":"manual map check"}, {"venue_id":"w7_emporium","latitude":51.506478,"longitude":-0.337415,"source":"manual map check"}, {"venue_id":"green_w7","latitude":51.507139,"longitude":-0.339596,"source":"manual map check"}, {"venue_id":"fox","latitude":51.504217,"longitude":-0.34309,"source":"manual map check"}, {"venue_id":"viaduct_meadow","latitude":51.509528,"longitude":-0.343928,"source":"manual map check"}, {"venue_id":"duke_of_york","latitude":51.508969,"longitude":-0.338466,"source":"manual map check"}, {"venue_id":"busking_stage","latitude":51.508897,"longitude":-0.338113,"source":"manual map check"}, {"venue_id":"kings_arms","latitude":51.508688,"longitude":-0.337331,"source":"manual map check"}, {"venue_id":"dodo_micropub","latitude":51.506726,"longitude":-0.337441,"source":"manual map check"}, {"venue_id":"forester","latitude":51.506138,"longitude":-0.320955,"source":"manual map check"}, ]; const overrideMap = new Map( venueOverrides.map(d => [d.venue_id, d]) ); const geoVenues = venues.map(v => { const fix = overrideMap.get(v.venue_id); return fix ? { ...v, latitude: Number(fix.latitude), longitude: Number(fix.longitude), coordinate_precision: "manual_override" } : v; }); display(Inputs.table(geoVenues.map(d => ({ venue_id: d.venue_id, name: d.venue_name, type: d.venue_type, latitude: d.latitude, longitude: d.longitude, precision: d.coordinate_precision })))); 51:[{"id":"4c8525ec83fae612f0a28e6d6641622257b21deb0c0caa7fed8935de6acdbd71a3e8bce5726002d923ee03d1e957461b6fe3ffd1790d1b33d7d22f655eb2733e","href":"https://static.observableusercontent.com/files/4c8525ec83fae612f0a28e6d6641622257b21deb0c0caa7fed8935de6acdbd71a3e8bce5726002d923ee03d1e957461b6fe3ffd1790d1b33d7d22f655eb2733e","name":"Hanwell_Hootopia_2026_Master.xlsx","type":"application/vnd.openxmlformats-officedocument.spreadsheetml.sheet","lastModified":1794147704190,"size":64613}] 48:{"id":"8ad242578e1da2c6","slug":"hootopia-2026","title":"Hootopia 2026","thumbnail":"92338a51e659f32162db89ec1cbab601cc2b9ad48c74ada8fda9c49a67c2fca9","access_level":"public","create_time":"$D2026-11-08T14:09:01.825Z","update_time":"$D2026-11-08T19:36:34.568Z","view_time":null,"first_public_time":"$D2026-11-08T19:31:04.865Z","has_unpublished_edits":null,"fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"fa149cb0825f9a52","login":"tony-griffiths","name":"Tony Griffiths","avatar_url":"https://avatars-next.observableusercontent.com/7cf209d7bf7ee1257528bf422fc89bd37776aee216d4c1820dd2be9490133758","tier":"free_2026","bio":"Love exploring ways to make sense of complex data across time and space. This is my personal hobby/ art project space.","followed_by_you":false,"follows_you":false},"version":77,"publish_version":77,"role":null,"authored":false,"authors":[{"type":"individual","id":"3dc53d3e7d693619","login":"tony-griffiths","name":"Tony Griffiths","avatar_url":"https://avatars-next.observableusercontent.com/358880bb167fd88f4c3cb3c7686323bae193a7790ba4719066864c62d40fd668","tier":null,"bio":"Love exploring ways to make sense of complex data across time and space. This is my personal hobby/ art project space.","followed_by_you":false,"follows_you":false}],"members":[{"type":"team","id":"fa149cb0825f9a52","login":"tony-griffiths","name":"Tony Griffiths","avatar_url":"https://avatars-next.observableusercontent.com/7cf209d7bf7ee1257528bf422fc89bd37776aee216d4c1820dd2be9490133758","tier":"free_2026","role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Hootopia 2026","cells":[{"id":1,"value":"# Hootopia 2026\n\n## Having a Hootie at Hanwell's Utopia for Unticketed Live Music & Fun\n\nMove through the day and watch the neighbourhood come alive. Timings represent the published programme.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"$4c","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"$4d","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"\nconst activeSets = sets.filter(d =>\n d.start_minute <= festivalTime &&\n d.end_minute > festivalTime &&\n (selectedGenre === \"All genres\" ||\n d.genre_category === selectedGenre)\n);\n\nconst activeVenueIds = new Set(\n activeSets.map(d => d.venue_id)\n);\n\ndisplay(\n `${formatClock(festivalTime)} · ` +\n `${activeSets.length} performances · ` +\n `${activeVenueIds.size} active venues`\n);\n\ndisplay(Inputs.table(activeSets.map(d => ({\n Artist: d.artist,\n Venue: d.venue,\n Stage: d.stage,\n Genre: d.genre_category,\n Start: d.start,\n Finish: d.end\n}))));\n","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"$4e","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":"\nconst workbook = await FileAttachment(\"Hanwell_Hootopia_2026_Master.xlsx\").xlsx();\n\nconst performances = workbook.sheet(\"Observable flat\", {headers: true});\n","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"$4f","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3,"value":"\nconst sets = performances.map(d => ({\n ...d,\n start_minute: Number(d.start_minute),\n end_minute: Number(d.end_minute),\n genre_category: d.genre_category || \"Unclassified\"\n}));\n\nconst venues = workbook.sheet(\"Venues\", {headers: true})\n .filter(d => d.latitude != null && d.longitude != null)\n .map(d => ({\n ...d,\n latitude: Number(d.latitude),\n longitude: Number(d.longitude)\n }));\n\nconst genres = [\n \"All genres\",\n ...new Set(sets.map(d => d.genre_category))\n].slice(1).sort();\n\ngenres.unshift(\"All genres\");\n\ndisplay(`${sets.length} performances · ${venues.length} mapped venues · ${genres.length - 1} genres`);\n","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"$50","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W51","stdlib":"2"}} 24:null