2e:null 2f:["$","title",null,{"children":"World Map Input with Zoom and Pan | Stu Murray | Observable"}] 34:T45b,viewof chart = { const context = DOM.context2d(width, height); const path = d3.geoPath(projection, context); context.canvas.value = 0; function render(land) { context.clearRect(0, 0, width, height); context.beginPath(), path(sphere), context.fillStyle = "#fff", context.fill(); land.features.forEach(function(feature,i) { context.beginPath(), path(feature), context.fillStyle = colourmap[+feature.id], context.fill(); }); context.beginPath(), path(sphere), context.stroke(); } return d3.select(context.canvas) .on('mousemove', (e) => { const mouseEvent = e; const { offsetX, offsetY } = mouseEvent; const { data } = context.getImageData(offsetX, offsetY, 1, 1); const colorKey = `rgb(${data[0]}, ${data[1]}, ${data[2]})`; const id = reversecolourmap[colorKey]; context.canvas.value = id; context.canvas.dispatchEvent(new CustomEvent("input")) console.log(id); }) .call(zoom(projection) .on("zoom.render", () => render(land110)) .on("end.render", () => render(land50))) .call(() => render(land50)) .node(); }35:T45f,function zoom( projection, { // Capture the projection’s original scale, before any zooming. scale = projection._scale === undefined ? (projection._scale = projection.scale()) : projection._scale, scaleExtent = [0.8, 10], translate = projection .translate() .map(d => d / (projection.scale() / scale)) } = {} ) { const zoom = d3 .zoom() .scaleExtent(scaleExtent.map(x => x * scale)) .on("start", zoomstarted) .on("zoom", zoomed); function zoomstarted() {} function zoomed(event) { const { k, x, y } = event.transform; projection .scale(k) .translate([ translate[0] * (k / scale) + x, translate[1] * (k / scale) + y ]); } return Object.assign( selection => selection .property("__zoom", d3.zoomIdentity.scale(projection.scale())) .call(zoom), { on(type, ...options) { return options.length ? (zoom.on(type, ...options), this) : zoom.on(type); }, filter() { return zoom.filter(...arguments), this; } } ); }36:[{"id":"5b7bb44872469fc6f9f4256d902fba909728666ad0d5263654ce95f4470ec90527fdc39a1d1b70490f457d65c31795d651a4afc0745f72351916e715fddc7352","href":"https://static.observableusercontent.com/files/5b7bb44872469fc6f9f4256d902fba909728666ad0d5263654ce95f4470ec90527fdc39a1d1b70490f457d65c31795d651a4afc0745f72351916e715fddc7352","name":"countries-110m.json","type":"application/json","lastModified":1664635029341.977,"size":107761},{"id":"254a99fef9cfdc739794cf276a25ffce226b9d17d64789497bbed4935f1fda7d621149894d3a06e546f0e5c53beda2580db0166433ff2fac65397af1aa3627ea","href":"https://static.observableusercontent.com/files/254a99fef9cfdc739794cf276a25ffce226b9d17d64789497bbed4935f1fda7d621149894d3a06e546f0e5c53beda2580db0166433ff2fac65397af1aa3627ea","name":"countries-50m.json","type":"application/json","lastModified":1664635029341.977,"size":756420}] 32:{"id":"b849cbeef6786b88","slug":"countries-selector-input","title":"World Map Input with Zoom and Pan","thumbnail":"3ae2e71c0a336013c4b2f69aa7ad74cc42bedadcf2f52eff91026c93c9a53e20","access_level":"public","create_time":"$D2022-10-01T14:37:09.341Z","update_time":"$D2022-10-05T15:45:31.356Z","view_time":null,"first_public_time":"$D2022-10-01T15:23:49.785Z","has_unpublished_edits":null,"fork":{"id":"5629863bcf3fd649","slug":"countries-pan-zoom","title":"Countries Pan & Zoom","owner":{"id":"8781e33d79a4bb92","login":"stuwilmur","name":"Stu Murray"}},"stars":0,"starred":false,"owner":{"type":"team","id":"8781e33d79a4bb92","login":"stuwilmur","name":"Stu Murray","avatar_url":"https://avatars-next.observableusercontent.com/b75116f0f53690768dc0e7c2700a4eaf7befae7b942ecd55d7f24c4c871761a5","tier":"starter_2024"},"version":636,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"b81ee3cd10201b1a","login":"stuwilmur","name":"Stu Murray","avatar_url":"https://avatars-next.observableusercontent.com/b75116f0f53690768dc0e7c2700a4eaf7befae7b942ecd55d7f24c4c871761a5","tier":null}],"members":[{"type":"individual","id":"b81ee3cd10201b1a","login":"stuwilmur","name":"Stu Murray","avatar_url":"https://avatars-next.observableusercontent.com/b75116f0f53690768dc0e7c2700a4eaf7befae7b942ecd55d7f24c4c871761a5","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":2,"collection":{"id":"9baeb0746a5a9b0f","slug":"inputs","title":"Inputs","owner":{"id":"8781e33d79a4bb92","login":"stuwilmur","name":"Stu Murray"}},"type":"notebook","body":{"title":"World Map Input with Zoom and Pan","cells":[{"id":0,"value":"md`# World Map Input with Zoom and Pan\n\nThis is the traditional zoom & pan behavior, but with the same API as the [Versor Zooming](https://observablehq.com/@d3/versor-zooming) notebook. Makes it easy to [switch from one to the other](https://observablehq.com/d/3c709ffbafcdb388).`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":127,"value":"viewof projectionName = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":560,"value":"chart","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":588,"value":"countryNamesLookup.get(chart)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":506,"value":"ids = {\n let s = new Set(land50.features.map(d=>+d.id))\n let a = Array.from(s);\n return a}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":479,"value":"numcolors = ids.length","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":468,"value":"colours = d3.range(numcolors).map(x => d3.interpolateSpectral(x / numcolors))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":497,"value":"colourmap = {\n let m = new Map()\n ids.forEach((d,i) => m[d] = colours[i])\n return m\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":629,"value":"reversecolourmap = {\n let m = new Map()\n ids.forEach((d,i) => m[colours[i]] = d)\n return m\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":189,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"projection = d3[projectionName]().precision(0.1)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"height = {\n const [[x0, y0], [x1, y1]] = d3.geoPath(projection.fitWidth(width, sphere)).bounds(sphere);\n const dy = Math.ceil(y1 - y0), l = Math.min(Math.ceil(x1 - x0), dy);\n projection.scale(projection.scale() * (l - 1) / l).precision(0.2);\n return dy;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":27,"value":"sphere = ({type: \"Sphere\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":136,"value":"land50 = FileAttachment(\"countries-50m.json\").json().then(world => topojson.feature(world, world.objects.countries))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"land110 = FileAttachment(\"countries-110m.json\").json().then(world => topojson.feature(world, world.objects.countries))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"topojson = require(\"topojson-client@3\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"d3 = require(\"d3@6\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":575,"value":"countryNamesLookup = new Map(land50.features.map(d=>[+d.id, d.properties.name]))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W36","stdlib":"1","titling":"auto"}} 33:"$32:body"