43:["$","title",null,{"children":"#30DayMapChallenge 2026, Day 4: Clusters | Xavier Olive | Observable"}] 4b:Tb47,// ── The map: MapLibre basemap, WebGL2 bundling overlay ─────────── map = { const height = Math.min(720, Math.max(420, width * 0.7)); const container = html`

`; const [base, canvas, status] = container.children; yield container; const map = new maplibregl.Map({ container: base, style, center: [1.5, 52.73], zoom: 5, dragRotate: false, pitchWithRotate: false, renderWorldCopies: false, cooperativeGestures: true, attributionControl: {customAttribution: "AIS © aisstream.io, Digitraffic (Fintraffic, CC BY 4.0)"} }); map.touchZoomRotate.disableRotation(); map.addControl(new maplibregl.NavigationControl({showCompass: false}), "top-right"); const gl = canvas.getContext("webgl2", {premultipliedAlpha: false}); if (!gl) { status.textContent = "This browser does not provide WebGL2."; return; } const bundler = createBundler(gl, trails); let dirty = true, frame; const view = () => { const dpr = Math.min(devicePixelRatio || 1, 2); const w = Math.round(canvas.clientWidth * dpr), h = Math.round(canvas.clientHeight * dpr); if (canvas.width !== w || canvas.height !== h) { canvas.width = w; canvas.height = h; } const c = maplibregl.MercatorCoordinate.fromLngLat(map.getCenter()); return {center: [c.x, c.y], world: 512 * 2 ** map.getZoom(), dpr}; }; // Inputs are read through the viewof element, so the map is not rebuilt when they change const form = viewof controls; let last = {}; const update = () => { const {radius, angle} = form.value; if (radius !== last.radius || angle !== last.angle) bundler.restart({radius, angle, iterations: 30}); last = {radius, angle}; dirty = true; }; form.addEventListener("input", update); map.on("move", () => (dirty = true)); map.on("resize", () => (dirty = true)); update(); (function tick() { if (!bundler.done) { bundler.step(); dirty = true; status.textContent = `Bundling ${bundler.progress.join("/")}`; } else status.textContent = `${trails.trails.length.toLocaleString("en")} tracks · ${bundler.samples.toLocaleString("en")} points`; if (dirty) { bundler.draw(view(), {mix: form.value.mix}); dirty = false; } frame = requestAnimationFrame(tick); })(); invalidation.then(() => { cancelAnimationFrame(frame); form.removeEventListener("input", update); map.remove(); gl.getExtension("WEBGL_lose_context")?.loseContext(); }); }4c:T41d,legend = { // Colour is the heading of each track, as in the bundler's shader const r = 26, steps = d3.range(0, 360, 3); const color = (deg) => { const a = deg * Math.PI / 180; return d3.rgb(...[0, 2.094, 4.189].map((o) => 255 * (0.55 + 0.45 * Math.cos(a + o)))).formatHex(); }; return html`

${svg``}

Colour is the heading of each track: ships going opposite ways get opposite colours.

