32:T615,{ const context = DOM.context2d(width, height); const projection = d3.geoPeirceQuincuncial().fitSize([width, height], {type: "Sphere"}).precision(0.1); const path = d3.geoPath(projection, context); path.pointRadius(point_radius); context.canvas.classList.add('draggable'); let land = topojson.feature(world, world.objects.land); let land50 = topojson.feature(world, world.objects.land); let land110 = topojson.feature(world, world.objects.land); function render(x, y) { context.fillStyle = "#f7f8fb"; context.fillRect(0, 0, width, width); context.strokeStyle = "#cdf"; context.lineWidth = 0.6; context.beginPath(), path(graticule2), context.stroke(); context.strokeStyle = "#7be"; context.lineWidth = 0.3; context.beginPath(), path(graticule), context.stroke(); context.fillStyle = "rgba(10, 40, 24, .88)" context.beginPath(), path(land), context.fill(); context.beginPath(), path(add_lakes), context.fillStyle = color_lakes, context.fill(); for(let i = 0; i<=nb_points ;i++) { const pointPath = { type: "MultiPoint", coordinates: [it(i/nb_points)] }; context.beginPath(), context.fillStyle = color_path, path(pointPath), context.point= "0.1", context.fill(); } } return d3.select(context.canvas) .call(drag(projection) .on("start.render", () => {land = land110; render();}) .on("drag.render", () => render()) .on("end.render", () => {land = land50; render();})) .call(() => render()) .node(); }33:Tf38,// Adapted from https://observablehq.com/@jashkenas/inputs#worldMapCoordinatesDemo function worldMapCoordinates(config = {}) { var n_point; var lonA, lonB, latA, latB; const { value = [], title, description, width = width_small_map } = Array.isArray(config) ? {value: config} : config; const height = Math.round((210 / 400) * width); [lonA, latA] = value[0]; [lonB, latB] = value[1]; lonA = lonA != null ? lonA : null; latA = latA != null ? latA : null; lonB = lonB != null ? lonB : null; latB = latB != null ? latB : null; const formEl = html``; const context = DOM.context2d(width, height); const canvas = context.canvas; canvas.style.margin = "10px 0 3px"; const projection = d3geo .geoNaturalEarth1() .precision(0.1) .fitSize([width, height], { type: "Sphere" }); const path = d3geo.geoPath(projection, context).pointRadius(point_radius_2); formEl.append(canvas); function draw() { context.fillStyle = "#fff"; context.fillRect(0, 0, width, height); context.beginPath(); path(graticule); context.lineWidth = 0.35; context.strokeStyle = "#ddd"; context.stroke(); context.beginPath(); path(land); context.fillStyle = "#f4f4f4"; context.fill(); context.beginPath(); path(countries); context.strokeStyle = "#aaa"; context.stroke(); if (lonA != null && latA != null) { const pointPath = { type: "MultiPoint", coordinates: [[lonA, latA]] }; context.beginPath(); path.pointRadius(point_radius_2); path(pointPath); context.fillStyle = color_A; context.fill(); } if (lonB != null && latB != null) { const pointPath = { type: "MultiPoint", coordinates: [[lonB, latB]] }; context.beginPath(); path.pointRadius(point_radius_2); path(pointPath); context.fillStyle = color_B; context.fill(); } // We draw the path between 2 points var interpolation = d3.geoInterpolate([lonA,latA],[lonB,latB]); var nb_points = d3.geoDistance([lonA,latA],[lonB,latB])*20; for(let i = 1; i html`

Longitude: ${lonA != null ? lonA.toFixed(2) : ""} Latitude: ${latA != null ? latA.toFixed(2) : ""}

Longitude: ${lonB != null ? lonB.toFixed(2) : ""} Latitude: ${latB != null ? latB.toFixed(2) : ""}

`, getValue: () => [[lonA != null ? lonA : null, latA != null ? latA : null], [lonB != null ? lonB : null, latB != null ? latB : null]], form: formEl }); return form; }34:T951,// From https://observablehq.com/@jashkenas/inputs#worldMapCoordinatesDemo function input(config) { let { form, type = "text", attributes = {}, action, getValue, title, description, format, display, submit, options } = config; const wrapper = html`

`; if (!form) form = html``; Object.keys(attributes).forEach(key => { const val = attributes[key]; if (val != null) form.input.setAttribute(key, val); }); if (submit) form.append( html`` ); form.append( html`` ); if (title) form.prepend( html`

${title}

` ); if (description) form.append( html`

${description}

