45:["$","title",null,{"children":"The Sound of Summer | Tony Griffiths | Observable"}] 4d:Te18,// Cell 4 const EARTH_RADIUS = 6371008.8; const RAD = Math.PI / 180; // Great-circle distance between two coordinates, in metres. function distanceMetres(a, b) { const lat1 = a[1] * RAD; const lat2 = b[1] * RAD; const dLat = (b[1] - a[1]) * RAD; const dLon = (b[0] - a[0]) * RAD; const h = Math.sin(dLat / 2) ** 2 + Math.cos(lat1) * Math.cos(lat2) * Math.sin(dLon / 2) ** 2; return 2 * EARTH_RADIUS * Math.asin(Math.min(1, Math.sqrt(h))); } // Compass bearing from point A to point B. function bearingBetween(a, b) { const lat1 = a[1] * RAD; const lat2 = b[1] * RAD; const dLon = (b[0] - a[0]) * RAD; const x = Math.sin(dLon) * Math.cos(lat2); const y = Math.cos(lat1) * Math.sin(lat2) - Math.sin(lat1) * Math.cos(lat2) * Math.cos(dLon); return (Math.atan2(x, y) / RAD + 360) % 360; } // Destination point from a coordinate, bearing and distance. function destinationPoint(start, bearing, metres) { const lat1 = start[1] * RAD; const lon1 = start[0] * RAD; const angle = metres / EARTH_RADIUS; const theta = bearing * RAD; const lat2 = Math.asin( Math.sin(lat1) * Math.cos(angle) + Math.cos(lat1) * Math.sin(angle) * Math.cos(theta) ); const lon2 = lon1 + Math.atan2( Math.sin(theta) * Math.sin(angle) * Math.cos(lat1), Math.cos(angle) - Math.sin(lat1) * Math.sin(lat2) ); return [lon2 / RAD, lat2 / RAD]; } // Illustrative directional correction in dB. // Front of speakers: 0 dB. // Behind speakers: -8 dB. // Wind: up to +2 dB downwind or -2 dB upwind. function directionalCorrection(bearing, model) { const relative = (bearing - model.facing) * RAD; const speakerEffect = -4 * (1 - Math.cos(relative)); const windEffect = model.windTo === null ? 0 : 2 * Math.cos((bearing - model.windTo) * RAD); return speakerEffect + windEffect; } // Estimate sound level at a listener coordinate. // The distance is floored at 100 m to avoid // extrapolating the simple model close to the source. function estimateSoundLevel(listener, model) { const actualDistance = distanceMetres(model.source, listener); const distance = Math.max(100, actualDistance); const bearing = bearingBetween(model.source, listener); return model.refDb - 20 * Math.log10(distance / 100) + directionalCorrection(bearing, model); } // Generate one closed isophone at a target sound level. // Only 72 directional samples per contour. function makeIsophone(targetDb, model) { const points = []; for (let i = 0; i < 72; i++) { const bearing = i * 5; const correction = directionalCorrection(bearing, model); const radius = 100 * Math.pow( 10, (model.refDb + correction - targetDb) / 20 ); points.push( destinationPoint(model.source, bearing, radius) ); } points.push([...points[0]]); // GeoJSON exterior rings use anticlockwise order. return points.reverse(); } // Create five non-overlapping GeoJSON sound bands. function buildIsophones(model, levels) { const features = levels.map((db, i) => { const outer = makeIsophone(db, model); const nextDb = levels[i + 1]; // A hole removes the area belonging to the // next louder band. const coordinates = [outer]; if (nextDb !== undefined) { const inner = makeIsophone(nextDb, model); coordinates.push(inner.slice().reverse()); } return { type: "Feature", properties: { db }, geometry: { type: "Polygon", coordinates } }; }); return { type: "FeatureCollection", features }; } 4e:T1fc8,// Cell 8 const mapShell = document.createElement("div"); mapShell.style.cssText = ` position: relative; width: 100%; height: 640px; border-radius: 14px; overflow: hidden; background: #111b29; font-family: system-ui, sans-serif; `; // The actual MapLibre container. const mapHost = document.createElement("div"); mapHost.style.cssText = ` position:absolute; inset:0; `; mapShell.appendChild(mapHost); // Helper for information panels over the map. function addMapOverlay(style, content) { const el = document.createElement("div"); el.style.cssText = ` position:absolute; z-index:2; pointer-events:none; ${style} `; el.innerHTML = content; mapShell.appendChild(el); return el; } // Map title. const mapHeading = addMapOverlay( `top:16px; left:16px; padding:12px 16px; background:rgba(12,22,35,0.88); color:white; border-radius:9px;`, `

