30:Tcd0,{ const height = 600; const r = Math.min(width, height) / 2.5; const cx = width / 2; const cy = height / 2; const projection = d3.geoOrthographic() .translate([cx, cy]) .clipAngle(90) .scale(r); const path = d3.geoPath(projection) .pointRadius(2.5); const svg = d3.select(html``) .call(drag(projection).on("drag", render)); const feature = svg.select("#feature").datum(land); const point = svg.select("#points").selectAll().data(places).join("path"); const arc = svg.select("#arcs").selectAll().data(links).join("path"); const flyer = svg.select("#flyers").selectAll().data(links).join("path"); render(); function render() { feature.attr("d", path); point.attr("d", path); arc.attr("d", renderArc); flyer.attr("d", renderFlyer).attr("stroke-opacity", fadeArc); } function renderArc({source, target}) { return path({type: "LineString", coordinates: [source, target]}); } function renderFlyer({source, target}) { const center = projection.invert([cx, cy]); const interpolate = d3.geoInterpolate(source, target); return `M${d3.ticks(0, 1, 40).map((t) => { // sample evenly in [0, 1] const h = 1.5 * t * (1 - t); // height follows parabolic curve const p = interpolate(t); // spherical coordinates const [x1, y1] = projection(p); // ground coordinates return [x1 + (x1 - cx) * h, y1 + (y1 - cy) * h]; }).filter((p) => p).join("L")}`; } function fadeArc({source, target}) { const center = projection.invert([cx, cy]); const sourceDistance = d3.geoDistance(source, center); const targetDistance = d3.geoDistance(target, center); return Math.PI / 2 - Math.max(sourceDistance, targetDistance) + 0.2; } return svg.node(); }31:T5be,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({x, y}) { v0 = versor.cartesian(projection.invert([x, y])); q0 = versor(r0 = projection.rotate()); } function dragged(event) { const v1 = versor.cartesian(projection.rotate(r0).invert([event.x, event.y])); const delta = versor.delta(v0, v1); let q1 = versor.multiply(q0, delta); // For multitouch, compose with a rotation around the axis. const p = pointer(event, this); 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.drag", dragstarted) .on("drag.drag", dragged); }32:[{"id":"eb3cf2004901ac67c600e74bb895394d6e415f6d6dcd96e1576eb8b6f0f7ca2d2277b9165904b6abc883f7e2c85210e9ada547aeeb72390815c7024c804b4577","href":"https://static.observableusercontent.com/files/eb3cf2004901ac67c600e74bb895394d6e415f6d6dcd96e1576eb8b6f0f7ca2d2277b9165904b6abc883f7e2c85210e9ada547aeeb72390815c7024c804b4577","name":"land-110m.json","type":"application/json","lastModified":1750018686196.387,"size":55207},{"id":"4d386f46bd647b6d95d8dfeb3cc1481c620d5d38bc80954954b7c14a1f5d4548820ac544d01e0178e10a3c8b5bb26ec24e5beb60d8ddc806a601bd10b86dc321","href":"https://static.observableusercontent.com/files/4d386f46bd647b6d95d8dfeb3cc1481c620d5d38bc80954954b7c14a1f5d4548820ac544d01e0178e10a3c8b5bb26ec24e5beb60d8ddc806a601bd10b86dc321","name":"capitals.json","type":"application/json","lastModified":1750018689283.479,"size":9311}] 2e:{"title":"Parabolic arcs","cells":[{"id":0,"value":"# Parabolic arcs\n\nBased on work by [Derek Watkins](https://gist.github.com/dwtkns/4973620) and [Patrick Surrey](https://gist.github.com/patricksurry/5735048).","pinned":false,"hidden":false,"mode":"md"},{"id":5,"value":"$30","pinned":true,"hidden":false,"mode":"ojs"},{"id":15,"value":"world = FileAttachment(\"land-110m.json\").json()","pinned":true,"hidden":false,"mode":"ojs"},{"id":18,"value":"places = FileAttachment(\"capitals.json\").json().then((places) => places.features)","pinned":true,"hidden":false,"mode":"ojs"},{"id":13,"value":"links = places.map((p) => p.geometry.coordinates).flatMap((a, i, points) => points.slice(i + 1).map((b) => ({source: a, target: b})))","pinned":true,"hidden":false,"mode":"ojs"},{"id":20,"value":"land = topojson.feature(world, world.objects.land)","pinned":true,"hidden":false,"mode":"ojs"},{"id":9,"value":"versor = require(\"versor\");","pinned":true,"hidden":false,"mode":"ojs"},{"id":7,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}