` ); if (format) format = typeof format === "function" ? format : d3format.format(format); if (action) { action(form); } else { const verb = submit ? "onsubmit" : type == "button" ? "onclick" : type == "checkbox" || type == "radio" ? "onchange" : "oninput"; form[verb] = e => { e && e.preventDefault(); const value = getValue ? getValue(form.input) : form.input.value; if (form.output) { const out = display ? display(value) : format ? format(value) : value; if (out instanceof window.Element) { while (form.output.hasChildNodes()) { form.output.removeChild(form.output.lastChild); } form.output.append(out); } else { form.output.value = out; } } form.value = value; if (verb !== "oninput") form.dispatchEvent(new CustomEvent("input", { bubbles: true })); }; if (verb !== "oninput") wrapper.oninput = e => e && e.stopPropagation() && e.preventDefault(); if (verb !== "onsubmit") form.onsubmit = e => e && e.preventDefault(); form[verb](); } while (form.childNodes.length) { wrapper.appendChild(form.childNodes[0]); } form.append(wrapper); return form; }35:[{"id":"5667cf6ea53cdbed31600d60556314bcefb28a3bbd66abb351464ab8cf0665cc3a4d508f73841f6ffa78ec215f8ee8acf29e09b8429409b30a3c7e4a18cc2f7f","href":"https://static.observableusercontent.com/files/5667cf6ea53cdbed31600d60556314bcefb28a3bbd66abb351464ab8cf0665cc3a4d508f73841f6ffa78ec215f8ee8acf29e09b8429409b30a3c7e4a18cc2f7f","name":"world-110m_withlakes.topo.json","type":"application/json","lastModified":1656363173903.148,"size":92469}] 30:{"title":"Great circle: shortest distance between two locations on Earth 🌏","cells":[{"id":0,"value":"# Great circle: shortest distance between two locations on Earth 🌏","pinned":false,"hidden":false,"mode":"md"},{"id":868,"value":"

The great circle defines the shortest distance between two points A and B on a sphere. This circle has the same center as the sphere and it passes (obviously) through both points. The great circle is therefore useful for evaluating the distance (as the crow flies) between two places on Earth. \n

The purpose of this notebook is to visualize the shortest path between two distant locations on Earth. To do this, simply click on the following map to select 2 points (either on land or in the ocean).

","pinned":false,"hidden":false,"mode":"html"},{"id":458,"value":"viewof locations = worldMapCoordinates([[6.14,46.2],[149.78,-32.56]])","pinned":false,"hidden":false,"mode":"ojs"},{"id":491,"value":"
\n

\nThe distance between the selected locations A and B is ${distance_km} km.\n

\n In addition to the natural Earth projection shown above, the following Peirce quincuncial projection helps figure out why the geodesics are not straight lines. This map can be redrawn by dragging it.\n

","pinned":false,"hidden":false,"mode":"html"},{"id":76,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":748,"value":"
","pinned":false,"hidden":false,"mode":"html"},{"id":249,"value":"---\n## Appendix","pinned":false,"hidden":false,"mode":"md"},{"id":243,"value":"width = 650;","pinned":false,"hidden":false,"mode":"ojs"},{"id":78,"value":"height = width;","pinned":false,"hidden":false,"mode":"ojs"},{"id":742,"value":"width_small_map = 600","pinned":false,"hidden":false,"mode":"ojs"},{"id":82,"value":"point_radius = 1.4","pinned":false,"hidden":false,"mode":"ojs"},{"id":882,"value":"point_radius_2 = 3","pinned":false,"hidden":false,"mode":"ojs"},{"id":658,"value":"color_A = \"#f06\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":660,"value":"color_B = \"#60f\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":680,"value":"color_path = \"tomato\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":755,"value":"color_lakes = \"#0ac\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":590,"value":"Place_A = locations[0]","pinned":false,"hidden":false,"mode":"ojs"},{"id":619,"value":"Place_B = locations[1]","pinned":false,"hidden":false,"mode":"ojs"},{"id":35,"value":"it = d3.geoInterpolate(Place_A, Place_B);","pinned":false,"hidden":false,"mode":"ojs"},{"id":510,"value":"distance_km = (d3.geoDistance(Place_A, Place_B)* 6371).toFixed(0)","pinned":false,"hidden":false,"mode":"ojs"},{"id":414,"value":"nb_points = Math.round(distance_km/150)","pinned":false,"hidden":false,"mode":"ojs"},{"id":70,"value":"world = FileAttachment(\"world-110m_withlakes.topo.json\").json();","pinned":false,"hidden":false,"mode":"ojs"},{"id":267,"value":"land = topojson.feature(world, world.objects.land)","pinned":false,"hidden":false,"mode":"ojs"},{"id":751,"value":"lakes = FileAttachment(\"world-110m_withlakes.topo.json\").json()","pinned":false,"hidden":false,"mode":"ojs"},{"id":758,"value":"add_lakes = topojson.feature(lakes, lakes.objects.lakes)","pinned":true,"hidden":false,"mode":"ojs"},{"id":445,"value":"countries = topojson.feature(world, world.objects.countries)","pinned":false,"hidden":false,"mode":"ojs"},{"id":236,"value":"graticule = d3.geoGraticule10()","pinned":false,"hidden":false,"mode":"ojs"},{"id":290,"value":"graticule2 = d3.geoGraticule()\n .extentMajor([[-180, -85 -1e-5], [180, 85 + 1e-5]])\n .extentMinor([[-180, -80], [180, 80]])\n .stepMajor([10, 5])\n .stepMinor([5, 5])()","pinned":false,"hidden":false,"mode":"ojs"},{"id":214,"value":"topojson = require(\"topojson-client@3\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"d3 = require(\"d3-geo@1\", \"d3-selection@1\", \"d3-drag@1\", \"d3-geo-projection@2\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":441,"value":"d3format = require(\"d3-format@1\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":443,"value":"d3geo = require(\"d3-geo@1\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":286,"value":"versor = require(\"versor@0.0.3\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":284,"value":"function drag(projection) {\n let v0, q0, r0;\n \n function dragstarted() {\n v0 = versor.cartesian(projection.invert([d3.event.x, d3.event.y]));\n q0 = versor(r0 = projection.rotate());\n }\n \n function dragged() {\n const v1 = versor.cartesian(projection.rotate(r0).invert([d3.event.x, d3.event.y]));\n const q1 = versor.multiply(q0, versor.delta(v0, v1));\n projection.rotate(versor.rotation(q1));\n }\n \n return d3.drag()\n .on(\"start\", dragstarted)\n .on(\"drag\", dragged);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":434,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":436,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W35","stdlib":"1","titling":"auto"}