THE SOUND OF SUMMER

Gunnersbury Park

Illustrative acoustic contours

` ); const mapVenueLabel = mapHeading.querySelector(".venue-name"); const mapSettingsLabel = mapHeading.querySelector(".venue-settings"); // Legend. const legendRows = contourLevels .slice() .reverse() .map(db => `

${db} dB(A)

`).join(""); addMapOverlay( `bottom:16px; left:16px; padding:12px 15px; background:rgba(12,22,35,0.9); color:#f1f5f9; border-radius:9px;`, `

SOUND LEVEL CONTOURS

${legendRows}

Illustrative model • not measured

` ); // Listener information, updated when the map is clicked. const listenerPanel = addMapOverlay( `bottom:16px; right:16px; width:210px; max-width:42%; padding:13px 15px; background:rgba(12,22,35,0.92); color:white; border-radius:9px;`, ` Listening point

Click anywhere on the map to estimate the sound level at that location.

` ); // Display the container before constructing the map. display(mapShell); // Create MapLibre. const soundMap = new maplibregl.Map({ container: mapHost, style: "https://tiles.openfreemap.org/styles/dark", center: [-0.302, 51.494], zoom: 12.0, pitch: 0, bearing: 0, attributionControl: true }); soundMap.addControl( new maplibregl.NavigationControl(), "top-right" ); // Shared GeoJSON helpers. const emptyGeoJSON = () => ({ type: "FeatureCollection", features: [] }); const pointGeoJSON = (coordinates, label) => ({ type: "FeatureCollection", features: [{ type: "Feature", properties: { label }, geometry: { type: "Point", coordinates } }] }); // Colour expression for the acoustic bands. const bandColourExpression = [ "match", ["get", "db"], ...contourLevels.flatMap( db => [db, contourColours[db]] ), "#ffffff" ]; // Listener state. soundMap.listenerCoordinate = null; soundMap.soundModel = null; // Refresh the listener readout. soundMap.refreshListener = () => { const listener = soundMap.listenerCoordinate; const model = soundMap.soundModel; if (!listener || !model) return; const distance = distanceMetres( model.source, listener ); const db = estimateSoundLevel(listener, model); listenerPanel.innerHTML = `

MODELLED AT LISTENER

${db.toFixed(1)} dB(A)

${Math.round(distance).toLocaleString("en-GB")} m from acoustic source

Hypothetical sound level, not a measurement.

