31:Td76,map = { let clickTimeout = null; function startClick(e, feature) { if (clickTimeout) { clearTimeout(clickTimeout); } const coords = point(e.target, e); /* const transform = d3.zoomTransform(map.children[0]); const coordsTranslated = transform.invert(coords); console.log(coords, coordsTranslated); */ clickTimeout = setTimeout( handleClick.bind(this, e, feature, coords), width <= 500 ? 300 : 0 ); } function cancelClick() { if (clickTimeout) { clearTimeout(clickTimeout); } } function zoomed() { map.children[0].setAttribute("transform", d3.event.transform); } const zoom = d3 .zoom() .extent([ [0, 0], [width, height] ]) .translateExtent([ [-50, -50], [width + 50, height + 50] ]) .scaleExtent([1, 8]) .on("zoom", zoomed); function zoomIn() { d3.select(map).transition().call(zoom.scaleBy, 2); } function zoomOut() { d3.select(map).transition().call(zoom.scaleBy, 0.5); } const map = svg``; if (width <= 500) { d3.select(map).call(zoom.scaleBy, 1.5).call(zoom.translateBy, -50, 0); } const zoomCall = d3.select(map).call(zoom); const dblclickHandler = zoomCall.on("dblclick.zoom"); zoomCall.on("dblclick.zoom", function (d, i, nodes) { cancelClick(); dblclickHandler.call(this, d, i, nodes); }); return map; }32:[{"id":"200ac63b66db3fd13ac4cbd9cbce45e093d4b6f3b3f417180dab43baa66321735b55893ee593319cb3c008cd2d59df605eee2204f729f6b94623166eb75383f0","href":"https://static.observableusercontent.com/files/200ac63b66db3fd13ac4cbd9cbce45e093d4b6f3b3f417180dab43baa66321735b55893ee593319cb3c008cd2d59df605eee2204f729f6b94623166eb75383f0","name":"country-ids.csv","type":"text/csv","lastModified":1580062140056.63,"size":4347},{"id":"0ca9148938fe656b24d3cd9474fc7190de67f0c2fa0c6940f93f874da1572341e3691665fd40b708cdd5573317e4b18f96bfc1d3617464cb0dc2d8b607c3bddd","href":"https://static.observableusercontent.com/files/0ca9148938fe656b24d3cd9474fc7190de67f0c2fa0c6940f93f874da1572341e3691665fd40b708cdd5573317e4b18f96bfc1d3617464cb0dc2d8b607c3bddd","name":"world-atlas-110m.json","type":"application/json","lastModified":1579975901228.877,"size":102116}] 2f:{"title":"Can you point to Ukraine on a map?","cells":[{"id":0,"value":"md`# Can you point to Ukraine on a map?`","pinned":false,"hidden":false,"mode":"ojs"},{"id":70,"value":"md`That's what Secretary of State Mike Pompeo [reportedly asked](https://www.npr.org/2020/01/24/799244678/pompeo-wont-say-whether-he-owes-yovanovitch-an-apology-i-ve-done-what-s-right) NPR anchor Mary Louise Kelly.\n\nIn a [2014 survey](https://www.washingtonpost.com/news/monkey-cage/wp/2014/04/07/the-less-americans-know-about-ukraines-location-the-more-they-want-u-s-to-intervene/), about 16 percent of Americans could correctly locate Ukraine. About 60 percent of visitors to this page found it on the first try.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":340,"value":"success !== null\n ? html`${\n success\n ? '

🏆 Congratulations! You pointed to Ukraine!

'\n : html`

Sorry. That wasn\\'t Ukraine. ${\n countryName ? html` That's ${countryName}.` : ''\n }

`\n }`\n : html`Can you find Ukraine on a map?`","pinned":false,"hidden":false,"mode":"ojs"},{"id":629,"value":"viewof hardMode = checkbox({\n description: \"No marked borders\",\n options: [{ value: \"on\", label: \"Hard mode\" }],\n value: \"off\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":331,"value":"html`

${\n success ? 'Everyone\\'s tries' : 'Tries'\n}:${swatches({\n color: colorScale\n})}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":659,"value":"md``","pinned":false,"hidden":false,"mode":"ojs"},{"id":67,"value":"md`### Appendix`","pinned":false,"hidden":false,"mode":"ojs"},{"id":624,"value":"import { checkbox } from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":113,"value":"htl = require(\"htl@0.0.9\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":115,"value":"svg = htl.svg","pinned":false,"hidden":false,"mode":"ojs"},{"id":5,"value":"d3 = require('d3')","pinned":false,"hidden":false,"mode":"ojs"},{"id":13,"value":"topojson = require('topojson')","pinned":false,"hidden":false,"mode":"ojs"},{"id":43,"value":"height = width <= 500 ? Math.round(width / 1.2) : Math.round(width / 1.8)","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"projection = d3\n .geoNaturalEarth1()\n .rotate([0, 0])\n .precision(0.1)\n .fitSize([width, height], { type: \"Sphere\" })","pinned":false,"hidden":false,"mode":"ojs"},{"id":27,"value":"path = d3.geoPath().projection(projection)","pinned":false,"hidden":false,"mode":"ojs"},{"id":11,"value":"world = FileAttachment(\"world-atlas-110m.json\").json()","pinned":false,"hidden":false,"mode":"ojs"},{"id":494,"value":"countryIds = d3.csvParse(await FileAttachment(\"country-ids.csv\").text())","pinned":false,"hidden":false,"mode":"ojs"},{"id":30,"value":"features = topojson.feature(world, world.objects.countries).features","pinned":false,"hidden":false,"mode":"ojs"},{"id":217,"value":"// from https://github.com/d3/d3-selection/blob/master/src/point.js\npoint = function(node, event) {\n const svg = node.ownerSVGElement || node;\n\n if (svg.createSVGPoint) {\n let point = svg.createSVGPoint();\n (point.x = event.clientX), (point.y = event.clientY);\n point = point.matrixTransform(node.getScreenCTM().inverse());\n return [point.x, point.y];\n }\n\n const rect = node.getBoundingClientRect();\n return [\n event.clientX - rect.left - node.clientLeft,\n event.clientY - rect.top - node.clientTop\n ];\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":124,"value":"handleClick = (e, feature, coords) => {\n mutable countryName = (\n countryIds.find(country => feature.id === country.code) || { name: null }\n ).name;\n mutable success = feature.id === '804';\n mutable yourTries.push({\n x: coords[0] / width,\n y: coords[1] / height,\n tries: tries + 1\n });\n try {\n d3.json(\n \"https://a8qabv339g.execute-api.us-east-1.amazonaws.com/dev/points\",\n {\n body: JSON.stringify({\n country: feature.id,\n x: coords[0],\n y: coords[1],\n width,\n height,\n tries: tries + 1,\n bot: false,\n hardMode\n }),\n headers: { \"content-type\": \"application/json\" },\n method: \"POST\",\n mode: \"cors\"\n }\n );\n ++mutable tries;\n } catch (e) {\n // no-op\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":166,"value":"handleMouseover = e => e.target.classList.add('highlighted')","pinned":false,"hidden":false,"mode":"ojs"},{"id":168,"value":"handleMouseout = e => e.target.classList.remove('highlighted')","pinned":false,"hidden":false,"mode":"ojs"},{"id":130,"value":"mutable success = null","pinned":false,"hidden":false,"mode":"ojs"},{"id":498,"value":"mutable countryName = null","pinned":false,"hidden":false,"mode":"ojs"},{"id":222,"value":"mutable tries = 0","pinned":false,"hidden":false,"mode":"ojs"},{"id":292,"value":"mutable yourTries = []","pinned":false,"hidden":false,"mode":"ojs"},{"id":243,"value":"loggedTries = {\n try {\n return await d3.tsv(\n 'https://d18fkkvkxmrwi8.cloudfront.net/sampled-tries.tsv'\n );\n } catch (e) {\n return [];\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":346,"value":"loggedTriesSample = loggedTries","pinned":false,"hidden":false,"mode":"ojs"},{"id":319,"value":"colorScale = d3\n .scaleOrdinal()\n .domain([1, 2, 3, 4, 5]) // , 'yours'\n .unknown(\"#f1eef6\")\n .range(\n [\"#f1eef6\", \"#bdc9e1\", \"#74a9cf\", \"#2b8cbe\", \"#045a8d\"] // \"green\",\n .slice()\n .reverse()\n )","pinned":false,"hidden":false,"mode":"ojs"},{"id":23,"value":"html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":270,"value":"import { swatches } from '@d3/color-legend'","pinned":false,"hidden":false,"mode":"ojs"},{"id":606,"value":"import { pageAnalytics } from '@chriszs/page-analytics'","pinned":false,"hidden":false,"mode":"ojs"},{"id":608,"value":"pageAnalytics","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}