44:["$","title",null,{"children":"Spinning globe 2022 | cd_trich | Observable"}] 4c:T8af,canvas = { const context = DOM.context2d(width, height); const projection = d3.geoOrthographic().fitExtent([[10, 10], [width - 10, height - 10]], sphere); const path = d3.geoPath(projection, context).pointRadius(8); function render(country, arc) { context.clearRect(0, 0, width, height); // bbox // context.beginPath(), path(sphere), context.strokeStyle = "#595959", context.lineWidth = 1, context.stroke(); // coast context.beginPath(), path(land), context.strokeStyle = "#aaa", context.lineWidth = 1, context.stroke(); // countries context.beginPath(), path(land), context.fillStyle = "#eee", context.fill(); // connector context.beginPath(), path(arc), context.strokeStyle = "#00A0C1", context.lineWidth = 2, context.stroke(); // dots context.beginPath(), path(country), context.fillStyle = "#00A0C1", context.strokeStyle = "#fff", context.lineWidth = 3, context.fill(), context.stroke(); return context.canvas; } let p1, p2 = [0, 0], r1, r2 = [0, 0, 0]; for (const id of data) { mutable name = "" + id.properties.title + "" + "
" + "" + id.properties.date_label + " " + id.properties.year + "" + "
" + // "" + id.properties.month + "" + "
" + // "" + id.properties.year + "" + "
" + "" + id.properties.loc + ""; yield render(id); p1 = p2, p2 = d3.geoCentroid(id); r1 = r2, r2 = [-p2[0], tilt - p2[1], 0]; const ip = d3.geoInterpolate(p1, p2); const iv = Versor.interpolateAngles(r1, r2); // function repeat(t) { // function trans() { // either this or the line above and below await d3.transition() // d3.transition() .duration(1250) .tween("render", () => t => { projection.rotate(iv(t)); render(id, {type: "LineString", coordinates: [p1, ip(t)]}); }) .transition() .tween("render", () => t => { render(id, {type: "LineString", coordinates: [ip(t), p2]}); }) // .on("end", repeat); .end(); // }; // trans(); // .end(); } }4d: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; }; } }4e:[{"id":"56a8b512e5c1a8afe6b12e3de70483fe7aae2c6de0d3b008d0168fa9d374715058b8ae9bdd987443afb521777968c2bfd942743babd4671239285ce2ba255dae","href":"https://static.observableusercontent.com/files/56a8b512e5c1a8afe6b12e3de70483fe7aae2c6de0d3b008d0168fa9d374715058b8ae9bdd987443afb521777968c2bfd942743babd4671239285ce2ba255dae","name":"cities@3.geojson","type":"application/geo+json","lastModified":1637604418381.684,"size":48010}] 48:{"id":"7286208d4232ccbd","slug":"euiss_spinning-globe-2022","title":"Spinning globe 2022","thumbnail":"56da58cff48c33ab14b3d9169c69bf1bc97cf6df89f3f19703ff761b8be57c71","access_level":"public","create_time":"$D2021-11-15T08:19:34.629Z","update_time":"$D2024-04-10T09:52:30.936Z","view_time":null,"first_public_time":"$D2024-04-10T09:28:39.851Z","has_unpublished_edits":null,"fork":{"id":"0e9181d646defd6c","slug":"world-tour","title":"World tour","owner":{"id":"863951e3ebe4c0ae","login":"d3","name":"D3"}},"stars":0,"starred":false,"owner":{"type":"team","id":"9fa224f879c913e9","login":"cdtrich","name":"cd_trich","avatar_url":"https://avatars-next.observableusercontent.com/e09e849e7e5fea04bdb01ed6d2f02e5c09b4a8f1b4427d1496b34b0d82b879e6","tier":"starter_2024","bio":"dataviz designer @EU_ISS","followed_by_you":false,"follows_you":false},"version":742,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"9f70fe125368aa58","login":"cdtrich","name":"cd_trich","avatar_url":"https://avatars-next.observableusercontent.com/e09e849e7e5fea04bdb01ed6d2f02e5c09b4a8f1b4427d1496b34b0d82b879e6","tier":null,"bio":"dataviz designer @EU_ISS","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"9f70fe125368aa58","login":"cdtrich","name":"cd_trich","avatar_url":"https://avatars-next.observableusercontent.com/e09e849e7e5fea04bdb01ed6d2f02e5c09b4a8f1b4427d1496b34b0d82b879e6","tier":null,"role":"editor"},{"type":"team","id":"9fa224f879c913e9","login":"cdtrich","name":"cd_trich","avatar_url":"https://avatars-next.observableusercontent.com/e09e849e7e5fea04bdb01ed6d2f02e5c09b4a8f1b4427d1496b34b0d82b879e6","tier":"starter_2024","role":"viewer"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":2,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Spinning globe 2022","cells":[{"id":0,"value":"md`# Spinning globe 2022\n\nThis animation depicts the EUISS's take on key events to come in 2022.\n\n## to do\n\n* loop animation\n* add scrubber/status bar\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":71,"value":"title = html`${name}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"$4c","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":147,"value":"$4d","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":266,"value":"color = d3.scaleOrdinal([\"Culture/Society\", \"European Union\", \"Global\", \"History\", \"Politics\"], \n [\"#3C1438\", \"#096789\", \"#5EBFBC\", \"#F28C00\", \"#D82739\"])\n\n// from https://observablehq.com/@mbostock/u-s-drought-february-25-2020","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":62,"value":"mutable name = \"\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":497,"value":"mutable loc = \"\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":471,"value":"mutable day = \"\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":473,"value":"mutable month = \"\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":475,"value":"mutable year = \"\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"height = Math.min(width, 720)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":119,"value":"tilt = 15","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":311,"value":"# objects","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"sphere = ({type: \"Sphere\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":27,"value":"countries = topojson.feature(world, world.objects.countries).features","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"land = topojson.feature(world, world.objects.land)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"world = d3.json(\"https://cdn.jsdelivr.net/npm/world-atlas@2/countries-110m.json\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":306,"value":"# data","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":272,"value":"file = FileAttachment(\"cities@3.geojson\").json();","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":717,"value":"data = file.features;","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":299,"value":"# Appendix\nhttps://www.npmjs.com/package/topojson-client","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"topojson = require(\"topojson-client@3\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"d3 = require(\"d3@7\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":686,"value":"# data","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":408,"value":"css = ","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4e","stdlib":"1"}} 24:null