30:T76d,viewof form = { let playPauseChar = "▶"; const controls = { play: true, stop: false, ffwd: false }; return Inputs.form( { play: Inputs.button(playPauseChar, { value: "play", reduce: () => { playPauseChar = controls.play || controls.ffwd ? "⏸" : "▶"; eventBus.dispatchEvent( new CustomEvent(controls.play || controls.ffwd ? "pause" : "play") ); controls.play = !controls.play; controls.ffwd = false; } }), stop: Inputs.button("⏹", { value: false, reduce: (stop) => { eventBus.dispatchEvent(new CustomEvent("stop")); controls.play = false; controls.ffwd = false; } }), ffwd: Inputs.button("⏵⏵", { value: false, reduce: (ffwd) => { eventBus.dispatchEvent(new CustomEvent("ffwd")); controls.play = false; controls.ffwd = true; } }) }, { template: (formParts) => { Object.values(formParts)[0].firstChild.className = "play-pause-button"; Object.values(formParts)[0].firstChild.addEventListener( "click", (e) => { e.srcElement.innerText = playPauseChar; } ); Object.values(formParts)[1].firstChild.addEventListener( "click", (e) => { document.querySelector(".play-pause-button").innerText = "▶"; } ); Object.values(formParts)[2].firstChild.addEventListener( "click", (e) => { document.querySelector(".play-pause-button").innerText = "⏸"; } ); return htl.html`

${Object.values(formParts)}

`; } } ); }31:T1ede,{ const context = DOM.context2d(canvasWidth, canvasHeight); const canvas = context.canvas; const circle = d3.geoCircle().radius(90).precision(2)(); const labelCircle = d3.geoCircle().radius(92).precision(10)(); const horizonCircle = d3.geoCircle().radius(89.9999).center([0, -90])(); const skyCircle = d3.geoCircle().radius(89.9999).center([0, 90])(); const controls = { play: true, stop: false, ffwd: false, pause: false }; let timeNow = new Date().getTime(); let timeOffset = 0; const futurePositions = d3 .range(0, 865) .map( (d) => SunCalc.getPosition(new Date(timeNow + d * 10e6)), ...location.toReversed() ); const transform = { k: 1, lambda: 0, phi: 0, x: 0, y: 0 }; const zoom = d3 .zoom() .on("start", (event) => {}) .on("zoom", (event) => { if (event.sourceEvent.type === "wheel") { transform.x = event.transform.x; transform.y = event.transform.y; transform.k = event.transform.k; stereo.translate([ transform.x + (canvasWidth / 2) * transform.k, transform.y + (canvasHeight / 2) * transform.k ]); stereo.scale(transform.k * initialScale); } }) .on("end", (event) => {}) .scaleExtent([1, 10]); d3.select(canvas); function panned(event) { d3.select(window) .on("mousemove", dragged) .on("mouseup", () => { d3.select(window).on("mousemove", null).on("mouseup", null); }); function dragged(event) { //console.log(event); transform.lambda += event.movementX * (1 / transform.k); transform.phi -= event.movementY * (1 / transform.k); stereo.rotate([transform.lambda, transform.phi]); } } d3.select(canvas) .call(zoom) .on("mousedown.zoom", panned) .on("touchstart.zoom", panned) .on("touchmove.zoom", panned) .on("touchend.zoom", panned) .on("mousedown.zoom", panned); canvas.style.cursor = "grab"; eventBus.addEventListener("play", () => { console.log("play"); controls.play = true; controls.ffwd = false; controls.stop = false; controls.pause = false; }); eventBus.addEventListener("ffwd", () => { controls.play = false; controls.pause = false; controls.ffwd = true; controls.stop = false; }); eventBus.addEventListener("pause", () => { controls.pause = true; }); eventBus.addEventListener("stop", () => { controls.play = false; controls.ffwd = false; controls.pause = false; controls.stop = true; timeNow = new Date().getTime(); timeOffset = 0; }); const sunPositions = d3 .range(0, 360) .map((i) => SunCalc.getPosition( timeNow + timeOffset + 86400 / i, ...location.toReversed() ) ); function step(timestamp) { const pathStereographic = d3.geoPath(stereo, context); context.clearRect(0, 0, canvasWidth, canvasHeight); context.beginPath(), pathStereographic(circle), (context.lineWidth = 1.0), (context.strokeStyle = "rgba(0, 0, 0, 0.5)"), context.stroke(); if (controls.play) { timeNow = new Date().getTime(); } if (controls.ffwd) { timeOffset += 2.5e5; } const sunPosition = SunCalc.getPosition( timeNow + timeOffset, ...location.toReversed() ); const sun = d3 .geoCircle() .center([ (sunPosition.azimuth * 180) / Math.PI, (sunPosition.altitude * 180) / Math.PI ]) .radius(0.53) .precision(10)(); const sunHalo = d3 .geoCircle() .center([ (sunPosition.azimuth * 180) / Math.PI, (sunPosition.altitude * 180) / Math.PI ]) .radius(5) .precision(10)(); let skyColor = "#b3d1ff"; if (sunPosition.altitude < sunUnderHorizon) { skyColor = d3.interpolateLab( "#b3d1ff", "#001122" )(Math.min(Math.abs(sunPosition.altitude / astronomicalTwilight), 1)); } try { context.beginPath(), (context.fillStyle = skyColor), (context.globalAlpha = 0.2), pathStereographic(skyCircle), context.fill(), (context.globalAlpha = 1.0); } catch (error) { console.error(error); } context.beginPath(), (context.fillStyle = "rgba(0, 0, 0, 0.1)"), pathStereographic(horizonCircle), context.stroke(); context.lineWidth = 0.5; context.beginPath(), pathStereographic(topGraticule), (context.strokeStyle = "rgba(20, 20, 20, 0.9)"), context.stroke(); context.beginPath(), (context.fillStyle = "rgba(245, 206, 66, 0.9)"), pathStereographic(sun), context.fill(); context.beginPath(), (context.fillStyle = "rgba(245, 206, 66, 0.3)"), pathStereographic(sunHalo), context.fill(); try { context.beginPath(), (context.fillStyle = "rgba(0, 0, 0, 0.7)"), pathStereographic(horizonCircle), context.fill(); } catch (error) { console.error(error); } context.lineWidth = 0.5; context.beginPath(), pathStereographic(bottomGraticule), (context.strokeStyle = "rgba(255, 255, 255, 0.9)"), context.stroke(); // labels context.fillStyle = "black"; context.font = "normal 8px sans-serif"; const time = timeNow + timeOffset; context.textAlign = "left"; context.fillText(`${new Date(time)}`, 10, 20); context.fillText(`Location: ${formatLocation(location)}`, 10, 35); context.fillText( `Altitude: ${((sunPosition.altitude * 180) / Math.PI).toFixed(3)}°`, 10, 50 ); context.fillText( `Azimuth: ${((sunPosition.azimuth * 180 + 360 + 180) % 360).toFixed(3)}°`, 10, 65 ); context.fillText( `Diurnal phase: ${getDiurnalPhase(new Date(time), ...location)}`, 10, 80 ); context.textAlign = "center"; context.textBaseline = "middle"; const elevationCoordinates = circleOnSphere(0, 0, 91.5, 36); elevationCoordinates.forEach((d, i) => { context.save(); context.translate(...stereo(d)); const previousI = (elevationCoordinates.length + i - 1) % elevationCoordinates.length; const nextI = (elevationCoordinates.length + i + 1) % elevationCoordinates.length; const previousLabelPosition = stereo(elevationCoordinates[previousI]); const nextLabelPosition = stereo(elevationCoordinates[nextI]); const deltaX = nextLabelPosition[0] - previousLabelPosition[0]; const deltaY = nextLabelPosition[1] - previousLabelPosition[1]; const angle = Math.atan(deltaY / deltaX); let angleLabel = Math.round(d[1] / 10) * 10; context.rotate(angle); if (angleLabel >= 0) { context.fillStyle = "black"; context.fillText(`${angleLabel}°`, 0, 0); } else { context.fillStyle = "white"; context.fillText(`${angleLabel}°`, 0, 0); } if (angleLabel === 90) context.fillText(`Zenith`, 0, 20); if (angleLabel === -90) context.fillText(`Nadir`, 0, -20); context.restore(); }); const azimuthCoordinates = circleOnSphere(90, 90, 88.5, 36); azimuthCoordinates.forEach((d, i) => { context.save(); const angleLabel = Math.round((d[0] / 10) * 10 + 360 + 180) % 360; context.translate(...stereo(d)); context.fillText(`${angleLabel}°`, 0, 0); context.font = "700 9px sans-serif"; if (angleLabel === 180) { context.fillText("S", 0, -10); } else if (angleLabel === 270) { context.fillText("W", 0, -10); } else if (angleLabel === 0) { context.fillText("N", 0, -10); } else if (angleLabel === 90) { context.fillText("E", 0, -10); } context.restore(); }); requestAnimationFrame(step); } requestAnimationFrame(step); return canvas; }32:T40a,function getDiurnalPhase(date, longitude, latitude) { const sunTimes = SunCalc.getTimes(date, latitude, longitude); const time = date.getTime(); if (time < sunTimes.nightEnd.getTime()) return "night"; if (time < sunTimes.nauticalDawn.getTime()) return "astronomical-twilight"; if (time < sunTimes.dawn.getTime()) return "nautical-twilight"; if (time < sunTimes.sunrise.getTime()) return "civil-twilight"; if (time < sunTimes.sunriseEnd.getTime()) return "sunrise"; if (time < sunTimes.goldenHourEnd.getTime()) return "morning-golden-hour"; if (time < sunTimes.solarNoon.getTime()) return "morning"; if (time < sunTimes.goldenHour.getTime()) return "afternoon"; if (time < sunTimes.sunsetStart.getTime()) return "golden-hour"; if (time < sunTimes.sunset.getTime()) return "sunset"; if (time < sunTimes.dusk.getTime()) return "civil-twilight"; if (time < sunTimes.nauticalDusk.getTime()) return "nautical-twilight"; if (time < sunTimes.night.getTime()) return "astronomical-twilight"; return "night"; }33:[] 2e:{"title":"Sun Path","cells":[{"id":0,"value":"# Sun Path\nYet another sun path visualization, zoomable. The sun is surrounded by a halo, the true sun diameter is the small circle inside the halo. The azimuth is north-based. Stereographic projection.","pinned":false,"hidden":false,"mode":"md"},{"id":969,"value":"viewof location = {\n const form = html``;\n form.b.onclick = async (event) => {\n form.value = await new Promise((resolve, reject) => {\n navigator.geolocation.getCurrentPosition(\n ({ coords: { longitude, latitude } }) => {\n resolve([longitude, latitude]);\n },\n reject\n );\n form.o.value = \"Locating…\";\n });\n form.o.value = formatLocation(form.value);\n form.dispatchEvent(new CustomEvent(\"input\"));\n };\n // Somewhere in London\n form.value = [0.0, 49.32];\n\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":260,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":754,"value":"Boring stuff below...","pinned":false,"hidden":false,"mode":"md"},{"id":684,"value":"stereo = d3\n .geoStereographic()\n .scale(initialScale)\n .translate([canvasWidth / 2, canvasHeight / 2])\n .clipExtent([\n [0, 0],\n [canvasWidth, canvasHeight]\n ])\n .precision(0.1)","pinned":false,"hidden":false,"mode":"ojs"},{"id":869,"value":"initialScale = 250","pinned":true,"hidden":false,"mode":"ojs"},{"id":92,"value":"canvasHeight = {\n const height = 800;\n return height;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":94,"value":"canvasWidth = {\n const width = 800;\n return width;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":24,"value":"topGraticule = {\n const $graticule = d3\n .geoGraticule()\n .extentMinor([\n [-180, 80 + 0.001],\n [180, 0 + 0.001]\n ])\n .extentMajor([\n [-180, 90 + 0.001],\n [180, 0 + 0.001]\n ]);\n return $graticule();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1061,"value":"bottomGraticule = {\n const $graticule = d3\n .geoGraticule()\n .extentMinor([\n [-180, -80 - 0.001],\n [180, 0 + 0.001]\n ])\n .extentMajor([\n [-180, -90 + 0.001],\n [180, 0 + 0.001]\n ]);\n return $graticule();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":661,"value":"function circleOnSphere(lon0, lat0, degrees, numPoints = 100) {\n const d = (degrees * Math.PI) / 180; // Angular distance in radians\n\n const lat0Rad = (lat0 * Math.PI) / 180;\n const lon0Rad = (lon0 * Math.PI) / 180;\n\n let points = [];\n\n for (let i = 0; i < numPoints; i++) {\n const theta = (i / numPoints) * 2 * Math.PI;\n\n // Calculate latitude\n const latRad = Math.asin(\n Math.sin(lat0Rad) * Math.cos(d) +\n Math.cos(lat0Rad) * Math.sin(d) * Math.cos(theta)\n );\n\n // Calculate longitude\n const lonRad =\n lon0Rad +\n Math.atan2(\n Math.sin(theta) * Math.sin(d) * Math.cos(lat0Rad),\n Math.cos(d) - Math.sin(lat0Rad) * Math.sin(latRad)\n );\n\n // Convert back to degrees\n const lat = (latRad * 180) / Math.PI;\n const lon = (lonRad * 180) / Math.PI;\n\n points.push([lon, lat]);\n }\n\n return points;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":898,"value":"circleOnSphere(0, 0, 88, 36)","pinned":true,"hidden":false,"mode":"ojs"},{"id":148,"value":"SunCalc = require(\"suncalc\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":978,"value":"skyColors = {\n const skyColors = {\n night: \"#000033\",\n \"astronomical twilight\": \"#0B1445\",\n \"nautical twilight\": \"#1A237E\",\n \"civil twilight\": \"#37488E\",\n dawn: \"#576DA0\",\n sunrise: \"#FF8C00\",\n sunriseEnd: \"#FFA500\",\n \"morning golden hour\": \"#FFD700\",\n day: \"#b3d1ff\",\n \"afternoon golden hour\": \"#FFCC33\",\n evening: \"#FF9966\",\n sunset: \"#FF4500\",\n \"civil twilight (evening)\": \"#DD6677\",\n \"nautical twilight (evening)\": \"#552266\",\n \"astronomical twilight (evening)\": \"#220033\"\n };\n return skyColors;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":967,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":676,"value":"eventBus = new EventTarget()","pinned":true,"hidden":false,"mode":"ojs"},{"id":925,"value":"sunPosition = SunCalc.getPosition(new Date(), 51.5, -0.1)","pinned":true,"hidden":false,"mode":"ojs"},{"id":930,"value":"(sunPosition.azimuth * 180) / Math.PI","pinned":true,"hidden":false,"mode":"ojs"},{"id":971,"value":"formatLocation = ([x, y]) =>\n [\n `${Math.abs(y).toFixed(4)}°${y > 0 ? \"N\" : \"S\"}`,\n `${Math.abs(x).toFixed(4)}°${x > 0 ? \"E\" : \"W\"}`\n ].join(\", \")","pinned":false,"hidden":false,"mode":"ojs"},{"id":987,"value":"astronomicalTwilight = -(15 * Math.PI) / 180","pinned":true,"hidden":false,"mode":"ojs"},{"id":994,"value":"sunUnderHorizon = (-0.53 * Math.PI) / 180","pinned":true,"hidden":false,"mode":"ojs"},{"id":1052,"value":"d3.range(24).map((d) => ({\n ...SunCalc.getTimes(\n new Date(Date.now() + d * 3600e3),\n ...location.toReversed()\n ),\n t: new Date(Date.now() + d * 3600e3)\n}))","pinned":true,"hidden":false,"mode":"ojs"},{"id":1054,"value":"Date.now()","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}