2f:null 30:["$","title",null,{"children":"World map country selector input, with neighbour colouring, zoom and pan | Stu Murray | Observable"}] 35:T64f,md`# World map country selector input, with neighbour colouring, zoom and pan This is a fork of the [Map Pan & Zoom](https://observablehq.com/@fil/map-pan-zoom) notebook by [Fil](https://observablehq.com/@fil). The original notebook implements elegant and smooth zoom and pan functionality for a world map. Here we add colours and the ability to use this map as an input, by either hovering over or selecting a country by clicking. Countries are coloured using a greedy algorithm to ensure that adjoining areas have different colours, as implemented in this [world map example](https://bl.ocks.org/mbostock/4180634) by [Mike Bostock](https://observablehq.com/@mbostock). The hovered country is determined by getting the pixel under the mouse and looking up its colour; for this to work each country has its colour adjusted slightly from the original base colours such that they are unique. ## Improvements - Speed up rendering the selected country. Currently the entire land data is rendered again on selection. Even rendering the selected country alone did not seem to improve the rendering time. - A better method for determining the country; giving countries unique colours is a bit of a hack and does not look so nice. It would be good to achieve this with a something like the [canvas picking with a hidden canvas](https://observablehq.com/@camargo/canvas-picking-with-a-hidden-canvas) or similar if it were quick enough - Reduce the number of colours required, i.e. make the map four-colourable. It would be nice to have a lookup table for colouring topoJSON used so that we don't have to compute colours. `36:T651,viewof chart = { const context = DOM.context2d(width, height); const path = d3.geoPath(projection, context); let selected = 0; context.canvas.value = [0,0]; function render_feature(feature) { context.beginPath(), path(feature), context.fillStyle = +feature.id == selected ? '#000' : colourmap.get(+feature.id), context.lineWidth = 1, context.strokeStyle = 'grey', context.stroke(), context.fill(); } function render(land) { context.clearRect(0, 0, width, height); context.beginPath(), path(sphere), context.fillStyle = "#fff", context.fill(); land.features.forEach(function(feature) { render_feature(feature); }); context.beginPath(), path(sphere), context.stroke(); } function event_to_country_id(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 = colorKey == 'rgb(0, 0, 0)' ? selected : reversecolourmap[colorKey]; return id; } return d3.select(context.canvas) .on('mousemove', (e) => { context.canvas.value[0] = event_to_country_id(e); context.canvas.dispatchEvent(new CustomEvent("input")) }) .on('click', (e) => { selected = event_to_country_id(e); context.canvas.value[1] = selected; render(land50) context.canvas.dispatchEvent(new CustomEvent("input")) }) .call(zoom(projection) .on("zoom.render", () => render(land110)) .on("end.render", () => render(land50))) .call(() => render(land50)) .node(); }37:T45e,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; } } ); }38:[{"id":"5b7bb44872469fc6f9f4256d902fba909728666ad0d5263654ce95f4470ec90527fdc39a1d1b70490f457d65c31795d651a4afc0745f72351916e715fddc7352","href":"https://static.observableusercontent.com/files/5b7bb44872469fc6f9f4256d902fba909728666ad0d5263654ce95f4470ec90527fdc39a1d1b70490f457d65c31795d651a4afc0745f72351916e715fddc7352","name":"countries-110m.json","type":"application/json","lastModified":1665136234282.388,"size":107761},{"id":"254a99fef9cfdc739794cf276a25ffce226b9d17d64789497bbed4935f1fda7d621149894d3a06e546f0e5c53beda2580db0166433ff2fac65397af1aa3627ea","href":"https://static.observableusercontent.com/files/254a99fef9cfdc739794cf276a25ffce226b9d17d64789497bbed4935f1fda7d621149894d3a06e546f0e5c53beda2580db0166433ff2fac65397af1aa3627ea","name":"countries-50m.json","type":"application/json","lastModified":1665136234282.388,"size":756420}] 33:{"id":"90d0ad00f501ba8f","slug":"world-map-country-selector-input-with-neighbour-colouring","title":"World map country selector input, with neighbour colouring, zoom and pan","thumbnail":"2eb067c0dd8290de717c86a95bacd9ae3f7cd5bedcac79e3b6c87f788a799019","access_level":"public","create_time":"$D2022-10-07T09:50:34.282Z","update_time":"$D2024-09-17T20:18:32.543Z","view_time":null,"first_public_time":"$D2022-10-09T16:21:03.879Z","has_unpublished_edits":null,"fork":{"id":"919840c3b17c8b2b","slug":"countries-pan-zoom-with-neighbour-colouring","title":"Countries Pan & Zoom, with neighbour colouring","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":784,"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":"World map country selector input, with neighbour colouring, zoom and pan","cells":[{"id":0,"value":"$35","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":735,"value":"Hovered country: ${countryNamesLookup.get(chart[0])}
\nSelected country: ${countryNamesLookup.get(chart[1])}","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":6,"value":"$36","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":"$37","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":"colourmap = {\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"},{"id":700,"value":"reversecolourmap = {let m = new Map; colourmap.forEach((v,k) => m[v] = k); return m;}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":723,"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":"$W38","stdlib":"1","titling":"auto"}} 34:"$33:body"