{ 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(); }