27:null 28:["$","title",null,{"children":"Versor Dragging | GurvbPro Studios | Observable"}] 2d:T5ac,function drag(projection) { let v0, q0, r0, a0, l; function pointer(event, that) { const t = d3.pointers(event, that); if (t.length !== l) { l = t.length; if (l > 1) a0 = Math.atan2(t[1][1] - t[0][1], t[1][0] - t[0][0]); dragstarted.apply(that, [event, that]); } // For multitouch, average positions and compute rotation. if (l > 1) { const x = d3.mean(t, p => p[0]); const y = d3.mean(t, p => p[1]); const a = Math.atan2(t[1][1] - t[0][1], t[1][0] - t[0][0]); return [x, y, a]; } return t[0]; } function dragstarted(event) { v0 = versor.cartesian(projection.invert(pointer(event, this))); q0 = versor(r0 = projection.rotate()); } function dragged(event) { const p = pointer(event, this); const v1 = versor.cartesian(projection.rotate(r0).invert(p)); const delta = versor.delta(v0, v1); let q1 = versor.multiply(q0, delta); // For multitouch, compose with a rotation around the axis. if (p[2]) { const d = (p[2] - a0) / 2; const s = -Math.sin(d); const c = Math.sign(Math.cos(d)); q1 = versor.multiply([Math.sqrt(1 - s * s), 0, 0, c * s], q1); } projection.rotate(versor.rotation(q1)); // In vicinity of the antipode (unstable) of q0, restart. if (delta[0] < 0.7) dragstarted.apply(this, [event, this]); } return d3.drag() .on("start", dragstarted) .on("drag", dragged); }2e:[{"id":"efcaaf9f0b260e09b6afeaee6dbc1b91ad45f3328561cd67eb16a1754096c1095f70d284acdc4b004910e89265b60eba2706334e0dc84ded38fd9209083d4cef","href":"https://static.observableusercontent.com/files/efcaaf9f0b260e09b6afeaee6dbc1b91ad45f3328561cd67eb16a1754096c1095f70d284acdc4b004910e89265b60eba2706334e0dc84ded38fd9209083d4cef","name":"land-50m.json","type":"application/octet-stream","lastModified":1675026993349.681,"size":545534},{"id":"eec657afeffb70691657f56f78ce546cc20861c628c4272d902fb7ff94d07a73737fd5356d255cef2a092de8322c56bbbc4f0f6a3c0c12864101f37ec6da9321","href":"https://static.observableusercontent.com/files/eec657afeffb70691657f56f78ce546cc20861c628c4272d902fb7ff94d07a73737fd5356d255cef2a092de8322c56bbbc4f0f6a3c0c12864101f37ec6da9321","name":"land-110m.json","type":"application/octet-stream","lastModified":1675026993349.681,"size":55207}] 2b:{"id":"abc3b5939e6d1e21","slug":null,"title":"Versor Dragging","thumbnail":"0803ac69f651a27c959ddc08750e4a5371fc7d998aa5540035ced9f686062e57","access_level":"public","create_time":"$D2023-01-29T21:16:33.349Z","update_time":"$D2023-01-30T22:38:58.270Z","view_time":null,"first_public_time":"$D2023-01-29T21:16:33.349Z","has_unpublished_edits":null,"fork":{"id":"a6eac1a846431d90","slug":null,"title":"Versor Dragging, but edited","owner":{"id":"5fe7520d2710f184","login":"lavamangas","name":"GurvbPro Studios"}},"stars":0,"starred":false,"owner":{"type":"team","id":"5fe7520d2710f184","login":"lavamangas","name":"GurvbPro Studios","avatar_url":"https://avatars-next.observableusercontent.com/cf00df61cf392e5bfc6a39f61c9be2cbb7013986fb4c7c422fdd4494dde0c204","tier":"starter_2024"},"version":228,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"9f91811b8e527b53","login":"lavamangas","name":"GurvbPro Studios","avatar_url":"https://avatars-next.observableusercontent.com/cf00df61cf392e5bfc6a39f61c9be2cbb7013986fb4c7c422fdd4494dde0c204","tier":null}],"members":[{"type":"individual","id":"9f91811b8e527b53","login":"lavamangas","name":"GurvbPro Studios","avatar_url":"https://avatars-next.observableusercontent.com/cf00df61cf392e5bfc6a39f61c9be2cbb7013986fb4c7c422fdd4494dde0c204","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Versor Dragging","cells":[{"id":0,"value":"md`# Versor Dragging\n\nSee also Jason Davies’ [Rotate the World](https://www.jasondavies.com/maps/rotate/).`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"chart = {\n const context = DOM.context2d(width, height);\n const path = d3.geoPath(projection, context);\n\n function render(land) {\n context.clearRect(0, 0, width, height);\n context.beginPath(), path(sphere), context.fillStyle = \"#058\", context.fill();\n context.beginPath(), path(land), context.fillStyle = \"#040\", context.fill();\n context.beginPath(), path(sphere), context.stroke();\n }\n\n return d3.select(context.canvas)\n .call(drag(projection)\n .on(\"drag.render\", () => render(land110))\n .on(\"end.render\", () => render(land50)))\n .call(() => render(land50))\n .node();\n}","pinned":true,"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":76,"value":"$2d","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"projection = d3[projectionName]().precision(0.1)","pinned":true,"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":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":27,"value":"sphere = ({type: \"Sphere\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":136,"value":"land50 = FileAttachment(\"land-50m.json\").json().then(world => topojson.feature(world, world.objects.land))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"land110 = FileAttachment(\"land-110m.json\").json().then(world => topojson.feature(world, world.objects.land))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":36,"value":"versor = require(\"versor@0.0.3\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"topojson = require(\"topojson-client@3\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"d3 = require(\"d3@6\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":197,"value":"note = md`---\n_Note:_ to understand the code it might be easier to start with this [earlier version](https://observablehq.com/d/569d101dd5bd332b) that did not have to account for multitouch.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W2e","stdlib":"1","titling":"auto"}} 2c:"$2b:body"