`; }; // Create sources and layers after the style loads. const soundMapReady = new Promise(resolve => { soundMap.once("load", () => { // Acoustic contour polygons. soundMap.addSource("isophones", { type: "geojson", data: emptyGeoJSON() }); soundMap.addLayer({ id: "sound-bands", type: "fill", source: "isophones", paint: { "fill-color": bandColourExpression, "fill-opacity": 0.40 } }); soundMap.addLayer({ id: "sound-outlines", type: "line", source: "isophones", paint: { "line-color": "#dce8ed", "line-width": 1.2, "line-opacity": 0.65 } }); // Speaker facing direction. soundMap.addSource("speaker-beam", { type: "geojson", data: emptyGeoJSON() }); soundMap.addLayer({ id: "speaker-beam-line", type: "line", source: "speaker-beam", paint: { "line-color": "#ffdc83", "line-width": 3, "line-dasharray": [2, 1], "line-opacity": 0.95 } }); // Speaker/source position. soundMap.addSource("speaker", { type: "geojson", data: emptyGeoJSON() }); soundMap.addLayer({ id: "speaker-halo", type: "circle", source: "speaker", paint: { "circle-radius": 16, "circle-color": "#ffb95c", "circle-opacity": 0.25 } }); soundMap.addLayer({ id: "speaker-point", type: "circle", source: "speaker", paint: { "circle-radius": 7, "circle-color": "#ffe5a5", "circle-stroke-color": "#ffffff", "circle-stroke-width": 2 } }); soundMap.addLayer({ id: "speaker-label", type: "symbol", source: "speaker", layout: { "text-field": "SPEAKERS", "text-size": 12, "text-offset": [0, 1.7], "text-anchor": "top" }, paint: { "text-color": "#ffffff", "text-halo-color": "#13202d", "text-halo-width": 2 } }); // Clickable listener point. soundMap.addSource("listener", { type: "geojson", data: emptyGeoJSON() }); soundMap.addLayer({ id: "listener-point", type: "circle", source: "listener", paint: { "circle-radius": 7, "circle-color": "#ffffff", "circle-stroke-color": "#328dff", "circle-stroke-width": 3 } }); soundMap.addLayer({ id: "listener-label", type: "symbol", source: "listener", layout: { "text-field": "LISTENER", "text-size": 12, "text-offset": [0, 1.6], "text-anchor": "top" }, paint: { "text-color": "#ffffff", "text-halo-color": "#13202d", "text-halo-width": 2 } }); // Single click selects the listener position. soundMap.on("click", event => { const coordinates = [ event.lngLat.lng, event.lngLat.lat ]; soundMap.listenerCoordinate = coordinates; soundMap.getSource("listener").setData( pointGeoJSON(coordinates, "Listener") ); soundMap.refreshListener(); }); resolve(soundMap); }); }); // Clean up when the notebook cell is invalidated. invalidation.then(() => soundMap.remove()); 4f:T628,// Cell 8 await soundMapReady; // Update acoustic contour polygons. soundMap.getSource("isophones").setData( soundContours ); // Update speaker position. soundMap.getSource("speaker").setData( pointGeoJSON( activeVenue.coordinates, activeVenue.name ) ); // Draw a 400-metre directional indicator. const beamEnd = destinationPoint( activeVenue.coordinates, speakerDirection, 400 ); const beamGeoJSON = { type: "FeatureCollection", features: [{ type: "Feature", properties: {}, geometry: { type: "LineString", coordinates: [ activeVenue.coordinates, beamEnd ] } }] }; soundMap.getSource("speaker-beam").setData( beamGeoJSON ); // Update the model used for listener calculations. soundMap.soundModel = soundModel; // Update the map headings. mapVenueLabel.textContent = activeVenue.name; mapSettingsLabel.textContent = `${referenceLevel} dB(A) at 100 m · ` + `Facing ${speakerDirection}° · ` + windScenario; // Recalculate the existing listener point. soundMap.refreshListener(); // Re-centre only when changing venues. // Sliders will NOT reset the camera. if (soundMap.lastVenueId !== activeVenue.id) { soundMap.lastVenueId = activeVenue.id; soundMap.easeTo({ center: activeVenue.coordinates, zoom: 12.0, duration: 500 }); } // Lightweight update confirmation. display(html`

Five acoustic contour bands updated. Click the map to inspect a listening location.

