2e:null 2f:["$","title",null,{"children":"World map country selector input, with neighbour colouring, zoom and rotation | Stu Murray | Observable"}] 34:T654,md`# World map country selector input, with neighbour colouring, zoom and rotation 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. `35:T6b6,function globe() { 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(); }36:[{"id":"5b7bb44872469fc6f9f4256d902fba909728666ad0d5263654ce95f4470ec90527fdc39a1d1b70490f457d65c31795d651a4afc0745f72351916e715fddc7352","href":"https://static.observableusercontent.com/files/5b7bb44872469fc6f9f4256d902fba909728666ad0d5263654ce95f4470ec90527fdc39a1d1b70490f457d65c31795d651a4afc0745f72351916e715fddc7352","name":"countries-110m.json","type":"application/json","lastModified":1726604322261.218,"size":107761},{"id":"254a99fef9cfdc739794cf276a25ffce226b9d17d64789497bbed4935f1fda7d621149894d3a06e546f0e5c53beda2580db0166433ff2fac65397af1aa3627ea","href":"https://static.observableusercontent.com/files/254a99fef9cfdc739794cf276a25ffce226b9d17d64789497bbed4935f1fda7d621149894d3a06e546f0e5c53beda2580db0166433ff2fac65397af1aa3627ea","name":"countries-50m.json","type":"application/json","lastModified":1726604322261.218,"size":756420}] 32:{"id":"925967135a141b9f","slug":"spinning-globe","title":"World map country selector input, with neighbour colouring, zoom and rotation","thumbnail":"0f6afeefdd40434edca8d225defdb60efdbedafdd1d7dd40c3af848e8d988ffd","access_level":"public","create_time":"$D2024-09-17T20:18:42.261Z","update_time":"$D2024-09-25T17:59:35.380Z","view_time":null,"first_public_time":"$D2024-09-17T21:46:44.620Z","has_unpublished_edits":null,"fork":{"id":"90d0ad00f501ba8f","slug":"world-map-country-selector-input-with-neighbour-colouring","title":"World map country selector input, with neighbour colouring, zoom and pan","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":863,"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":"team","id":"8781e33d79a4bb92","login":"stuwilmur","name":"Stu Murray","avatar_url":"https://avatars-next.observableusercontent.com/b75116f0f53690768dc0e7c2700a4eaf7befae7b942ecd55d7f24c4c871761a5","tier":"starter_2024","role":"editor"},{"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":"9baeb0746a5a9b0f","slug":"inputs","title":"Inputs","owner":{"id":"8781e33d79a4bb92","login":"stuwilmur","name":"Stu Murray"}},"type":"notebook","body":{"title":"World map country selector input, with neighbour colouring, zoom and rotation","cells":[{"id":0,"value":"$34","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":861,"value":"viewof chart = globe()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"$35","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":"import { zoom } from \"@d3/versor-zooming\"","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":"$W36","stdlib":"1","titling":"auto"}} 33:"$32:body"