31:T541,MBP = { let perimeter = [], remainingIndices = d3.range(0, border.length), lastBearing, distance = 0; //Starting point perimeter.push(border[d3.maxIndex(border, p => p[1])]); // most northerly point lastBearing = 90; // East //Subsequent points while ( !arrEq(perimeter[0], perimeter[perimeter.length - 1]) || //stop when back at first point perimeter.length == 1 ) { yield Promises.tick(200, { type: "LineString", coordinates: perimeter, distance }); //bearings to candidate points const bearings = remainingIndices.map(i => calculateBearing(perimeter[perimeter.length - 1], border[i]) ); //selection of minimal acceptable bearing const nextIndex = d3.minIndex(bearings, b => { if (b > lastBearing) { return b - lastBearing; } else if (b > lastBearing - 90) { //great circle bearing is relative return b - lastBearing; } else if (b < lastBearing - 180) { return b + 360 - lastBearing; } else { return NaN; } }); lastBearing = bearings[nextIndex]; perimeter.push(border[nextIndex]); distance += calculateDistance( perimeter[perimeter.length - 2], perimeter[perimeter.length - 1] ); } yield { type: "Polygon", coordinates: [perimeter], distance }; }32:T51b,hud = { const cssStyle = html` `; const countryLabel = html`

${selectedCountry}

`; const distanceLabel = html`

${MBP.distance / 1000 - ((MBP.distance / 1000) % 1)} km

`; const fullscreenButton = html` `; const diceButton = html` `; diceButton.onclick = () => rollDice(); width; // link to window resize return { domElement: html`${cssStyle}${countryLabel}${distanceLabel}${ window.innerWidth == screen.width ? "" : fullscreenButton }${diceButton}` }; }33:[] 2f:{"title":"Minimum Bounding Perimeter AKA Convex Hull","cells":[{"id":0,"value":"md`# Minimum Bounding Perimeter AKA Convex Hull\nWhat is the minimum length line that envelopes a set of points?`","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"md`### Theory 👈 apply grain of salt here\n- a point most extreme in a direction (ie. northerly) will be on this perimeter, and therefore a good starting point.\n- subsequents points will be closest in bearing to the existing perimeter.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":123,"value":"md`### Example\njust don't check out Russia...\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":38,"value":"viewof selectedCountry = Select(\n countries\n .sort((a, b) =>\n a.properties.name\n .toLowerCase()\n .localeCompare(b.properties.name.toLowerCase())\n )\n .map(c => c.properties.name),\n { value: \"New Zealand\" }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":460,"value":"canvas = {\n const height = (width * screen.height) / screen.width;\n const context = DOM.context2d(width, height);\n const projection = d3.geoOrthographic();\n const path = d3.geoPath(projection, context);\n\n const r = d3.geoCentroid(country);\n projection\n .rotate([-r[0], -r[1], 0])\n .fitExtent([[10, 10], [width - 20, height - 20]], country);\n\n context.clearRect(0, 0, width, height);\n context.beginPath(), path(land), (context.fillStyle = \"#ddd\"), context.fill();\n context.beginPath(),\n path(country),\n (context.strokeStyle = \"#000\"),\n (context.lineWidth = 0.5),\n context.stroke();\n context.beginPath(),\n path({ type: \"Sphere\" }),\n (context.strokeStyle = \"#000\"),\n (context.lineWidth = 1.5),\n context.stroke();\n context.beginPath(),\n path(MBP),\n (context.strokeStyle = \"#7b9\"),\n (context.lineWidth = 2.5),\n context.stroke();\n return html`${context.canvas}${hud.domElement}`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":142,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":650,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":753,"value":"function rollDice() {\n console.log(\"fasd\");\n set(\n viewof selectedCountry,\n countries[Math.floor(Math.random() * countries.length)].properties.name\n );\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":453,"value":"md`### Maths\nreference: [movable-type.co.uk](https://www.movable-type.co.uk/scripts/latlong.html)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":97,"value":"function calculateBearing(a, b) {\n //ref https://www.movable-type.co.uk/scripts/latlong.html\n // where a, b are each [long, lat]\n\n if (arrEq(a, b)) {\n return NaN;\n }\n\n const φ1 = (a[1] * Math.PI) / 180,\n λ1 = (a[0] * Math.PI) / 180;\n const φ2 = (b[1] * Math.PI) / 180,\n λ2 = (b[0] * Math.PI) / 180;\n\n const y = Math.sin(λ2 - λ1) * Math.cos(φ2);\n const x =\n Math.cos(φ1) * Math.sin(φ2) -\n Math.sin(φ1) * Math.cos(φ2) * Math.cos(λ2 - λ1);\n const θ = Math.atan2(y, x);\n return ((θ * 180) / Math.PI + 360) % 360; // in degrees\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":434,"value":"function calculateDistance(a, b) {\n //ref https://www.movable-type.co.uk/scripts/latlong.html\n // where a, b are each [long, lat]\n\n const R = 6371e3; // metres\n const φ1 = (a[1] * Math.PI) / 180; // φ, λ in radians\n const φ2 = (b[1] * Math.PI) / 180;\n const Δφ = ((b[1] - a[1]) * Math.PI) / 180;\n const Δλ = ((b[0] - a[0]) * Math.PI) / 180;\n\n const A =\n Math.sin(Δφ / 2) * Math.sin(Δφ / 2) +\n Math.cos(φ1) * Math.cos(φ2) * Math.sin(Δλ / 2) * Math.sin(Δλ / 2);\n const C = 2 * Math.atan2(Math.sqrt(A), Math.sqrt(1 - A));\n\n return R * C; // in metres\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":277,"value":"function arrEq(arr1, arr2) {\n return arr1.reduce((a,b,c) => a && b == arr2[c],true);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":113,"value":"md`### Data\n[long, lat] points that make up the country's border.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":394,"value":"border = country.geometry.coordinates.reduce(\n (a, b) => (b.length > 1 ? a.concat(b) : a.concat(b[0])),\n []\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":51,"value":"country = countries.filter(c => c.properties.name == selectedCountry)[0]","pinned":false,"hidden":false,"mode":"ojs"},{"id":35,"value":"import { countries, land, Versor } from '@d3/world-tour'","pinned":false,"hidden":false,"mode":"ojs"},{"id":747,"value":"md`### Libs`","pinned":false,"hidden":false,"mode":"ojs"},{"id":670,"value":"import { Select } from '@observablehq/inputs'","pinned":false,"hidden":false,"mode":"ojs"},{"id":742,"value":"import { set } from '@observablehq/synchronized-inputs'","pinned":false,"hidden":false,"mode":"ojs"},{"id":74,"value":"d3 = require(\"d3@6\")","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}