`); 50:T6e7, ## How this map works This experiment uses a simplified outdoor sound-propagation model. Sound decreases with distance according to the idealised free-field relationship: **L(r) = L₁₀₀ − 20 log₁₀(r / 100)** where L₁₀₀ is an assumed sound level at 100 metres from the source. Additional illustrative corrections represent: - **Speaker direction:** Up to 8 dB lower behind the speakers. - **Wind direction:** A directional adjustment of up to ±2 dB. - **Listener position:** Great-circle distance and bearing from the acoustic source. Contours are generated analytically at five sound levels: 50, 55, 60, 65 and 70 dB(A). ### What this model does not represent It does not account for actual PA-system specifications, frequency-dependent propagation, buildings, barriers, terrain, acoustic reflections, atmospheric refraction, background noise or multiple stages. All source levels, speaker positions and directional corrections are illustrative. Results are **not measured sound levels**, predictions of whether music will be audible, or evidence of regulatory compliance. The model is intended for visual exploration and education, rather than professional environmental noise assessment. ### Data and technology - Map rendering: MapLibre GL JS - Basemap: CARTO Dark Matter, using OpenStreetMap contributors' data - Geographic calculations: JavaScript, using spherical Earth geometry - Acoustic calculations: Simplified geometric spreading, with illustrative directional adjustments - Venue positions: Approximate initial locations, subject to refinement **30 Day Map Challenge 2026 — Day 11: Sound** Created as a personal exploration of music, geography and the invisible soundscape of West London, with AI-assisted development. 51:[] 49:{"id":"1616ffb670a872b1","slug":"the-sound-of-summer","title":"The Sound of Summer","thumbnail":"edaf54ce60e85b7803babd313105551486949f18216fac0fa5fc8ae2861ac628","access_level":"public","create_time":"$D2026-11-11T21:55:33.107Z","update_time":"$D2026-11-11T22:43:11.468Z","view_time":null,"first_public_time":"$D2026-11-11T22:42:22.817Z","has_unpublished_edits":null,"fork":false,"stars":0,"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":37,"publish_version":37,"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":"The Sound of Summer","cells":[{"id":1,"value":"# The Sound of Summer\n### Mapping the invisible festival music of Brentford\n\n**30 Day Map Challenge — Day 11: Sound**\n\nHow far does the music from West London's summer festivals travel?\n\nThree outdoor concert venues — **Gunnersbury Park**, **Boston Manor Park** and **Gtech Community Stadium** — sit within a few kilometres of one another. Their music sometimes carries into our garden and surrounding neighbourhoods.\n\nThis interactive experiment explores how distance, speaker orientation and wind direction might change the geographical footprint of a concert.\n\n**Try it:** Select a venue, adjust the sound and wind controls, then click anywhere on the map to investigate the modelled sound level.\n\n*An illustrative acoustic model, not measured noise levels, an audibility prediction or a regulatory noise assessment.*\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":"// Cell 2\n\n\nimport * as maplibregl from \"npm:maplibre-gl@5.24.0\";\n\nconst soundMapCSS = document.createElement(\"link\");\nsoundMapCSS.rel = \"stylesheet\";\nsoundMapCSS.href =\n \"https://unpkg.com/maplibre-gl@5.24.0/dist/maplibre-gl.css\";\n\ndocument.head.appendChild(soundMapCSS);\n\ninvalidation.then(() => soundMapCSS.remove());\n","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"// Cell 3\n\n\nconst venues = [\n {\n id: \"gunnersbury\",\n name: \"Gunnersbury Park\",\n coordinates: [-0.2896, 51.4963]\n },\n {\n id: \"boston\",\n name: \"Boston Manor Park — Junction 2\",\n coordinates: [-0.3194, 51.4904]\n },\n {\n id: \"gtech\",\n name: \"Gtech Community Stadium\",\n coordinates: [-0.2884, 51.4909]\n }\n];\n\n// Lower to higher sound levels, in dB(A).\n\nconst contourLevels = [60, 65, 70, 75];\n\nconst contourColours = {\n 60: \"#3987BE\",\n 65: \"#36B5C5\",\n 70: \"#F4BD65\",\n 75: \"#F07469\"\n};\n\n\n// Check our venue definitions.\ndisplay(Inputs.table(venues));\n","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"$4d","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"// Cell 5\n\n\nconst venueChoice = view(\n Inputs.select(\n venues.map(v => v.name),\n {\n label: \"Concert venue\",\n value: venues[0].name\n }\n )\n);\n\nconst referenceLevel = view(\n Inputs.range([70, 90], {\n label: \"Sound level at 100 m — dB(A)\",\n value: 85,\n step: 1\n })\n);\n\nconst speakerDirection = view(\n Inputs.range([0, 360], {\n label: \"Speaker direction — degrees from north\",\n value: 135,\n step: 5\n })\n);\n\nconst windScenario = view(\n Inputs.select(\n [\n \"Calm\",\n \"Blowing towards NE\",\n \"Blowing towards SW\"\n ],\n {\n label: \"Wind scenario\",\n value: \"Calm\"\n }\n )\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":"// Cell 6\n\n\nconst activeVenue = venues.find(\n v => v.name === venueChoice\n);\n\nconst windBearing = {\n \"Calm\": null,\n \"Blowing towards NE\": 45,\n \"Blowing towards SW\": 225\n}[windScenario];\n\nconst soundModel = {\n source: activeVenue.coordinates,\n refDb: referenceLevel,\n facing: speakerDirection,\n windTo: windBearing\n};\n\nconst soundContours = buildIsophones(\n soundModel,\n contourLevels\n);\n\n// Small confirmation of the active model settings.\ndisplay(html`\n

\n ${activeVenue.name}\n \n | ${referenceLevel} dB(A) at 100 m\n | Facing ${speakerDirection}°\n | ${windScenario}\n \n

\n`);\n","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"$4e","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"$4f","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"$50","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W51","stdlib":"2"}} 44:null