2e:null 2f:["$","title",null,{"children":"Spinning globe input, with neighbour and selected country colouring, zoom and rotation | Stu Murray | Observable"}] 34:T735,function globe(selectedCountryNames) { 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" : !selectedCountryNames.includes(feature.properties.name) ? "#999" : 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(); }35:[{"id":"5b7bb44872469fc6f9f4256d902fba909728666ad0d5263654ce95f4470ec90527fdc39a1d1b70490f457d65c31795d651a4afc0745f72351916e715fddc7352","href":"https://static.observableusercontent.com/files/5b7bb44872469fc6f9f4256d902fba909728666ad0d5263654ce95f4470ec90527fdc39a1d1b70490f457d65c31795d651a4afc0745f72351916e715fddc7352","name":"countries-110m.json","type":"application/json","lastModified":1727357636837.112,"size":107761},{"id":"254a99fef9cfdc739794cf276a25ffce226b9d17d64789497bbed4935f1fda7d621149894d3a06e546f0e5c53beda2580db0166433ff2fac65397af1aa3627ea","href":"https://static.observableusercontent.com/files/254a99fef9cfdc739794cf276a25ffce226b9d17d64789497bbed4935f1fda7d621149894d3a06e546f0e5c53beda2580db0166433ff2fac65397af1aa3627ea","name":"countries-50m.json","type":"application/json","lastModified":1727357636837.112,"size":756420}] 32:{"id":"afa656a331e19483","slug":"spinning-globe-2","title":"Spinning globe input, with neighbour and selected country colouring, zoom and rotation","thumbnail":"a615ba60f16872bc4a08823a930e004b8f0343499cfe72b3c1ce5f96c929ab56","access_level":"public","create_time":"$D2024-09-26T13:33:56.837Z","update_time":"$D2024-10-06T12:49:13.847Z","view_time":null,"first_public_time":"$D2024-10-03T07:57:33.539Z","has_unpublished_edits":null,"fork":{"id":"925967135a141b9f","slug":"spinning-globe","title":"World map country selector input, with neighbour colouring, zoom and rotation","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":912,"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"},{"type":"team","id":"8781e33d79a4bb92","login":"stuwilmur","name":"Stu Murray","avatar_url":"https://avatars-next.observableusercontent.com/b75116f0f53690768dc0e7c2700a4eaf7befae7b942ecd55d7f24c4c871761a5","tier":"starter_2024","role":"viewer"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":{"id":"9baeb0746a5a9b0f","slug":"inputs","title":"Inputs","owner":{"id":"8781e33d79a4bb92","login":"stuwilmur","name":"Stu Murray"}},"type":"notebook","body":{"title":"Spinning globe input, with neighbour and selected country colouring, zoom and rotation","cells":[{"id":0,"value":"md`# Spinning globe input, with neighbour and selected country colouring, zoom and rotation\nThis is a fork of the [Map Pan & Zoom](https://observablehq.com/@fil/map-pan-zoom) notebook by [Fil](https://observablehq.com/@fil), but uses the [Versor zooming technique](https://observablehq.com/@d3/versor-zooming). 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. We also allow the user to specify a subset of countries to be coloured, with the remainder greyed out.\n\nSee [earlier notebook](https://observablehq.com/@stuwilmur/spinning-globe) for details and limitations/future work.\n`","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(selectedCountries)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":864,"value":"selectedCountries = [\"Canada\",\"Zimbabwe\"]","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":367,"value":"colour = d3.scaleOrdinal(d3.schemeTableau10)","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":903,"value":"widthFactor = 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\n .geoPath(projection.fitWidth(width * widthFactor, sphere))\n .bounds(sphere);\n const dy = Math.ceil(y1 - y0),\n 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":886,"value":"world = d3.json(\n \"https://raw.githubusercontent.com/neocarto/bertin/main/data/world.geojson\"\n)","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":"$W35","stdlib":"1","titling":"auto"}} 33:"$32:body"