27:null 28:["$","title",null,{"children":"World Map with Interactive Controls | Ivy | Observable"}] 2d:T1642,map = { const NS = "http://www.w3.org/2000/svg"; // Outer container: holds svg + detail panel const container = html`

`; const svg = document.createElementNS(NS, "svg"); svg.setAttribute("viewBox", `-50 -25 ${width + 100} ${height + 120}`); svg.style.cssText = "width:100%;height:auto;display:block;cursor:default"; // Map body in a zoomable group; non-scaling-stroke keeps strokes thin when zoomed const scene = document.createElementNS(NS, "g"); scene.innerHTML = ` `; svg.appendChild(scene); // Marker layer: does not scale, so dots stay the same size const overlay = document.createElementNS(NS, "g"); svg.appendChild(overlay); container.appendChild(svg); // Detail panel (HTML overlay, top-right) const panel = html``; container.appendChild(panel); // Build the panel HTML for a city function panelHTML(d) { const esc = s => String(s).replace(/&/g,"&").replace(//g,">"); let h = `

${esc(d.name)}

`; if (d.dateRange) h += `

${esc(d.dateRange)}

`; for (const ev of d.events || []) { h += `

`; if (ev.date) h += `

${esc(ev.date)}

`; if (ev.title) h += `

${esc(ev.title)}

`; for (const g of ev.groups || []) { h += `

`; g.forEach((line, k) => h += `

${esc(line)}

`); h += `

`; } h += `

`; } return h; } // Each city's pixel coords on the un-zoomed map const pts = cities.map(d => projection([d.lon, d.lat])); let view = {k: 1, tx: 0, ty: 0}; // current zoom / pan let focused = -1; // Create markers const markers = cities.map((d, i) => { const g = document.createElementNS(NS, "g"); g.style.cursor = "pointer"; const outer = document.createElementNS(NS, "circle"); outer.setAttribute("r", 6); outer.setAttribute("fill", "#AF631C"); outer.setAttribute("stroke", "#fff"); outer.setAttribute("stroke-width", 1.5); const inner = document.createElementNS(NS, "circle"); inner.setAttribute("r", 2.5); inner.setAttribute("fill", "#fff"); const label = document.createElementNS(NS, "text"); label.setAttribute("x", 10); label.setAttribute("y", 4); label.setAttribute("font-size", 12); label.setAttribute("font-weight", 700); label.setAttribute("fill", "#fff"); label.setAttribute("stroke", "rgba(0,0,0,.6)"); label.setAttribute("stroke-width", 3); label.setAttribute("paint-order", "stroke"); label.textContent = d.name; label.style.display = "none"; // only show when zoomed in, avoids clutter in world view g.append(outer, inner, label); g.addEventListener("click", (e) => { e.stopPropagation(); zoomTo(i); }); overlay.appendChild(g); return {g, label}; }); // Re-position map and markers according to current view function render() { scene.setAttribute("transform", `translate(${view.tx},${view.ty}) scale(${view.k})`); markers.forEach((m, i) => { const sx = view.tx + view.k * pts[i][0]; const sy = view.ty + view.k * pts[i][1]; m.g.setAttribute("transform", `translate(${sx},${sy})`); m.label.style.display = (i === focused) ? "" : "none"; }); } // Easing animation function animateTo(target, cb) { const start = {...view}, t0 = performance.now(), dur = 700; (function frame(now) { const t = Math.min(1, (now - t0) / dur); const e = t < .5 ? 2*t*t : 1 - Math.pow(-2*t+2, 2)/2; // easeInOutQuad view = { k: start.k + (target.k - start.k) * e, tx: start.tx + (target.tx - start.tx) * e, ty: start.ty + (target.ty - start.ty) * e, }; render(); if (t < 1) requestAnimationFrame(frame); else if (cb) cb(); })(t0); } // Zoom to city i function zoomTo(i) { focused = i; const k = 6; // zoom factor, increase for closer const [px, py] = pts[i]; animateTo({k, tx: width/2 - k*px, ty: height/2 - k*py}, () => { panel.innerHTML = panelHTML(cities[i]); panel.style.display = ""; }); render(); } // Click empty space to zoom back out svg.addEventListener("click", () => { focused = -1; panel.style.display = "none"; animateTo({k: 1, tx: 0, ty: 0}); }); render(); return container; }2e:T9c8,cities = [ { name: "London", lat: 51.5074, lon: -0.1278, group: "uk", dateRange: "Arrival: Tuesday, May 6th", events: [ { date: "Thursday, May 8th", title: "Interview at Natural Building Systems:", groups: [ ["Chloe Donovan, Managing Director - Facility Tour"] ] } ] }, { name: "Elmswell", lat: 52.2370, lon: 0.9190, group: "uk", dateRange: "Friday, May 9th", events: [ { date: "Friday, May 9th", title: "Interview with Clay Fields Resident:", groups: [ ["Sharon Pryrek (Individual) <40", "New Social Housing", "No Involvement in Construction"] ] } ] }, { name: "Cromford", lat: 53.1114, lon: -1.5567, group: "uk", dateRange: "May 11th - May 13th (Derbyshire / Peak District)", events: [ { date: "May 11th - 12th", title: "Interview and Workshop with Alex Sparrow", groups: [] }, { date: "Tuesday, May 13th", title: "Interviews with Peak District Residents:", groups: [ ["Lloyd and Caroline Hankins (Couple) >40", "New Single Family Home", "Involved in Construction Process & Management"], ["Wendy and Steve Boem (Couple) >40", "Involved in Construction Process", "Hemplime Kitchen addition with lime cork restoration and renovation"] ] } ] }, { name: "Belleherbe", lat: 47.2333, lon: 6.8833, group: "eu", dateRange: "May 17th - May 21st", events: [ { date: "Sunday, May 18th - Wednesday, May 21st", title: "Interviews with Belleherbe Region Residents:", groups: [ ["Catherine Gern (Individual) >40, Retired", "Sunroom Addition", "Involved in Construction Management"], ["Nicholas Fabrice (Individual) >40", "Involved in Construction Process", "Farmhouse Restoration and Renovation"], ["Robert Jean-Guillaume & Nathalie Verbeau (Couple) >40", "No Involvement in Construction", "Farmhouse Restoration and Renovation"], ["Fabien Cucherousset (Individual) <40", "Involved in Construction Process", "Retrofit 1975 building"] ] } ] }, { name: "Amsterdam", lat: 52.3676, lon: 4.9041, group: "eu", dateRange: "May 23rd - May 27th", events: [ { date: "Friday, May 23rd & Saturday, May 24th", title: "Interview:", groups: [ ["Jan & Inka Menninga (Couple) >40, Retired", "New Prefab Single Family Home", "Involved in Construction Management"] ] } ] } ]2f:[{"id":"5b7bb44872469fc6f9f4256d902fba909728666ad0d5263654ce95f4470ec90527fdc39a1d1b70490f457d65c31795d651a4afc0745f72351916e715fddc7352","href":"https://static.observableusercontent.com/files/5b7bb44872469fc6f9f4256d902fba909728666ad0d5263654ce95f4470ec90527fdc39a1d1b70490f457d65c31795d651a4afc0745f72351916e715fddc7352","name":"countries-110m.json","type":"application/json","lastModified":1780363538250.625,"size":107761}] 2b:{"id":"b44ccd699fcc467c","slug":null,"title":"World Map with Interactive Controls","thumbnail":"dd24c26c3952035a074ea26939f3a1c8152c1dc3f94f426a1bafc14ee6ea07da","access_level":"public","create_time":"$D2026-06-02T01:25:38.250Z","update_time":"$D2026-06-08T19:43:20.469Z","view_time":null,"first_public_time":"$D2026-06-02T01:45:46.033Z","has_unpublished_edits":null,"fork":{"id":"ab3f24389408d0d8","slug":"world-map-with-interactive-controls","title":"World Map with Interactive Controls","owner":{"id":"41df323182593427","login":"jeffreymorganio","name":"Jeffrey Morgan"}},"stars":0,"starred":false,"owner":{"type":"team","id":"9935a4781ceb9cbf","login":"ivy7","name":"Ivy","avatar_url":"https://avatars-next.observableusercontent.com/343e245d64fbbba5f191d2ab00782c52a3b8cbec9cf1b0b5584d9fecc0683c4b","tier":"starter_2024"},"version":274,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"9a9f32600f5ebdba","login":"xinyu-liang","name":"Xinyu Liang","avatar_url":"https://avatars-next.observableusercontent.com/b373bd8332b69326efc7adc58edc5902f5cf46900ccae6e9520b45977ad423f6","tier":null}],"members":[{"type":"team","id":"9935a4781ceb9cbf","login":"ivy7","name":"Ivy","avatar_url":"https://avatars-next.observableusercontent.com/343e245d64fbbba5f191d2ab00782c52a3b8cbec9cf1b0b5584d9fecc0683c4b","tier":"starter_2024","role":"editor"},{"type":"individual","id":"9a9f32600f5ebdba","login":"xinyu-liang","name":"Xinyu Liang","avatar_url":"https://avatars-next.observableusercontent.com/b373bd8332b69326efc7adc58edc5902f5cf46900ccae6e9520b45977ad423f6","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"title":"World Map with Interactive Controls","cells":[{"id":0,"value":"md`# World Map with Interactive Controls\nThis notebook presents a [Natural Earth](https://github.com/d3/d3-geo#geoNaturalEarth1) projection of ${countryCount} countries with interative controls for changing the country fill colour, the colour of the borders between countries, the colour of the graticule and whether to show or hide the graticule.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":102,"value":"viewof countryFill = color({\n value: \"#dddddd\",\n title: \"Countries\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":105,"value":"viewof countryBorderStroke = color({\n value: \"#ffffff\",\n title: \"Borders\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":148,"value":"viewof landOutlineStroke = color({\n value: \"#666666\",\n title: \"Outline\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":99,"value":"viewof graticuleStroke = color({\n value: \"#AF631C\",\n title: \"Graticule\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":152,"value":"viewof showGraticule = checkbox({\n options: [{ value: \"true\", label: \"Show Graticule\" }],\n value: \"true\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":55,"value":"$2d","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":207,"value":"md`## Map Data`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"world = FileAttachment(\"countries-110m.json\").json(); // From https://www.npmjs.com/package/world-atlas","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":26,"value":"countries = topojson.feature(world, world.objects.countries)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":219,"value":"countryCount = countries.features.length","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":145,"value":"land = topojson.feature(world, world.objects.land)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":63,"value":"graticule = d3.geoGraticule().extent([[-180, -80], [180, 80]])()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":210,"value":"md`## Map Projection`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":70,"value":"height = 600","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":73,"value":"projection = d3.geoNaturalEarth2().fitSize([width, height], countries)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":72,"value":"path = d3.geoPath(projection)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":267,"value":"meridian180 = {\n const lats = [];\n for (let lat = -80; lat <= 80; lat += 2) lats.push(lat);\n return { type: \"LineString\", coordinates: lats.map(lat => [180, lat]) };\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":271,"value":"topParallel = {\n const lons = [];\n for (let lon = -180; lon <= 180; lon += 2) lons.push(lon);\n return { type: \"LineString\", coordinates: lons.map(lon => [lon, 80]) };\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":204,"value":"md`## Imports`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":67,"value":"d3 = require(\"d3-geo@2\", \"d3-geo-projection@3\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":30,"value":"topojson = require(\"topojson-client@3\");","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":154,"value":"import {color, checkbox} from \"@jashkenas/inputs\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":231,"value":"$2e","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W2f","stdlib":"1","titling":"auto"}} 2c:"$2b:body"