31:T751,canvas = { replay2; const context = DOM.context2d(width, height); const projection = d3.geoOrthographic().fitExtent([[10, 10], [width - 10, height - 10]], sphere); const path = d3.geoPath(projection, context); function render(country, arc) { context.clearRect(0, 0, width, height); context.beginPath(), path(land), context.fillStyle = "#ccc", context.fill(); context.beginPath(), path(country), context.fillStyle = "#f00", context.fill(); // <-- Darcy Blue context.beginPath(), path(allcountries_sort), context.fillStyle = "#f00", context.fill(); context.beginPath(), path(borders), context.strokeStyle = "#fff", context.lineWidth = 0.5, context.stroke(); context.beginPath(), path(sphere), context.strokeStyle = "#000", context.lineWidth = 1.5, context.stroke(); context.beginPath(), path(arc), context.stroke(); return context.canvas; } //let p1, p2 = [0, 0], r1, r2 = [0, 0, 0]; const countries2 = search.length === 1 ? allcountries_sort.filter(d => d.properties.name === search[0]): countries let p1, p2 = d3.geoCentroid(countries2[0]), r1, r2 = [-p2[0], tilt - p2[1], 0]; for (const country of countries2) { mutable name = country.properties.name; yield render(country); p1 = p2, p2 = d3.geoCentroid(country); r1 = r2, r2 = [-p2[0], tilt - p2[1], 0]; const ip = d3.geoInterpolate(p1, p2); const iv = Versor.interpolateAngles(r1, r2); await d3.transition() .duration(1000) // <--- customize timing .tween("render", () => t => { projection.rotate(iv(t)); render(country, {type: "LineString", coordinates: [p1, ip(t)]}); }) .transition() .tween("render", () => t => { render(country, {type: "LineString", coordinates: [ip(t), p2]}); }) .end(); } }32:T7b4,class Versor { static fromAngles([l, p, g]) { l *= Math.PI / 360; p *= Math.PI / 360; g *= Math.PI / 360; const sl = Math.sin(l), cl = Math.cos(l); const sp = Math.sin(p), cp = Math.cos(p); const sg = Math.sin(g), cg = Math.cos(g); return [ cl * cp * cg + sl * sp * sg, sl * cp * cg - cl * sp * sg, cl * sp * cg + sl * cp * sg, cl * cp * sg - sl * sp * cg ]; } static toAngles([a, b, c, d]) { return [ Math.atan2(2 * (a * b + c * d), 1 - 2 * (b * b + c * c)) * 180 / Math.PI, Math.asin(Math.max(-1, Math.min(1, 2 * (a * c - d * b)))) * 180 / Math.PI, Math.atan2(2 * (a * d + b * c), 1 - 2 * (c * c + d * d)) * 180 / Math.PI ]; } static interpolateAngles(a, b) { const i = Versor.interpolate(Versor.fromAngles(a), Versor.fromAngles(b)); return t => Versor.toAngles(i(t)); } static interpolateLinear([a1, b1, c1, d1], [a2, b2, c2, d2]) { a2 -= a1, b2 -= b1, c2 -= c1, d2 -= d1; const x = new Array(4); return t => { const l = Math.hypot(x[0] = a1 + a2 * t, x[1] = b1 + b2 * t, x[2] = c1 + c2 * t, x[3] = d1 + d2 * t); x[0] /= l, x[1] /= l, x[2] /= l, x[3] /= l; return x; }; } static interpolate([a1, b1, c1, d1], [a2, b2, c2, d2]) { let dot = a1 * a2 + b1 * b2 + c1 * c2 + d1 * d2; if (dot < 0) a2 = -a2, b2 = -b2, c2 = -c2, d2 = -d2, dot = -dot; if (dot > 0.9995) return Versor.interpolateLinear([a1, b1, c1, d1], [a2, b2, c2, d2]); const theta0 = Math.acos(Math.max(-1, Math.min(1, dot))); const x = new Array(4); const l = Math.hypot(a2 -= a1 * dot, b2 -= b1 * dot, c2 -= c1 * dot, d2 -= d1 * dot); a2 /= l, b2 /= l, c2 /= l, d2 /= l; return t => { const theta = theta0 * t; const s = Math.sin(theta); const c = Math.cos(theta); x[0] = a1 * c + a2 * s; x[1] = b1 * c + b2 * s; x[2] = c1 * c + c2 * s; x[3] = d1 * c + d2 * s; return x; }; } }33:[{"id":"83e1e44337b0e33963a7b9bf6a7f4f0e42511d8577c58f55a2e5cf1d13e09f54c9eeec48960ba23874f4b83578d31ec3f017553bbf67ac580cad263af74587cc","href":"https://static.observableusercontent.com/files/83e1e44337b0e33963a7b9bf6a7f4f0e42511d8577c58f55a2e5cf1d13e09f54c9eeec48960ba23874f4b83578d31ec3f017553bbf67ac580cad263af74587cc","name":"emoji-flags-1.2.0.js","type":"application/javascript","lastModified":1652364632011.756,"size":36702},{"id":"1a8d16de911847348506be045cfa7a38c4c770d30c67b665f84bc0329a36c3064bfe79a93201f1f51ec607c230567ae053e0b5cfa95bf95c8df635da337144e8","href":"https://static.observableusercontent.com/files/1a8d16de911847348506be045cfa7a38c4c770d30c67b665f84bc0329a36c3064bfe79a93201f1f51ec607c230567ae053e0b5cfa95bf95c8df635da337144e8","name":"point-in-svg-polygon-1.0.25.js","type":"application/javascript","lastModified":1652365098806.006,"size":7173}] 2f:{"title":" 23 COUNTRIES I'VE LIVED OR VISITED ","cells":[{"id":0,"value":"viewof title = md`# 23 COUNTRIES I'VE LIVED OR VISITED `","pinned":false,"hidden":false,"mode":"ojs"},{"id":415,"value":"viewof replay = html` \n \n \n \n \n \n

\n ${viewof search}\n

\n ${md` `}\n

\n ${viewof replay2}\n

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":362,"value":"viewof replay2 = Button(\"Replay\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":385,"value":"viewof search = Inputs.search(mycountries, {label: \"Select a country:\", datalist: mycountries, value: null})","pinned":false,"hidden":false,"mode":"ojs"},{"id":71,"value":"viewof countryname = html`${name}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":467,"value":"projection = d3.geoOrthographic().fitExtent([[10, 10], [width - 10, height - 10]], sphere)","pinned":true,"hidden":false,"mode":"ojs"},{"id":473,"value":"path = d3.geoPath(projection)","pinned":true,"hidden":false,"mode":"ojs"},{"id":439,"value":"function drag(projection) {\n let v0, q0, r0;\n \n function dragstarted() {\n v0 = versor.cartesian(projection.invert(d3.mouse(this)));\n q0 = versor(r0 = projection.rotate());\n }\n \n function dragged() {\n const v1 = versor.cartesian(projection.rotate(r0).invert(d3.mouse(this)));\n const q1 = versor.multiply(q0, versor.delta(v0, v1));\n projection.rotate(versor.rotation(q1));\n }\n \n return d3.drag()\n .on(\"start\", dragstarted)\n .on(\"drag\", dragged);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":457,"value":"function validCountry(c) {\n if (!c) return;\n const {name,code} = c.properties;\n if (!name || !code) return;\n return true;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":465,"value":"// a compass that points north (returns screen angle)\nfunction getNorth([x,y],[lon,lat]) { \n // get geo coord circle\n const interpRad = d3.interpolate(0,2*Math.PI);\n const getPoint = t => {\n const a = interpRad(t);\n const xy = [x+Math.cos(a), y+Math.sin(a)];\n const geo = projection.invert(xy);\n // ideally we would check if xy is inside the sphere (but it's expensive)\n if (geo) return {xy,geo,a};\n };\n const count = 360;\n const points = d3.range(count).map(t => getPoint(t/count));\n const deltaLon = p => Math.abs(p.geo[0]-lon);\n const vert = points[d3.scan(points, (a,b) => deltaLon(a) - deltaLon(b))];\n const northA = vert.geo[1] < lat ? vert.a : vert.a + Math.PI;\n const normA = a => a % (2*Math.PI) - Math.PI;\n return normA(northA);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":469,"value":"xyInsideSphere = {\n const spherePath = path(sphere);\n return p => pointInSvgPolygon.isInside(p, spherePath);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":477,"value":"mutable mouseNorth = null","pinned":true,"hidden":false,"mode":"ojs"},{"id":479,"value":"mutable mouseLonLat = null","pinned":true,"hidden":false,"mode":"ojs"},{"id":481,"value":"countryTopos = topojson.feature(world, world.objects.countries).features.map(c => {\n const code = countryCodesById[c.id];\n if (!code) return c;\n return Object.assign(c, {\n // attach extra helpful properties\n properties: {\n name: code[\"name\"].replace(/\$.*\$/g, \"\"),\n code: code[\"alpha-2\"],\n center: d3.geoCentroid(c),\n }\n });\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":483,"value":"countryCodesById = {\n const codes = {};\n for (let c of countryCodes) {\n const id = c[\"country-code\"];\n codes[id] = c;\n }\n return codes;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":485,"value":"countryCodes = d3.json(\"https://cdn.rawgit.com/lukes/ISO-3166-Countries-with-Regional-Codes/689f55a9/slim-2/slim-2.json\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":463,"value":"function onMouseMove(x,y) {\n if (!xyInsideSphere([x,y])) {\n mutable mouseCountry = null;\n mutable mouseXY = null;\n mutable mouseNorth = null;\n return;\n }\n const p = projection.invert([x,y]);\n mutable mouseLonLat = p;\n const c = countryTopos.find(c => d3.geoContains(c,p));\n if (c !== mouseCountry) mutable mouseCountry = c;\n mutable mouseXY = [x,y];\n mutable mouseNorth = getNorth([x,y],p);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":459,"value":"mutable mouseCountry = null","pinned":true,"hidden":false,"mode":"ojs"},{"id":461,"value":"mutable mouseXY = null","pinned":true,"hidden":false,"mode":"ojs"},{"id":453,"value":"mouseCountryLabel = {\n if (!validCountry(mouseCountry)) return;\n const {name,code} = mouseCountry.properties;\n\n const [x,y] = mouseXY;\n const flag = emojiFlags.countryCode(code).emoji;\n return html`\n
\n\n${flag}\n\n${name}\n
\n`;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":441,"value":"versor = require(\"versor@0.0.3\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":147,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":62,"value":"mutable name = \"\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":9,"value":"height = Math.min(width, 430)","pinned":true,"hidden":false,"mode":"ojs"},{"id":119,"value":"tilt = 20","pinned":true,"hidden":false,"mode":"ojs"},{"id":22,"value":"sphere = ({type: \"Sphere\"})","pinned":true,"hidden":false,"mode":"ojs"},{"id":248,"value":"allcountries = topojson.feature(world, world.objects.countries)","pinned":true,"hidden":false,"mode":"ojs"},{"id":403,"value":"allcountries_sort.filter(d => d.properties.name === search[0])","pinned":true,"hidden":false,"mode":"ojs"},{"id":325,"value":"allcountries_sort = allcountries.features.sort((a, b) => (a.properties.name > b.properties.name) ? 1 : -1)","pinned":false,"hidden":false,"mode":"ojs"},{"id":269,"value":"countries = allcountries_sort.filter(d => mycountries.includes(d.properties.name))","pinned":true,"hidden":false,"mode":"ojs"},{"id":267,"value":"mycountries = [\"Vietnam\", \"United States of America\", \"Malaysia\", \"Laos\", \"Thailand\", \"France\", \"Norway\", \"Italy\", \"Germany\", \"Switzerland\", \"Austria\", \"Hungary\", \"Poland\", \"Czechia\", \"Spain\", \"Greece\", \"Qatar\", \"Netherlands\", \"Belgium\", \"Sweden\", \"Denmark\", \"United Kingdom\", \"China\"]","pinned":false,"hidden":false,"mode":"ojs"},{"id":277,"value":"names = allcountries_sort.map(d => d.properties.name)","pinned":true,"hidden":false,"mode":"ojs"},{"id":49,"value":"borders = topojson.mesh(world, world.objects.countries, (a, b) => a !== b)","pinned":false,"hidden":false,"mode":"ojs"},{"id":19,"value":"land = topojson.feature(world, world.objects.land)","pinned":true,"hidden":false,"mode":"ojs"},{"id":16,"value":"world = d3.json(\"https://cdn.jsdelivr.net/npm/world-atlas@2/countries-110m.json\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":13,"value":"topojson = require(\"topojson-client@3\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"d3 = require(\"d3@6\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":360,"value":"import {Button} from \"@observablehq/inputs\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":455,"value":"emojiFlags = require(await FileAttachment(\"emoji-flags-1.2.0.js\").url())\n// require('https://bundle.run/emoji-flags@1.2.0')","pinned":true,"hidden":false,"mode":"ojs"},{"id":471,"value":"pointInSvgPolygon = require(await FileAttachment(\"point-in-svg-polygon-1.0.25.js\").url())\n//require('https://bundle.run/point-in-svg-polygon@1.0.20')","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}