27:null 28:["$","title",null,{"children":"World Map with Interactive Controls_0624 | Ivy | Observable"}] 2d:T16de,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", "#ac8368"); 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"; g.append(outer, inner, label); g.addEventListener("click", (e) => { e.stopPropagation(); if (focused === i) { // 再次点击当前已聚焦的点 → 回到全图 resetView(); } else { 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); } // Reset to full-map view function resetView() { focused = -1; panel.style.display = "none"; animateTo({k: 1, tx: 0, ty: 0}); } // 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", () => resetView()); render(); return container; }2e:T6da,cities = [ { name: "Elmswell", lat: 52.2370, lon: 0.9190, group: "uk", dateRange: "Friday, May 9th", events: [ { date: "May 9th", title: "Interview with Clay Fields Resident:", groups: [ ["P2F_UK", "New Social Housing", "No Involvement in Construction"] ] } ] }, { name: "Cromford", lat: 53.1114, lon: -1.5567, group: "uk", dateRange: "May 11th - May 13th", events: [ { date: "May 13th", title: "Interviews with Peak District Residents:", groups: [ ["P6_UK (Couple)", "New Single Family Home", "Involved in Construction Process & Management"], ["P8_UK (Couple)", "Involved in Construction Process", "Hempcrete 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: "May 18th - May 21st", title: "Interviews with Belleherbe Region Residents:", groups: [ ["P1F_FR", "Sunroom Addition", "Involved in Construction Management"], ["P7M-FR", "Involved in Construction Process", "Farmhouse Restoration and Renovation"], ["P5-FR(Couple)", "No Involvement in Construction", "Farmhouse Restoration and Renovation"], ["P3M-FR", "Involved in Construction Process", "Retrofit 1975 building"] ] } ] }, { name: "Amsterdam", lat: 52.3676, lon: 4.9041, group: "eu", dateRange: "May 23rd - May 27th", events: [ { date: "May 23rd & May 24th", title: "Interview:", groups: [ ["P4-ND", "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":1781633022244.754,"size":107761}] 2b:{"id":"b08615ac9e636f47","slug":null,"title":"World Map with Interactive Controls_0624","thumbnail":"15d5da5cace158418597efaf83c93e287e0ef7e4c96a2a8e604b414639082360","access_level":"public","create_time":"$D2026-06-16T18:03:42.244Z","update_time":"$D2026-08-26T01:34:46.076Z","view_time":null,"first_public_time":"$D2026-06-16T18:03:53.859Z","has_unpublished_edits":null,"fork":{"id":"b44ccd699fcc467c","slug":null,"title":"World Map with Interactive Controls","owner":{"id":"9935a4781ceb9cbf","login":"ivy7","name":"Ivy"}},"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":289,"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":0,"collection":null,"type":"notebook","body":{"title":"World Map with Interactive Controls_0624","cells":[{"id":0,"value":"md`# World Map with Interactive Controls_0624\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: \"#ac8368\",\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"