`; }4d:T80d,**The parameters.** *Bundling* blends every track between its recorded path (0) and its bundled position (1): halfway, the lanes stand out and each ship's route still shows. *Kernel radius* is how far, in kilometres, each point looks for neighbours to be pulled towards: a small radius keeps nearby lanes and parallel canals apart, a large one merges them into a few broad corridors. *Direction tolerance* is how different two headings may be for tracks to attract each other: a low tolerance only bundles ships going the same way, so opposite lanes stay apart; at 180°, all directions merge. Changing the radius or the tolerance runs the bundling again, in a second or so. **How it works.** Positions below one knot are dropped. Rivers and canals are kept: almost half of the moving ships are barges, mostly in the Netherlands, Belgium and Germany, and the Rhine delta shows up as its own dense network. Both sources often relay the same reports, so positions of the same ship less than 5 seconds and 50 metres apart are kept once. Each ship's remaining positions are cut into stretches at gaps over 20 minutes and resampled every kilometre. Then, on the GPU, every point is splatted into a density texture that also remembers which way it was heading. Each point moves a little up the density, only counting the neighbours that head roughly the same way (the *direction tolerance*), and stays close to its neighbours on the same track. The kernel radius is in kilometres at every latitude, correcting for the stretch of the Mercator projection. Thirty iterations, with a shrinking kernel, give the bundles. The *Bundling* slider goes back to the original tracks. This follows the idea of attribute-driven edge bundling ([Peysakhovich, Hurter and Telea, 2015](https://recherche.enac.fr/~hurter/ADEB/ADEB-PacificVis2015.pdf)). The bundles are an abstraction: they show where traffic flows, not the exact path of any ship. AIS stations are on the coast, so ships far offshore are missing, and tracks start and stop where coverage does; they fade at both ends.4e:T3114,// Direction-aware kernel density edge bundling on the GPU (WebGL2), for ship trails. // Inspired by ADEB (Peysakhovich, Hurter, Telea, PacificVis 2015) and its flightgl port. // // Trails are given in a unit square domain (Web Mercator, normalised). Each iteration: // 1. splat every sample into a density texture, also accumulating its initial direction; // 2. move each sample up the density gradient, only counting neighbours flowing the same way, // then smooth it towards its trail neighbours. Trail ends move too (they are where coastal // coverage starts or stops, not real endpoints) and fade out when drawn. // Kernel sizes are in kilometres: they are corrected for the Mercator scale at each latitude. // Drawing interpolates between original and bundled positions, with additive blending. createBundler = function (gl, data, { grid = 2048 } = {}) { const TW = 256; if (!gl.getExtension("EXT_color_buffer_float")) throw new Error("Renderable float textures (EXT_color_buffer_float) are required."); const seed = [], meta = [], segments = []; let index = 0; for (const trail of data.trails) { const n = trail.xy.length; trail.xy.forEach((p, j) => { const a = trail.xy[Math.max(0, j - 1)], b = trail.xy[Math.min(n - 1, j + 1)]; const norm = Math.hypot(b[0] - a[0], b[1] - a[1]) || 1; seed.push(p[0], p[1], (b[0] - a[0]) / norm, (b[1] - a[1]) / norm); meta.push(j === 0 ? index : index - 1, j === n - 1 ? index : index + 1, trail.c, Math.min(j, n - 1 - j)); if (j < n - 1) segments.push(index, index + 1); index++; }); } const N = index, TH = Math.ceil(N / TW), SEGMENTS = segments.length / 2; const pad = (values) => { const out = new Float32Array(TW * TH * 4); out.set(values); return out; }; const seeds = pad(seed), metas = pad(meta), initial = new Float32Array(TW * TH * 4); for (let i = 0; i < N; i++) { initial[i * 4] = seeds[i * 4]; initial[i * 4 + 1] = seeds[i * 4 + 1]; } function program(vs, fs) { const compile = (type, source) => { const s = gl.createShader(type); gl.shaderSource(s, source); gl.compileShader(s); if (!gl.getShaderParameter(s, gl.COMPILE_STATUS)) throw new Error(gl.getShaderInfoLog(s)); return s; }; const p = gl.createProgram(); gl.attachShader(p, compile(gl.VERTEX_SHADER, vs)); gl.attachShader(p, compile(gl.FRAGMENT_SHADER, fs)); gl.linkProgram(p); if (!gl.getProgramParameter(p, gl.LINK_STATUS)) throw new Error(gl.getProgramInfoLog(p)); return p; } const set = (p, name, ...v) => { const l = gl.getUniformLocation(p, name); if (l !== null) [null, gl.uniform1f, gl.uniform2f, gl.uniform3f][v.length].call(gl, l, ...v); }; const seti = (p, name, v) => { const l = gl.getUniformLocation(p, name); if (l !== null) gl.uniform1i(l, v); }; function texture(w, h, format, type, values, filter = gl.NEAREST) { const t = gl.createTexture(); gl.bindTexture(gl.TEXTURE_2D, t); for (const [k, v] of [[gl.TEXTURE_MIN_FILTER, filter], [gl.TEXTURE_MAG_FILTER, filter], [gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE], [gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE]]) gl.texParameteri(gl.TEXTURE_2D, k, v); gl.texImage2D(gl.TEXTURE_2D, 0, format, w, h, 0, gl.RGBA, type, values); return t; } function framebuffer(t) { const f = gl.createFramebuffer(); gl.bindFramebuffer(gl.FRAMEBUFFER, f); gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, t, 0); if (gl.checkFramebufferStatus(gl.FRAMEBUFFER) !== gl.FRAMEBUFFER_COMPLETE) throw new Error("Float framebuffer incomplete on this GPU."); return f; } const bind = (p, name, t, unit) => { gl.activeTexture(gl.TEXTURE0 + unit); gl.bindTexture(gl.TEXTURE_2D, t); seti(p, name, unit); }; const seedTex = texture(TW, TH, gl.RGBA32F, gl.FLOAT, seeds), metaTex = texture(TW, TH, gl.RGBA32F, gl.FLOAT, metas); const state = [texture(TW, TH, gl.RGBA32F, gl.FLOAT, initial), texture(TW, TH, gl.RGBA32F, gl.FLOAT, initial)]; const stateFbo = state.map(framebuffer); const flow = texture(grid, grid, gl.RGBA16F, gl.HALF_FLOAT, null, gl.LINEAR), flowFbo = framebuffer(flow); const vao = gl.createVertexArray(); gl.bindVertexArray(vao); const common = `precision highp float; precision highp int; uniform sampler2D uState, uSeed, uMeta; vec4 point(sampler2D t, int i) { return texelFetch(t, ivec2(i % ${TW}, i / ${TW}), 0); } uniform float uOriginY, uSpan, uCosRef; // Mercator stretch at this point relative to the reference latitude: cos(lat) = 1 / cosh(pi (1 - 2 y)) float stretch(vec2 d) { return uCosRef * cosh(3.14159265 * (1. - 2. * (uOriginY + d.y * uSpan))); }`; const splat = program(`#version 300 es ${common} uniform float uRadius; out vec2 vDirection; void main() { int i = gl_VertexID; vec2 p = point(uState, i).xy; gl_Position = vec4(p * 2. - 1., 0., 1.); gl_PointSize = max(1., 2. * uRadius * stretch(p) * ${grid}.); vDirection = point(uSeed, i).zw; }`, `#version 300 es precision highp float; in vec2 vDirection; out vec4 density; void main() { vec2 d = gl_PointCoord * 2. - 1.; float r = dot(d, d); if (r >= 1.) discard; float k = (1. - r) * (1. - r); density = vec4(k, k * vDirection, 0.); }`); const advect = program(`#version 300 es void main() { vec2 p = vec2(float((gl_VertexID << 1) & 2), float(gl_VertexID & 2)); gl_Position = vec4(p * 2. - 1., 0., 1.); }`, `#version 300 es ${common} uniform sampler2D uFlow; uniform int uCount; uniform float uRadius, uStep, uCos, uMaxDrift, uSmooth, uGain; out vec4 result; void main() { ivec2 texel = ivec2(gl_FragCoord.xy); int i = texel.y * ${TW} + texel.x; if (i >= uCount) { result = vec4(0.); return; } vec4 m = point(uMeta, i), s = point(uSeed, i); vec2 p = point(uState, i).xy; float k = stretch(s.xy), radius = uRadius * k; float center = texture(uFlow, p).r; vec2 gradient = vec2(0.); for (int a = -2; a <= 2; a++) for (int b = -2; b <= 2; b++) { if (a == 0 && b == 0) continue; vec2 delta = vec2(a, b) * radius * .5; vec4 f = texture(uFlow, p + delta); float magnitude = length(f.gb); if (magnitude < 1e-5 || dot(s.zw, f.gb / magnitude) < uCos) continue; gradient += (f.r - center) * delta / max(dot(delta, delta), 1e-8); } float g = length(gradient); vec2 move = g > 1e-4 ? gradient / g * uStep * k * min(1., g / (uGain / k)) : vec2(0.); // Ends have a single neighbour: smooth them half as much bool first = int(m.x) == i, last = int(m.y) == i; vec2 neighbours = first ? point(uState, int(m.y)).xy : last ? point(uState, int(m.x)).xy : (point(uState, int(m.x)).xy + point(uState, int(m.y)).xy) * .5; vec2 proposed = p + move + (first || last ? .5 : 1.) * uSmooth * (neighbours - p), drift = proposed - s.xy; float dl = length(drift), maxDrift = uMaxDrift * k; if (dl > maxDrift) proposed = s.xy + drift * maxDrift / dl; result = vec4(clamp(proposed, vec2(0.), vec2(1.)), 0., 0.); }`); const TYPE_COLORS = [[.35, .62, 1], [1, .45, .32], [.98, .85, .3], [.4, .9, .55], [.85, .45, .95], [.62, .7, .76]]; const lines = program(`#version 300 es ${common} layout(location = 0) in vec2 aSegment; uniform vec2 uCenter, uResolution; uniform float uWorld, uMix, uWidth; uniform int uColor; out vec3 vColor; out float vFade; vec3 heading(vec2 d) { float a = atan(-d.y, d.x); return .55 + .45 * cos(a + vec3(0., 2.094, 4.189)); } const vec3 TYPES[6] = vec3[6](${TYPE_COLORS.map((c) => `vec3(${c.map((x) => x.toFixed(2)).join(",")})`).join(",")}); vec2 screen(vec2 d) { return (d - uCenter) * uSpan * uWorld; } // pixels from the canvas centre, y down; uCenter in domain units void main() { int i = int(aSegment.x), j = int(aSegment.y); vec4 si = point(uSeed, i), sj = point(uSeed, j); vec2 ap = screen(mix(si.xy, point(uState, i).xy, uMix)), bp = screen(mix(sj.xy, point(uState, j).xy, uMix)), axis = bp - ap; float len = length(axis); vec2 normal = len > 1e-5 ? vec2(-axis.y, axis.x) / len : vec2(0., 1.); int v = gl_VertexID; float along = (v == 1 || v == 2 || v == 4) ? 1. : 0., side = (v == 0 || v == 1 || v == 3) ? -1. : 1.; vec2 px = mix(ap, bp, along) + normal * side * uWidth * .5; gl_Position = vec4(px.x / uResolution.x, -px.y / uResolution.y, 0., 1.); // uResolution is half the canvas size vColor = uColor == 0 ? heading(sj.xy - si.xy) : TYPES[int(point(uMeta, i).z)]; vFade = smoothstep(0., 4., mix(point(uMeta, i).w, point(uMeta, j).w, along)); }`, // fade the first and last 4 km `#version 300 es precision highp float; in vec3 vColor; in float vFade; uniform float uOpacity; out vec4 color; void main() { color = vec4(vColor, uOpacity * vFade); }`); const segmentBuffer = gl.createBuffer(); gl.bindBuffer(gl.ARRAY_BUFFER, segmentBuffer); gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(segments), gl.STATIC_DRAW); const cosRef = Math.cos(data.lat_c * Math.PI / 180); const stretchUniforms = (p) => { set(p, "uOriginY", data.origin[1]); set(p, "uSpan", data.span); set(p, "uCosRef", cosRef); }; let front = 0, iteration = 0, total = 0, params = {}; const unit = (km) => km / data.km_per_unit; return { samples: N, segments: SEGMENTS, typeColors: TYPE_COLORS, get done() { return iteration >= total; }, get progress() { return [iteration, total]; }, /** Start again from the original trails; radius in km, angle in degrees */ restart({ radius = 8, angle = 35, iterations = 30 } = {}) { for (const t of state) { gl.bindTexture(gl.TEXTURE_2D, t); gl.texSubImage2D(gl.TEXTURE_2D, 0, 0, 0, TW, TH, gl.RGBA, gl.FLOAT, initial); } front = 0; iteration = 0; total = iterations; params = { radius, angle }; }, /** One bundling iteration; returns true when finished */ step() { if (iteration >= total) return true; const progress = iteration / Math.max(1, total - 1), h = unit(params.radius) * Math.pow(.4, progress); gl.bindFramebuffer(gl.FRAMEBUFFER, flowFbo); gl.viewport(0, 0, grid, grid); gl.clearColor(0, 0, 0, 0); gl.clear(gl.COLOR_BUFFER_BIT); gl.enable(gl.BLEND); gl.blendFunc(gl.ONE, gl.ONE); gl.useProgram(splat); bind(splat, "uState", state[front], 0); bind(splat, "uSeed", seedTex, 1); set(splat, "uRadius", h); stretchUniforms(splat); gl.bindVertexArray(vao); gl.drawArrays(gl.POINTS, 0, N); gl.disable(gl.BLEND); const target = 1 - front; gl.bindFramebuffer(gl.FRAMEBUFFER, stateFbo[target]); gl.viewport(0, 0, TW, TH); gl.useProgram(advect); bind(advect, "uState", state[front], 0); bind(advect, "uSeed", seedTex, 1); bind(advect, "uMeta", metaTex, 2); bind(advect, "uFlow", flow, 3); stretchUniforms(advect); seti(advect, "uCount", N); set(advect, "uRadius", h); set(advect, "uStep", h * .1); set(advect, "uSmooth", .3); set(advect, "uGain", 2 / h); set(advect, "uCos", Math.cos(params.angle * Math.PI / 180)); set(advect, "uMaxDrift", unit(params.radius) * .8); gl.drawArrays(gl.TRIANGLES, 0, 3); front = target; iteration++; return iteration >= total; }, /** Draw on the default framebuffer; view = {center: [mercatorX, mercatorY], world: pixels per mercator unit} */ draw(view, { mix = 1, color = 0, opacity = 1 } = {}) { const canvas = gl.canvas, dpr = view.dpr || 1; gl.bindFramebuffer(gl.FRAMEBUFFER, null); gl.viewport(0, 0, canvas.width, canvas.height); gl.clearColor(0, 0, 0, 0); gl.clear(gl.COLOR_BUFFER_BIT); gl.useProgram(lines); bind(lines, "uState", state[front], 0); bind(lines, "uSeed", seedTex, 1); bind(lines, "uMeta", metaTex, 2); set(lines, "uSpan", data.span); set(lines, "uCenter", (view.center[0] - data.origin[0]) / data.span, (view.center[1] - data.origin[1]) / data.span); set(lines, "uWorld", view.world * dpr); set(lines, "uResolution", canvas.width / 2, canvas.height / 2); set(lines, "uMix", mix); seti(lines, "uColor", color); gl.bindVertexArray(vao); gl.bindBuffer(gl.ARRAY_BUFFER, segmentBuffer); gl.enableVertexAttribArray(0); gl.vertexAttribPointer(0, 2, gl.FLOAT, false, 0, 0); gl.vertexAttribDivisor(0, 1); gl.enable(gl.BLEND); gl.blendFunc(gl.SRC_ALPHA, gl.ONE); // Constant widths in pixels: a soft halo and a thin core set(lines, "uWidth", 4 * dpr); set(lines, "uOpacity", .1 * opacity); gl.drawArraysInstanced(gl.TRIANGLES, 0, 6, SEGMENTS); set(lines, "uWidth", 1.3 * dpr); set(lines, "uOpacity", .6 * opacity); gl.drawArraysInstanced(gl.TRIANGLES, 0, 6, SEGMENTS); gl.disable(gl.BLEND); }, }; }4f:[{"id":"b0c1e56497325e101aa3c613ded2135e0e7f02a845d584bd077a8b39e8ee885e14a7cd0f0f2b707e1dcb7c78c183e83d9b949d3a2665655254ab82be05459f5f","href":"https://static.observableusercontent.com/files/b0c1e56497325e101aa3c613ded2135e0e7f02a845d584bd077a8b39e8ee885e14a7cd0f0f2b707e1dcb7c78c183e83d9b949d3a2665655254ab82be05459f5f","name":"style.json","type":"application/json","lastModified":1793699939154,"size":8015},{"id":"bbd9d45d8ee55ed7915a35950239d50d26c003af5f71ea6034db8fd462bd860876ccd14ec6116d4599e139bdd0d0057849526f004518c10fadb85490137aabac","href":"https://static.observableusercontent.com/files/bbd9d45d8ee55ed7915a35950239d50d26c003af5f71ea6034db8fd462bd860876ccd14ec6116d4599e139bdd0d0057849526f004518c10fadb85490137aabac","name":"trails.json.gz","type":"application/octet-stream","lastModified":1793780507302,"size":5759941}] 47:{"id":"ecd99cb490f3893f","slug":"30-day-map-challenge-2026-day-4-clusters","title":"#30DayMapChallenge 2026, Day 4: Clusters","thumbnail":"1b08819ea40e677381d7cf868270b7ef7734d0cc5137b009f235b475b85bb170","access_level":"public","create_time":"$D2026-11-03T09:57:03.960Z","update_time":"$D2026-11-04T09:18:50.173Z","view_time":null,"first_public_time":"$D2026-11-04T08:43:04.390Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"6b95df6ccdd0cd40","login":"xoolive","name":"Xavier Olive","avatar_url":"https://avatars-next.observableusercontent.com/e055a445877c5a8ee2da134a257760536c2d1ee2fcd43f3aaf3f40db54e13733","tier":"starter_2024","bio":"Research scientist. I like maps, code and data visualisation. I keep an eye on anything that can fly, an ear for fipradio and a foot ready for next trail.","followed_by_you":false,"follows_you":false},"version":79,"publish_version":79,"role":null,"authored":false,"authors":[{"type":"individual","id":"0b2e8d88aeec5ab4","login":"xoolive","name":"Xavier Olive","avatar_url":"https://avatars-next.observableusercontent.com/e055a445877c5a8ee2da134a257760536c2d1ee2fcd43f3aaf3f40db54e13733","tier":null,"bio":"Research scientist. I like maps, code and data visualisation. I keep an eye on anything that can fly, an ear for fipradio and a foot ready for next trail.","followed_by_you":false,"follows_you":false}],"members":[{"type":"team","id":"6b95df6ccdd0cd40","login":"xoolive","name":"Xavier Olive","avatar_url":"https://avatars-next.observableusercontent.com/e055a445877c5a8ee2da134a257760536c2d1ee2fcd43f3aaf3f40db54e13733","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":{"id":"a749676c7f0928cb","slug":"30-day-map-challenge","title":"30 day map challenge","owner":{"id":"6b95df6ccdd0cd40","login":"xoolive","name":"Xavier Olive"}},"type":"notebook","body":{"titling":"auto","title":"#30DayMapChallenge 2026, Day 4: Clusters","cells":[{"id":1,"value":"$${nav(4)}\n\n# #30DayMapChallenge 2026, Day 4: Clusters\n\nShips don't sail anywhere: they cluster into lanes. Here are 24 hours of AIS positions in European waters, from the Mediterranean to the Baltic, received by coastal stations and relayed by [aisstream.io](https://aisstream.io), with Finnish waters from Fintraffic's [Digitraffic](https://www.digitraffic.fi/en/marine-traffic/) service (CC BY 4.0). Both feeds were recorded with [ship162](https://github.com/xoolive/ship162), an open-source AIS receiver and decoder. The map opens on the Channel and the southern North Sea, among the busiest waters in the world; zoom out for the rest. Each ship's track is pulled towards nearby tracks heading the same way, a technique called *edge bundling*, so the lanes appear. Ships going one way never merge with ships going the other way, which is how the traffic separation scheme of the Dover Strait shows up as two parallel bundles.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3,"value":"$4b","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"$4c","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":"viewof controls = Inputs.form({\n mix: Inputs.range([0, 1], {value: 0.5, step: 0.01, label: \"Bundling\"}),\n radius: Inputs.range([2, 40], {value: 5, step: 1, label: \"Kernel radius (km)\"}),\n angle: Inputs.range([5, 180], {value: 35, step: 1, label: \"Direction tolerance (°)\"})\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"$4d","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"---\n\n*Code*","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"trails = {\n // 24 hours of tracks, gzipped (18 MB of JSON otherwise)\n const stream = await FileAttachment(\"trails.json.gz\").stream();\n return new Response(stream.pipeThrough(new DecompressionStream(\"gzip\"))).json();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"// Radar Dark (from Tangram), without the aeroway layers. Tiles © CARTO, data © OpenStreetMap contributors\nstyle = FileAttachment(\"style.json\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"// Navigation header of the series, defined in Day 1\nimport {nav} from \"@xoolive/30-day-map-challenge-2026-day-1-points\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"maplibregl = {\n // MapLibre GL JS 5.9, as an ES module, with its stylesheet\n const css = html``;\n document.head.append(css);\n invalidation.then(() => css.remove());\n const module = await import(\"https://cdn.jsdelivr.net/npm/maplibre-gl@5.9.0/+esm\");\n return module.default ?? module;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"$4e","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4f","stdlib":"2"}} 42:null