2e:null 2f:["$","title",null,{"children":"Countries Pan & Zoom, with neighbour colouring | Stu Murray | Observable"}] 34: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; } } ); }35:[{"id":"5b7bb44872469fc6f9f4256d902fba909728666ad0d5263654ce95f4470ec90527fdc39a1d1b70490f457d65c31795d651a4afc0745f72351916e715fddc7352","href":"https://static.observableusercontent.com/files/5b7bb44872469fc6f9f4256d902fba909728666ad0d5263654ce95f4470ec90527fdc39a1d1b70490f457d65c31795d651a4afc0745f72351916e715fddc7352","name":"countries-110m.json","type":"application/json","lastModified":1664809918939.402,"size":107761},{"id":"254a99fef9cfdc739794cf276a25ffce226b9d17d64789497bbed4935f1fda7d621149894d3a06e546f0e5c53beda2580db0166433ff2fac65397af1aa3627ea","href":"https://static.observableusercontent.com/files/254a99fef9cfdc739794cf276a25ffce226b9d17d64789497bbed4935f1fda7d621149894d3a06e546f0e5c53beda2580db0166433ff2fac65397af1aa3627ea","name":"countries-50m.json","type":"application/json","lastModified":1664809918939.402,"size":756420}] 32:{"id":"919840c3b17c8b2b","slug":"countries-pan-zoom-with-neighbour-colouring","title":"Countries Pan & Zoom, with neighbour colouring","thumbnail":"d46ba19fe37697aa2a403989a415c737f42e8d59c4deb212f82b995feca04d3f","access_level":"public","create_time":"$D2022-10-03T15:11:58.939Z","update_time":"$D2022-10-07T10:13:14.492Z","view_time":null,"first_public_time":"$D2022-10-03T16:10:51.535Z","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":700,"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":1,"collection":{"id":"b2a9aa8200215e6e","slug":"mapping","title":"Mapping","owner":{"id":"8781e33d79a4bb92","login":"stuwilmur","name":"Stu Murray"}},"type":"notebook","body":{"title":"Countries Pan & Zoom, with neighbour colouring","cells":[{"id":0,"value":"md`# Countries Pan & Zoom, with neighbour colouring\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":"chart = {\n const context = DOM.context2d(width, height);\n const path = d3.geoPath(projection, context);\n\n function render(land, c, p) {\n c.clearRect(0, 0, width, height);\n c.beginPath(), p(sphere), c.fillStyle = \"#fff\", c.fill();\n land.features.forEach(function(feature,i) {\n c.beginPath(), p(feature), c.fillStyle = colormap.get(+feature.id), c.fill();\n });\n c.beginPath(), p(sphere), c.stroke();\n }\n\n return d3.select(context.canvas)\n .call(zoom(projection)\n .on(\"zoom.render\", () => render(land110, context, path))\n .on(\"end.render\", () => render(land50, context, path)))\n .call(() => render(land50, context, path))\n .node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":367,"value":"colour = d3.scaleOrdinal(d3.schemeCategory10)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":189,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"projection = d3[projectionName]().precision(0.1)","pinned":false,"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":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":27,"value":"sphere = ({type: \"Sphere\"})","pinned":false,"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":false,"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":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"d3 = require(\"d3@6\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":384,"value":"world50 = FileAttachment(\"countries-50m.json\").json();","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":420,"value":"neighbors50 = topojson.neighbors(world50.objects.countries.geometries)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":424,"value":"colormap = {\n let land = JSON.parse(JSON.stringify(land50.features));\n land.forEach(function(d, i) \n { \n d.color = d3.max(neighbors50[i], function(n) { return land[n].color; }) + 1 | 0;\n });\n let maxCols = d3.max(land.map(d=> d.color));\n let a = [];\n d3.range(0, maxCols + 1).forEach(i=>{\n let f = land.filter(d=> d.color == i);\n f.forEach((d,j)=>{\n a.push([+d.id, d3.color(colour(d.color)).brighter(j * .04).formatRgb()])\n })\n })\n return new Map(a);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W35","stdlib":"1","titling":"auto"}} 33:"$32:body"