43:["$","title",null,{"children":"Vintage: The Records Travel On | Tony Griffiths | Observable"}] 4b:T1002, const globeView = (() => { // 1. Dimensions const w = Math.min(width, 1000); const h = 900; // 2. Main container const host = document.createElement("div"); host.style.cssText = ` position:relative; width:${w}px; height:${h}px; background:${palette.background}; border-radius:14px; overflow:hidden; `; const scene = document.createElement("div"); host.appendChild(scene); // 3. Graphic title const heading = document.createElement("div"); heading.style.cssText = ` position:absolute; top:24px; left:26px; z-index:10; pointer-events:none; font-family:Arial,sans-serif; `; heading.innerHTML = `

30 DAY MAP CHALLENGE / 06 — VINTAGE

THE RECORDS TRAVEL ON

From Brentford to new homes, 2026

`; host.appendChild(heading); // 4. Sales counter const counter = document.createElement("div"); counter.style.cssText = ` position:absolute; bottom:22px; left:26px; z-index:10; color:white; font:13px Arial,sans-serif; pointer-events:none; `; host.appendChild(counter); // Marketplace legend const legend = document.createElement("div"); legend.style.cssText = ` position:absolute; bottom:20px; right:22px; z-index:10; color:white; font:12px Arial,sans-serif; background:#17133EBB; padding:10px 14px; border-radius:8px; pointer-events:none; line-height:1.9; `; legend.innerHTML = `

● Discogs

● eBay

◎ Brentford origin

Line thickness ∝ sale value

`; host.appendChild(legend); // 5. Create Globe.GL scene const globe = new Globe(scene, { animateIn: false }) .width(w) .height(h) .backgroundColor(palette.background) .globeImageUrl(null) .showGraticules(true) .showAtmosphere(true) .atmosphereColor(palette.aqua) .atmosphereAltitude(0.13) // Country polygons .polygonsData( land.features.filter( d => d.properties?.ISO_A2 !== "AQ" ) ) .polygonCapColor(() => palette.land) .polygonSideColor(() => palette.land) .polygonStrokeColor(() => palette.borders) .polygonAltitude(0.004) // Brentford: animated origin ripple .pointsData([]) .ringsData([{ lat: records[0].startLat, lng: records[0].startLng }]) .ringLat("lat") .ringLng("lng") .ringAltitude(0.009) .ringColor(() => palette.yellow) .ringMaxRadius(2.5) .ringPropagationSpeed(1.6) .ringRepeatPeriod(1100) // Prepare flight paths .arcsData([]) .arcStartLat("startLat") .arcStartLng("startLng") .arcEndLat("endLat") .arcEndLng("endLng") .arcColor("colour") .arcStroke("stroke") .arcAltitudeAutoScale(0.45) .arcDashLength(0.65) .arcDashGap(0.2) .arcDashAnimateTime(5000) .arcsTransitionDuration(350) .arcLabel(d => `${d.label} | £${d.price.toFixed(2)} | ${d.destination}` ) // Prepare record sleeve markers .htmlElementsData([]) .htmlLat("lat") .htmlLng("lng") .htmlAltitude(0.012) .htmlTransitionDuration(0); // 6. Solid-colour ocean globe.globeMaterial().color.set(palette.ocean); // 7. Initial camera position globe.pointOfView({ lat: 50, lng: -40, altitude: 2.3 }, 0); globe.controls().autoRotate = false; return { host, globe, counter }; })(); display(globeView.host); // Clean up resources if this cell is replaced invalidation.then(() => { globeView.globe.pauseAnimation(); globeView.globe.controls().dispose(); globeView.globe.renderer().dispose(); }); 4c:T4486, const vintageMarkers = (() => { const globe = globeView.globe; // EDIT THESE TO TUNE CLUSTERING const LABEL_WIDTH = 180; const LABEL_HEIGHT = 64; const COLLISION_GAP = 8; const MARKER_SIZE = 32; // One location per destination (not per country) const locations = new Map(); for (const r of visibleRoutes) { const key = `${r.destination}|${r.country_iso2}`; if (!locations.has(key)) { locations.set(key, { key, lat: r.endLat, lng: r.endLng, records: [] }); } locations.get(key).records.push(r); } const places = [...locations.values()]; const markerViews = new Map(); // Great-circle distance from Brentford function distanceKm(r) { const rad = Math.PI / 180; const p1 = r.startLat * rad; const p2 = r.endLat * rad; const dp = (r.endLat - r.startLat) * rad; const dl = (r.endLng - r.startLng) * rad; const a = Math.sin(dp / 2) ** 2 + Math.cos(p1) * Math.cos(p2) * Math.sin(dl / 2) ** 2; return Math.round( 2 * 6371 * Math.asin(Math.sqrt(Math.min(1, a))) / 10 ) * 10; } // Reuse the existing detail panel let panel = globeView.host.querySelector("[data-record-panel]"); if (!panel) { panel = document.createElement("div"); panel.setAttribute("data-record-panel", "true"); globeView.host.appendChild(panel); } panel.style.cssText = ` position:absolute; top:135px; right:18px; width:235px; max-width:43%; max-height:60%; overflow-y:auto; z-index:30; padding:15px; border:1px solid #C1B4F7; border-radius:12px; background:#17133EF4; color:white; font:13px Arial,sans-serif; box-shadow:0 8px 25px #0009; pointer-events:auto; display:none; `; panel.dataset.pinned = "false"; function addText(value, css = "") { const el = document.createElement("div"); el.textContent = String(value); el.style.cssText = css; panel.appendChild(el); return el; } function beginPanel(pinned) { panel.replaceChildren(); panel.dataset.pinned = String(pinned); panel.style.display = "block"; } function addClose() { const close = document.createElement("button"); close.type = "button"; close.textContent = "✕ Close"; close.style.cssText = ` position:sticky; top:0; z-index:20; display:block; margin:0 0 12px auto; padding:7px 12px; border:1px solid #C1B4F7; border-radius:6px; background:#293A95; color:white; font:12px Arial,sans-serif; cursor:pointer; box-shadow:0 2px 8px #0008; `; close.onclick = (event) => { event.stopPropagation(); // Remove video iframe to stop playback panel.replaceChildren(); panel.dataset.pinned = "false"; panel.style.display = "none"; }; // Place at TOP rather than bottom of panel panel.prepend(close); } function showRecord(r, pinned = true) { beginPanel(pinned); // Make the video story panel larger if (r.id === "S004") { const w = Math.min(345, globeView.host.clientWidth - 32); const h = globeView.host.clientHeight; const pos = globe.getScreenCoords( r.endLat, r.endLng, 0.012 ); let x = pos.x + 24; if (x + w > globeView.host.clientWidth - 16) { x = pos.x - w - 24; } x = Math.max( 16, Math.min(x, globeView.host.clientWidth - w - 16) ); const y = Math.max( 115, Math.min(pos.y - 65, h - 470) ); panel.style.width = `${w}px`; panel.style.maxWidth = "none"; panel.style.maxHeight = `${Math.max(180, h - y - 16)}px`; panel.style.overflowY = "auto"; panel.style.left = `${x}px`; panel.style.top = `${y}px`; panel.style.right = "auto"; } else { // Normal record panel panel.style.width = "235px"; panel.style.maxWidth = "43%"; panel.style.maxHeight = "60%"; panel.style.left = "auto"; panel.style.top = "135px"; panel.style.right = "18px"; } // Your existing record details continue below const age = Number(r.record_age_years) || (2026 - r.year); addText(`${r.platform.toUpperCase()} / VINTAGE VINYL`, `font-size:10px;letter-spacing:2px; color:${r.colour};margin-bottom:12px`); addText(r.artist, "color:#C1B4F7;font-size:13px;margin-bottom:5px"); addText(r.title, "font-weight:bold;font-size:19px;line-height:1.25;margin-bottom:10px"); addText(`${r.format || "Vinyl"} · ${r.year}`, "font-size:12px;color:#DDD5F7;margin-bottom:6px"); if (r.catalogue_no) { addText(r.catalogue_no, "color:#B5AADB;font-size:11px;margin-bottom:12px"); } addText(`${age} YEARS OLD`, `font-size:22px;font-weight:bold; color:${r.colour};margin:12px 0`); addText(`Brentford → ${r.destination}`, "font-size:12px;margin-bottom:6px"); addText(`~${distanceKm(r).toLocaleString("en-GB")} km · direct distance`, "font-size:13px;font-weight:bold;margin-bottom:7px"); addText(`Sold ${r.date}`, "font-size:11px;color:#C1B4F7"); // Special story: Satellite Serenade Pt. 1 if (r.id === "S004") { addText( "FROM THE DECKS TO THE SCREEN", `font-size:11px; font-weight:bold; letter-spacing:1px; color:${palette.yellow}; margin:15px 0 8px;` ); addText( "My original 1994 pressing travelled by DHL " + "to Connecticut for a video shoot with " + "Sasha and John Digweed, celebrating 30 years " + "of Northern Exposure.", `font-size:12px; line-height:1.5; margin-bottom:12px;` ); // Player loads only when requested const play = document.createElement("button"); play.textContent = "▶ Watch the video"; play.style.cssText = ` width:100%; padding:10px; border:1px solid ${palette.aqua}; border-radius:6px; background:#293A95; color:white; cursor:pointer; font:bold 12px Arial; `; play.onclick = () => { const iframe = document.createElement("iframe"); iframe.src = "https://www.youtube-nocookie.com/embed/Di0CQLLu4o0"; iframe.title = "Northern Exposure: Sasha and John Digweed"; iframe.style.cssText = ` display:block; width:100%; height:220px; border:0; border-radius:6px; `; iframe.allow = "accelerometer; autoplay; encrypted-media; " + "gyroscope; picture-in-picture; web-share"; iframe.allowFullscreen = true; play.replaceWith(iframe); }; panel.appendChild(play); // Fallback link if embedding is restricted const link = document.createElement("a"); link.href = "https://youtu.be/Di0CQLLu4o0"; link.target = "_blank"; link.rel = "noopener noreferrer"; link.textContent = "Open on YouTube"; link.style.cssText = ` display:block; margin-top:9px; color:${palette.aqua}; font-size:11px; `; panel.appendChild(link); } addClose(); } function showSelection(items, pinned = true) { if (items.length === 1) { showRecord(items[0], pinned); return; } beginPanel(pinned); // Make the video story panel larger addText(`${items.length} VINTAGE RECORDS`, "color:#FFE16A;font-size:17px;font-weight:bold;margin-bottom:8px"); addText("Select a record to explore its history", "color:#C1B4F7;font-size:11px;margin-bottom:12px"); for (const r of items) { const btn = document.createElement("button"); btn.textContent = `${r.artist} — ${r.title} (${r.year})`; btn.style.cssText = ` display:block; width:100%; text-align:left; margin:5px 0; padding:8px; color:white; background:#293A95; border:1px solid ${r.colour}; border-radius:5px; cursor:pointer; font:12px Arial,sans-serif; `; btn.onclick = () => showRecord(r, true); panel.appendChild(btn); } addClose(); } // Create an anchored miniature vinyl record function makeMarker(place) { const root = document.createElement("div"); root.style.cssText = ` position:relative; width:0; height:0; overflow:visible; `; const disc = document.createElement("button"); disc.type = "button"; disc.style.cssText = ` position:absolute; left:-${MARKER_SIZE / 2}px; top:-${MARKER_SIZE / 2}px; width:${MARKER_SIZE}px; height:${MARKER_SIZE}px; padding:0; border-radius:50%; border:1px solid #73758A; background: repeating-radial-gradient( circle at center, #0B0C14 0px, #151723 2px, #3B3D4C 3px, #0B0C14 4px ); box-shadow:0 2px 8px #0009; cursor:pointer; pointer-events:auto; `; const labelCentre = document.createElement("div"); labelCentre.style.cssText = ` position:absolute; width:14px; height:14px; left:8px; top:8px; border-radius:50%; display:grid; place-items:center; `; const spindle = document.createElement("div"); spindle.style.cssText = ` width:3px; height:3px; border-radius:50%; background:#0B0C14; `; labelCentre.appendChild(spindle); disc.appendChild(labelCentre); // Count badge for grouped records const count = document.createElement("span"); count.style.cssText = ` position:absolute; top:-8px; right:-8px; min-width:16px; height:16px; padding:0 2px; border-radius:9px; background:#FFFFFF; color:#17133E; font:bold 10px Arial; display:none; place-items:center; `; disc.appendChild(count); root.appendChild(disc); // Label attached just to the right of the record const badge = document.createElement("button"); badge.type = "button"; badge.style.cssText = ` position:absolute; left:23px; top:-17px; width:${LABEL_WIDTH}px; box-sizing:border-box; padding:7px 9px; border:1px solid #C1B4F7; border-radius:6px; background:#17133EF0; color:white; text-align:left; cursor:pointer; font:11px Arial,sans-serif; line-height:1.25; box-shadow:0 3px 12px #0008; pointer-events:auto; `; const title = document.createElement("div"); title.style.cssText = ` font-weight:bold; margin-bottom:4px; overflow-wrap:break-word; `; const subtitle = document.createElement("div"); subtitle.style.cssText = ` font-size:10px; color:#D8D0F4; `; badge.append(title, subtitle); root.appendChild(badge); const view = { root, disc, labelCentre, count, badge, title, subtitle, place, items: place.records }; markerViews.set(place.key, view); // Hover for preview; click for persistent selection root.addEventListener("mouseenter", () => { if (panel.dataset.pinned !== "true") { showSelection(view.items, false); } }); root.addEventListener("mouseleave", () => { if (panel.dataset.pinned !== "true") { panel.style.display = "none"; } }); root.addEventListener("click", event => { event.stopPropagation(); showSelection(view.items, true); }); return root; } function setMarkerContent(view, items, placeCount) { view.items = items; const colours = [...new Set(items.map(r => r.colour))]; const colour = colours.length === 1 ? colours[0] : palette.borders; view.labelCentre.style.background = colours.length === 1 ? colour : `conic-gradient(${palette.aqua} 0 50%, ${palette.coral} 50% 100%)`; view.badge.style.borderColor = colour; view.count.style.display = items.length > 1 ? "grid" : "none"; view.count.textContent = String(items.length); if (items.length === 1) { const r = items[0]; view.title.textContent = `${r.artist} — ${r.title}`; view.subtitle.textContent = `${r.year} · ~${distanceKm(r).toLocaleString("en-GB")} km` + (r.id === "S004" ? " · ▶ VIDEO STORY" : ""); } else { view.title.textContent = `${items.length} vintage records`; view.subtitle.textContent = placeCount > 1 ? `${placeCount} nearby destinations · Select to explore` : `${view.place.records[0].destination} · Select to explore`; } } // Screen-space collision detection function recluster() { const camera = globe.pointOfView(); const w = globe.width(); const h = globe.height(); const rad = Math.PI / 180; // Check which locations are on the visible globe const projected = places.map(place => { const p = globe.getScreenCoords( place.lat, place.lng, 0.012 ); const dot = Math.sin(place.lat * rad) * Math.sin(camera.lat * rad) + Math.cos(place.lat * rad) * Math.cos(camera.lat * rad) * Math.cos((place.lng - camera.lng) * rad); const front = dot > 1 / (1 + camera.altitude) - 0.025; const onScreen = Number.isFinite(p.x) && Number.isFinite(p.y) && p.x > -50 && p.x < w + 50 && p.y > -50 && p.y < h + 50; const leftSide = p.x > w - LABEL_WIDTH - 45; const x0 = leftSide ? p.x - LABEL_WIDTH - 23 : p.x + 23; return { place, x:p.x, y:p.y, leftSide, visible:front && onScreen, box:{ x0, x1:x0 + LABEL_WIDTH, y0:p.y - 18, y1:p.y - 18 + LABEL_HEIGHT } }; }); // Reset markers before applying clusters for (const view of markerViews.values()) { view.root.style.visibility = "visible"; setMarkerContent( view, view.place.records, 1 ); } const active = projected.filter(p => p.visible); // Merge labels whose bounding boxes would overlap const parent = active.map((_, i) => i); function find(i) { while (parent[i] !== i) { parent[i] = parent[parent[i]]; i = parent[i]; } return i; } function merge(a, b) { const ra = find(a); const rb = find(b); if (ra !== rb) parent[rb] = ra; } function overlaps(a, b) { const A = a.box, B = b.box; const boxesOverlap = A.x0 < B.x1 + COLLISION_GAP && A.x1 + COLLISION_GAP > B.x0 && A.y0 < B.y1 + COLLISION_GAP && A.y1 + COLLISION_GAP > B.y0; const discsOverlap = Math.hypot(a.x - b.x, a.y - b.y) < MARKER_SIZE + 8; return boxesOverlap || discsOverlap; } for (let i = 0; i < active.length; i++) { for (let j = i + 1; j < active.length; j++) { if (overlaps(active[i], active[j])) { merge(i, j); } } } const clusters = new Map(); for (let i = 0; i < active.length; i++) { const root = find(i); if (!clusters.has(root)) clusters.set(root, []); clusters.get(root).push(active[i]); } // Show one badge per cluster, with all its records for (const members of clusters.values()) { const cx = members.reduce((s, p) => s + p.x, 0) / members.length; const cy = members.reduce((s, p) => s + p.y, 0) / members.length; const representative = [...members].sort((a, b) => Math.hypot(a.x - cx, a.y - cy) - Math.hypot(b.x - cx, b.y - cy) )[0]; const allRecords = members.flatMap(p => p.place.records); for (const member of members) { const view = markerViews.get(member.place.key); if (!view) continue; if (member !== representative) { view.root.style.visibility = "hidden"; } } const chosen = markerViews.get(representative.place.key); if (!chosen) continue; setMarkerContent(chosen, allRecords, members.length); // Put labels to the left when near the right edge chosen.badge.style.left = representative.leftSide ? "auto" : "23px"; chosen.badge.style.right = representative.leftSide ? "23px" : "auto"; } } // Install the globe HTML layer globe .htmlElement(makeMarker) .htmlLat("lat") .htmlLng("lng") .htmlAltitude(0.012) .htmlTransitionDuration(0) .htmlElementsData(places) .arcsData(visibleRoutes) .arcLabel(() => "") .onArcHover(() => {}) .onArcClick(r => { if (r) showRecord(r, true); }); // Recluster as the globe rotates or zooms let frame = 0; let disposed = false; function scheduleCluster() { if (disposed || frame) return; frame = requestAnimationFrame(() => { frame = 0; if (!disposed) recluster(); }); } globe.onZoom(scheduleCluster); requestAnimationFrame(scheduleCluster); // Prevent obsolete callbacks on reactive cell updates invalidation.then(() => { disposed = true; if (frame) cancelAnimationFrame(frame); globe.onZoom(() => {}); }); // Vintage-focused counter const countryCount = new Set( visibleRoutes.map(r => r.country_iso2) ).size; globeView.counter.textContent = `${visibleRoutes.length} / ${routes.length} RECORDS · ` + `${places.length} DESTINATIONS · ` + `${countryCount} COUNTRIES`; return true; })(); 4d:T5f0, ### A particularly special journey: Brentford to Northern Exposure 30-Year Anniversary Shoot in Connecticut One of my 1994 original pressings, Keiichi Suzuki's *Satellite Serenade Pt. 1*, has a rather remarkable story. I'd played it at a local event during Brentford's Creative Mile celebrations. Shortly afterwards, someone in Connecticut bought it on Discogs, explaining that it was needed urgently for a video shoot. I sent it by DHL express so it could arrive in time. The video turned out to feature Sasha and John Digweed revisiting the records and stories behind their legendary *Northern Exposure* mixes, 30 years after the first album appeared. And there, in the opening sequence, was **my old record**. There's something rather wonderful about that. A record I bought in my twenties, played and treasured for decades, travelled across the Atlantic and found itself being celebrated on camera by two of the most influential DJs of that era. [Watch Northern Exposure: The Original Records with Sasha & John Digweed on YouTube](https://youtu.be/Di0CQLLu4o0) ### Exploring the map Rotate and zoom the globe to follow the journeys. Use the slider to reveal the records in the order they were sold. - **Aqua:** Discogs - **Coral:** eBay - **Yellow:** The original collection in Brentford Each miniature vinyl marker identifies a destination. Nearby records are grouped when space is limited; select a marker to discover the artist, title, original pressing year, age and approximate distance travelled.4e:T49d, const countryCounts = new Map(); // Count visible records by destination country for (const d of visibleRoutes) { const code = d.country_iso2; countryCounts.set(code, (countryCounts.get(code) || 0) + 1); } const activeCountries = new Set(countryCounts.keys()); // Country identification from the GeoJSON const countryCode = d => d.properties?.ISO_A2; // Update the existing globe, without rebuilding it globeView.globe .polygonsTransitionDuration(650) .polygonCapColor(d => activeCountries.has(countryCode(d)) ? "#B8A4F4" : palette.land ) .polygonSideColor(d => activeCountries.has(countryCode(d)) ? "#A28ADB" : palette.land ) .polygonStrokeColor(d => activeCountries.has(countryCode(d)) ? "#F0E5FF" : palette.borders ) .polygonAltitude(d => activeCountries.has(countryCode(d)) ? 0.009 : 0.004 ) .polygonLabel(d => { const count = countryCounts.get(countryCode(d)); if (!count) return ""; return `${d.properties?.ADMIN}: ${count} record${count === 1 ? "" : "s"}`; }); display({ illuminatedCountries: [...activeCountries], recordsVisible: visibleRoutes.length }); 4f:[{"id":"2d6a55984c60820612031b0df62525c444c3b538e17019db7717e72dca45f66215c516cf79fbd052a15306c26f5e96f20e5dfa5ce76c0b28c3ba138409d3813b","href":"https://static.observableusercontent.com/files/2d6a55984c60820612031b0df62525c444c3b538e17019db7717e72dca45f66215c516cf79fbd052a15306c26f5e96f20e5dfa5ce76c0b28c3ba138409d3813b","name":"vintage_record_parcel_flows_updated.csv","type":"text/csv","lastModified":1794080654391,"size":2513},{"id":"5dacc52be4e280d41fa8a09fc55951c7702d6e177cbfaeabcba5712d5a4084ee2f8c54422a7f13975a700e8c9dc615b574ba50930644dabf95487bb142ade2af","href":"https://static.observableusercontent.com/files/5dacc52be4e280d41fa8a09fc55951c7702d6e177cbfaeabcba5712d5a4084ee2f8c54422a7f13975a700e8c9dc615b574ba50930644dabf95487bb142ade2af","name":"vintage_record_sales_consolidated_updated.xlsx","type":"application/vnd.openxmlformats-officedocument.spreadsheetml.sheet","lastModified":1794080563665,"size":28047},{"id":"c789e8cfa5138b8039fbe38d2ccc81cfcc9e83e077fcddb6c708b30434b3508cba266c00acb4f231ecade1c8988873369e9bf2ca3efc731681db56bf3bffb81a","href":"https://static.observableusercontent.com/files/c789e8cfa5138b8039fbe38d2ccc81cfcc9e83e077fcddb6c708b30434b3508cba266c00acb4f231ecade1c8988873369e9bf2ca3efc731681db56bf3bffb81a","name":"vintage_record_sales_observable_updated.csv","type":"text/csv","lastModified":1794080597675,"size":4675},{"id":"7b86b0185af3eb702f1c37b69fbca3b4573423c3a2c823cf7afad017d4100871ab76980a97569dbda5d5cfdfba0d3a5c4c8ab9bf6f5e34cd3806c45dace94ae4","href":"https://static.observableusercontent.com/files/7b86b0185af3eb702f1c37b69fbca3b4573423c3a2c823cf7afad017d4100871ab76980a97569dbda5d5cfdfba0d3a5c4c8ab9bf6f5e34cd3806c45dace94ae4","name":"image.png","type":"image/png","lastModified":1794095717054,"size":301243}] 47:{"id":"050209cb70b84206","slug":"vintage-the-records-travel-on","title":"Vintage: The Records Travel On","thumbnail":"caf6499b55b56b42ac4ade544227fb4136e0c5e3573370f7b930dbcf998a247c","access_level":"public","create_time":"$D2026-11-02T09:08:17.377Z","update_time":"$D2026-11-08T00:02:43.020Z","view_time":null,"first_public_time":"$D2026-11-07T23:19:22.991Z","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":120,"publish_version":120,"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":"Vintage: The Records Travel On","cells":[{"id":19,"value":"# Vintage: The Records Travel On\n\n### Original pressings. New destinations. Decades later.\n\nBack in the 1990s, listening to and buying music was how I used all my free time. It was my passion. I spent much of my early twenties collecting vinyl — ambient, techno, trance, trip-hop and all kinds of electronic music. Some of these records have been with me for more than 30 years.\n\nThey had been sitting on a shelf until quite recently when I started playing many of them at a local bar in Brentford. Some of these are rare original pressings, others are old favourites with plenty of memories attached.\n\nOver the past few months, I've started passing some of them on to new owners. It made me think about: **where have all these records ended up?**\n\nThis interactive globe traces 11 records from my collection in Brentford to their new homes across Britain, the United States and Canada.\n\nEach connection represents a record with its own vintage — some travelling thousands of miles to begin another chapter.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":"\nconst rawSales = await FileAttachment(\"vintage_record_sales_observable_updated.csv\").csv();\n\ndisplay(rawSales);\n","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3,"value":"\ndisplay(Object.keys(rawSales[0]));\n","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"\nconst records = rawSales.map(d => ({\n ...d,\n id: d.sale_id,\n label: `${d.artist} — ${d.title}`,\n year: Number(d.pressing_year),\n price: Number(d.sale_price_gbp),\n date: d.map_date,\n destination: d.destination,\n startLat: Number(d.origin_lat),\n startLng: Number(d.origin_lon),\n endLat: Number(d.dest_lat),\n endLng: Number(d.dest_lon),\n cover: d.cover_art_url || \"\"\n}));\n\ndisplay({\n records: records.length,\n validCoordinates: records.filter(d =>\n [d.startLat, d.startLng, d.endLat, d.endLng]\n .every(Number.isFinite)\n ).length,\n totalValue: records.reduce((sum, d) => sum + d.price, 0),\n sample: records[0]\n});\n","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"\nconst palette = {\n background: \"#17133E\",\n ocean: \"#293A95\",\n land: \"#8C73CE\",\n borders: \"#C1B4F7\",\n aqua: \"#42E5CE\",\n coral: \"#FF7192\",\n yellow: \"#FFE16A\",\n white: \"#FFFFFF\"\n};\n\ndisplay(palette);\n","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"\nimport Globe from \"npm:globe.gl@2.46.2\";\n\ndisplay(`Globe.GL loaded: ${typeof Globe}`);\n","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"\nconst landResponse = await fetch(\n \"https://raw.githubusercontent.com/vasturiano/globe.gl/master/example/datasets/ne_110m_admin_0_countries.geojson\"\n);\n\nif (!landResponse.ok) {\n throw new Error(`Could not load countries: ${landResponse.status}`);\n}\n\nconst land = await landResponse.json();\n\ndisplay({\n type: land.type,\n countriesLoaded: land.features.length,\n example: land.features[0].properties.ADMIN\n});\n","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"\nconst routes = [...records]\n .sort((a, b) => a.date.localeCompare(b.date))\n .map(d => ({\n\n ...d,\n\n // Marketplace determines colour\n colour:\n d.platform === \"Discogs\"\n ? palette.aqua\n : palette.coral,\n\n // Line diameter directly proportional to sale value\n stroke: d.price * 0.006\n\n }));\n\ndisplay({\n numberOfRoutes: routes.length,\n discogs: routes.filter(d => d.platform === \"Discogs\").length,\n ebay: routes.filter(d => d.platform === \"eBay\").length,\n smallestStroke: Math.min(...routes.map(d => d.stroke)),\n largestStroke: Math.max(...routes.map(d => d.stroke))\n});\n","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"\nconst stage = view(\n Inputs.range([0, routes.length], {\n value: routes.length,\n step: 1,\n label: \"Records revealed in sale-date order\"\n })\n);\n","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"\nconst visibleRoutes = routes.slice(0, stage);\n\ndisplay({\n recordsVisible: visibleRoutes.length\n\n});\n","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"$4b","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"$4c","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"$4d","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"$4e","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"### About the data and visualisation\n\nCreated for the **#30DayMapChallenge — Day 6: Vintage**.\n\nThe map uses my personal Discogs and eBay sales history from August–October 2026. Records date from 1993–2001.\n\nBuyer locations have been generalised to town or city centres for privacy. Connections are illustrative great-circle routes, not actual postal journeys. The chronology uses sale or order dates where dispatch dates are unavailable.\n\nGeographic boundaries: Natural Earth. Interactive globe: Globe.GL, developed in Observable. The project was developed through creative coding experiments with assistance from ChatGPT.\n\n*A personal experiment in mapping music, memory and the unexpected afterlives of vinyl.*","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4f","stdlib":"2"}} 42:null