2c:null 2d:["$","title",null,{"children":"Minimum Bounding Perimeter AKA Convex Hull | notanaccent | Observable"}] 32: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 }; }33: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}` }; }34:[] 30:{"id":"6f3aeebc0e9b4381","slug":"minimum-bounding-perimeter","title":"Minimum Bounding Perimeter AKA Convex Hull","thumbnail":"1f5540dad37d2e4650338962b0de5e70ca87e140c7e3e235d28f90c2a7de46fa","access_level":"public","create_time":"$D2021-04-18T02:56:52.311Z","update_time":"$D2021-04-18T14:32:57.856Z","view_time":null,"first_public_time":"$D2021-04-18T14:36:06.056Z","has_unpublished_edits":null,"fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"bc6b9021599bcf55","login":"notanaccent","name":"","avatar_url":"https://avatars-next.observableusercontent.com/b94c500c7691cb0a3e4d8b84b846c7171a4f09348a3b5be1110d9874e6195351","tier":"starter_2024"},"version":827,"publish_version":827,"role":null,"authored":false,"authors":[{"type":"individual","id":"ce955889d463ad2d","login":"notanaccent","name":"","avatar_url":"https://avatars-next.observableusercontent.com/b94c500c7691cb0a3e4d8b84b846c7171a4f09348a3b5be1110d9874e6195351","tier":null}],"members":[{"type":"individual","id":"ce955889d463ad2d","login":"notanaccent","name":"","avatar_url":"https://avatars-next.observableusercontent.com/b94c500c7691cb0a3e4d8b84b846c7171a4f09348a3b5be1110d9874e6195351","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":123,"value":"md`### Example\njust don't check out Russia...\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":142,"value":"$32","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":650,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":113,"value":"md`### Data\n[long, lat] points that make up the country's border.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":51,"value":"country = countries.filter(c => c.properties.name == selectedCountry)[0]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":35,"value":"import { countries, land, Versor } from '@d3/world-tour'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":747,"value":"md`### Libs`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":670,"value":"import { Select } from '@observablehq/inputs'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":742,"value":"import { set } from '@observablehq/synchronized-inputs'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":74,"value":"d3 = require(\"d3@6\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1"}} 31:"$30:body"