30:T7e2,{ const width = 640; const height = width * .5 | 0; const points = [λϕ(white_house), λϕ(eiffel_tower)]; const projection = d3 .geoTwoPointEquidistant(...points) .scale(0.5 * width) .translate([.5 * width , .25 * width]) .precision(.1) .clipExtent([[1, 1], [width - 1, height - 1]]); const path = d3.geoPath(projection); const graticule = d3.geoGraticule10(); const arc = ({ type: 'LineString', coordinates: geodesic(white_house, eiffel_tower) }); const circles = ({ type: 'MultiLineString', coordinates: Array.from( linspace(0, 1.1e7, 12), (r) => geocircle(white_house, r)) }); const rays = ({ type: 'MultiLineString', coordinates: Array.from( linspace(-180, 180, 16, false), (α) => georay(white_house, α)) }); const svg = d3 .select(DOM.svg(width, height)) .style("width", "100%") .style("height", "auto"); const g = svg.append("g"); g.append("path") .attr("d", path(graticule)) .attr("fill", "none") .attr("stroke", "#bbb") .attr("stroke-width", 0.5); g.append("path") .attr("d", path(land50)) .attr("fill", `rgba(195, 210, 190, .7)`); g.append("path") .attr("d", path(circles)) .attr("fill", "none") .attr("stroke", "#04a") .attr("stroke-width", .6); g.append("path") .attr("d", path(rays)) .attr("fill", "none") .attr("stroke", "#04a") .attr("stroke-width", .6); g.append("path") .attr("d", path(arc)) .attr("fill", "none") .attr("stroke", "#905") .attr("stroke-width", 2.5); g.selectAll("circle") .data(points.map(point => projection(point))) .enter() .append("circle") .attr("r", 6) .attr("cx", d => d[0]) .attr("cy", d => d[1]) .attr("fill", "#905"); g.append("path") .attr("d", path({ type: "Sphere" })) .attr("fill", "none") .attr("stroke", "#000") .attr("stroke-width", 1); return html`

${svg.node()}`; }31:T8a2,{ const triangle = ({ type: 'LineString', coordinates: [ geodesic(rio_de_janeiro, thracian_sea), geodesic(thracian_sea, salt_lake_city), geodesic(salt_lake_city, rio_de_janeiro) ].flat() }); const circles = ({ type: 'MultiLineString', coordinates: Array.from( linspace(0, 1.1e7, 12), (r) => geocircle(rio_de_janeiro, r)) }); const rays = ({ type: 'MultiLineString', coordinates: Array.from( linspace(-180, 180, 16, false), (α) => georay(rio_de_janeiro, α)) }); const width = 640; const height = width * .9 | 0; const points = [ λϕ(salt_lake_city), λϕ(thracian_sea), λϕ(rio_de_janeiro) ]; const graticule = d3.geoGraticule10(); const projection = d3 .geoChamberlin(...points) .scale(0.52 * width) .translate([.5 * width , .37 * width]) .precision(.1) .clipExtent([[1, 1], [width - 1, height - 1]]); const path = d3.geoPath(projection); const svg = d3 .select(DOM.svg(width, height)) .style("width", "100%") .style("height", "auto"); const g = svg.append("g"); g.append("path") .attr("d", path(graticule)) .attr("fill", "none") .attr("stroke", "#bbb") .attr("stroke-width", 0.5); g.append("path") .attr("d", path(land50)) .attr("fill", `rgba(195, 210, 190, .7)`); g.append("path") .attr("d", path(circles)) .attr("fill", "none") .attr("stroke", "#04a") .attr("stroke-width", .6); g.append("path") .attr("d", path(rays)) .attr("fill", "none") .attr("stroke", "#04a") .attr("stroke-width", .6); g.append("path") .attr("d", path(triangle)) .attr("fill", `rgb(144, 0, 80, .05)`) .attr("stroke", "#905") .attr("stroke-width", 2.5); g.selectAll("circle") .data(points.map(point => projection(point))) .enter() .append("circle") .attr("r", 6) .attr("cx", d => d[0]) .attr("cy", d => d[1]) .attr("fill", "#905"); g.append("path") .attr("d", path({ type: "Sphere" })) .attr("fill", "none") .attr("stroke", "#000") .attr("stroke-width", 1); return html`

${svg.node()}`; }32:[] 2e:{"title":"Hello, GeographicLib!","cells":[{"id":0,"value":"Title = md`# Hello, GeographicLib!`","pinned":false,"hidden":false,"mode":"ojs"},{"id":16,"value":"md`\n[GeographicLib](https://geographiclib.sourceforge.io) by [Charles Karney](https://www.petrel.org) is a library for computing [geodesics](https://en.wikipedia.org/wiki/Geodesic) on an [ellipsoid of revolution](https://en.wikipedia.org/wiki/Spheroid), with implementations in several programming languages, based on algorithms published in [Karney’s scholarly papers](https://geographiclib.sourceforge.io/geod.html), “Geodesics on an ellipsoid of revolution” (2011) and “Algorithms for geodesics” (2013).\n\nHere is the [JavaScript documentation](https://geographiclib.sourceforge.io/html/js/).\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":384,"value":"md`* * *\n\nStart by specifying the ellipsoid of revolution – in this case, [WGS84][] with major axis ${$`a = 6{,}378{,}137\\; \\textrm{m}`}, and [flattening](https://en.wikipedia.org/wiki/Flattening) ${$`f = 1 / 298.257\\,223\\,563`}.\n\n [WGS84]: https://en.wikipedia.org/wiki/World_Geodetic_System\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2,"value":"GeographicLib = require('geographiclib@1.51')","pinned":true,"hidden":false,"mode":"ojs"},{"id":21,"value":"wgs84 = new GeographicLib.Geodesic.Geodesic(6378137, 1/298.257223563);\n// shortcut: GeographicLib.Geodesic.WGS84","pinned":true,"hidden":false,"mode":"ojs"},{"id":358,"value":"Inverse = md`* * *\n\n## Inverse geodesic problem`","pinned":false,"hidden":false,"mode":"ojs"},{"id":815,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":23,"value":"magenta(md`\nThe distance from the [White House](https://en.wikipedia.org/wiki/White_House), Washington, D.C., USA\nto the [Eiffel Tower](https://en.wikipedia.org/wiki/Eiffel_Tower), Paris, France is **${\nd3.format(\",.3f\")(dc_to_paris.s12 * 1e-3)} kilometers**.\n`)","pinned":false,"hidden":false,"mode":"ojs"},{"id":78,"value":"dc_to_paris = wgs84.Inverse(...white_house, ...eiffel_tower)","pinned":true,"hidden":false,"mode":"ojs"},{"id":37,"value":"viewof white_house = mapview({ϕ: 38.8974, λ: -77.0375, z: 16})","pinned":true,"hidden":false,"mode":"ojs"},{"id":41,"value":"viewof eiffel_tower = mapview({ϕ: 48.8583, λ: 2.2945, z: 16})","pinned":true,"hidden":false,"mode":"ojs"},{"id":363,"value":"Forward = md`* * *\n\n## Direct geodesic problem`","pinned":false,"hidden":false,"mode":"ojs"},{"id":586,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":25,"value":"magenta(md`\n[Rio de Janeiro](https://en.wikipedia.org/wiki/Rio_de_Janeiro), Brazil is located at ${formatlatlon(rio_de_janeiro)}.\n\nThe point 10,000 kilometers northeast of Rio de Janeiro is ${formatlatlon(thracian_sea)}, in the Thracian Sea near [Alexandroupoli](https://en.wikipedia.org/wiki/Alexandroupoli), Greece.

\n\nThe point 10,000 kilometers northwest of Rio de Janeiro, Brazil is ${formatlatlon(salt_lake_city)}, [Salt Lake City](https://en.wikipedia.org/wiki/Salt_Lake_City), USA.

\n\nThese two points are **${d3.format(\",.3f\")(dist.s12 * 1e-3)} kilometers** apart.\n\nThe area of this geodesic triangle is **${d3.format(\",.3f\")(triangle_area * 1e-6)} square kilometers**.\n`)","pinned":false,"hidden":false,"mode":"ojs"},{"id":84,"value":"ne_from_rio = wgs84.Direct(...rio_de_janeiro, 45, 10e6)","pinned":true,"hidden":false,"mode":"ojs"},{"id":524,"value":"nw_from_rio = wgs84.Direct(...rio_de_janeiro, -45, 10e6)","pinned":true,"hidden":false,"mode":"ojs"},{"id":531,"value":"dist = wgs84.Inverse(...thracian_sea, ...salt_lake_city)","pinned":true,"hidden":false,"mode":"ojs"},{"id":877,"value":"area = (pts) => {\n const polygon = wgs84.Polygon();\n for (const p of pts) polygon.AddPoint(...p);\n return polygon.Compute().area; }","pinned":true,"hidden":false,"mode":"ojs"},{"id":905,"value":"triangle_area = area([rio_de_janeiro, thracian_sea, salt_lake_city])","pinned":true,"hidden":false,"mode":"ojs"},{"id":257,"value":"viewof thracian_sea = mapview({ϕ: ne_from_rio.lat2, λ: ne_from_rio.lon2, z:8})","pinned":true,"hidden":false,"mode":"ojs"},{"id":527,"value":"viewof salt_lake_city = mapview({ϕ: nw_from_rio.lat2, λ: nw_from_rio.lon2, z:10})","pinned":true,"hidden":false,"mode":"ojs"},{"id":59,"value":"viewof rio_de_janeiro = mapview({ϕ: -22.9518, λ: -43.2105, z:10}) ","pinned":true,"hidden":false,"mode":"ojs"},{"id":937,"value":"md`\n## Credits\nThanks to Charles Karney for GeographicLib; [Mike Bostock](/@mbostock), [Jason Davies](https://www.jasondavies.com), [Philippe Rivière](/@fil), et al. for d3 and d3-geo; [Vladimir Agafonkin](/@mourner) for his [“A Web Map from Scratch”](/@mourner/simple-web-map) notebook which is the basis for the embedded raster maps above; and [Torben Jansen](/@toja) for his [“Trimetric projection of Europe”](/@toja/trimetric-projection-of-europe) notebook from which I started when making the vector maps.\n\nWhile we are here, a shout out to [Legendre](https://en.wikipedia.org/wiki/Adrien-Marie_Legendre), [Bessel](https://en.wikipedia.org/wiki/Friedrich_Bessel), [Jacobi](https://en.wikipedia.org/wiki/Carl_Gustav_Jacob_Jacobi), and the [many other excellent mathematicians](https://geographiclib.sourceforge.io/geodesic-papers/biblio.html) who have studied this subject.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":355,"value":"md`* * *\n\n## Odds & Ends`","pinned":false,"hidden":false,"mode":"ojs"},{"id":691,"value":"// geodesic arc connecting two given points\ngeodesic = ([ϕ0, λ0], [ϕ1, λ1], n=20) => {\n var {s12, azi1:α} = wgs84.Inverse(ϕ0, λ0, ϕ1, λ1);\n return Array.from(linspace(0, s12, n), (s) => {\n var {lat2:ϕ, lon2:λ} = wgs84.Direct(ϕ0, λ0, α, s);\n return [λ, ϕ]\n });\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":725,"value":"// circle of constant geodesic distance about a given point\ngeocircle = ([ϕ0, λ0], r, n=200) => {\n return Array.from(linspace(-180, 180, n), (α) => {\n var {lat2:ϕ, lon2:λ} = wgs84.Direct(ϕ0, λ0, α, r);\n return [λ, ϕ]\n });\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":756,"value":"// geodesic 15,000 km long from a given point with a given azimuth\ngeoray = ([ϕ0, λ0], α, n=20) => {\n return Array.from(linspace(0, 1.5e7, n), (r) => {\n var {lat2:ϕ, lon2:λ} = wgs84.Direct(ϕ0, λ0, α, r);\n return [λ, ϕ]\n });\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1058,"value":"formatlatlon = ([ϕ, λ]) => html`\n${d3.format(\".4f\")(Math.abs(ϕ))}° ${ϕ >= 0 ? 'N' : 'S'},\n${d3.format(\".4f\")(Math.abs(λ))}° ${λ >= 0 ? 'E' : 'W'}`","pinned":true,"hidden":false,"mode":"ojs"},{"id":139,"value":"mapview = ({ϕ, λ, z=12}) => {\n const map = osmMap(λ, ϕ, z, Math.min(width, 640), 300);\n map.style.setProperty('border', '1px solid black')\n const view = html`

${map}`;\n view.value = [ϕ, λ];\n return view\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":570,"value":"λϕ = ([ϕ, λ]) => [λ, ϕ]","pinned":true,"hidden":false,"mode":"ojs"},{"id":970,"value":"// see https://observablehq.com/@fil/hello-shadow-dom\nfunction magenta(el) {\n const div = html`

`\n const style = html`