31:Ta4a,{ const context = DOM.context2d(canvasWidth, canvasHeight); const cos = (angle) => Math.cos((Math.PI * angle) / 180); const sin = (angle) => Math.sin((Math.PI * angle) / 180); const center = { x: canvasWidth / 2, y: canvasHeight / 2 }; const centerOffsetRadius = 45; context.clearRect(0, 0, canvasWidth, canvasHeight); const radius = canvasWidth / 2; const dayLength = radius - centerOffsetRadius; const nightColor = "rgba(20, 40, 255, 0.6)"; const dayColor = "yellow"; context.lineWidth = 1.5; sunData.forEach((d, i) => { const cosI = cos((i * 360) / 365); const sinI = sin((i * 360) / 365); const offset = { x: cosI * centerOffsetRadius, y: sinI * centerOffsetRadius }; const beforeSunriseFraction = ((86400e3 + sunData.meanSolarMidnight + d.sunrise.getTime()) % 86400e3) / 86400e3; const beforeSunsetFraction = ((86400e3 + sunData.meanSolarMidnight + d.sunset.getTime()) % 86400e3) / 86400e3; // Start with nighttime after midnight context.beginPath(), context.moveTo(center.x + offset.x, center.y + offset.y), (context.strokeStyle = colorScheme[colorSchemeName].nightBeforeMidnight), context.lineTo( center.x + offset.x + cosI * dayLength * beforeSunriseFraction, center.y + offset.y + sinI * dayLength * beforeSunriseFraction ), context.stroke(); // Now let's draw the daylight context.beginPath(), context.moveTo( center.x + offset.x + cosI * dayLength * beforeSunriseFraction, center.y + offset.y + sinI * dayLength * beforeSunriseFraction ), (context.strokeStyle = colorScheme[colorSchemeName].daylight), context.lineTo( center.x + offset.x + cosI * dayLength * beforeSunsetFraction, center.y + offset.y + sinI * dayLength * beforeSunsetFraction ), context.stroke(); // Finally let's draw the night before midnight context.beginPath(), context.moveTo( center.x + offset.x + cosI * dayLength * beforeSunsetFraction, center.y + offset.y + sinI * dayLength * beforeSunsetFraction ), (context.strokeStyle = colorScheme[colorSchemeName].nightAfterMidnight), context.lineTo(center.x + cosI * radius, center.y + sinI * radius), context.stroke(); }); yield html`

${context.canvas}

${placeName}

${formatLocation(location)}

`; }32:[] 2f:{"title":"Day Duration Polar Chart","cells":[{"id":0,"value":"# Day Duration Polar Chart","pinned":false,"hidden":false,"mode":"md"},{"id":114,"value":"Attempt to reproduce this lovely day duration visualisation by Joanie Lemercier from this [tweet](https://x.com/JoanieLemercier/status/1886918033869779306):\n\n\"A line is a day\nBlue is night\nYellow is sun light.\"","pinned":false,"hidden":false,"mode":"md"},{"id":68,"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":242,"value":"viewof colorSchemeName = Inputs.radio([\"original\", \"nazar\"], {\n value: \"original\",\n label: \"Palette\",\n format: (d) => colorSchemeLabels[d]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":146,"value":"**Note**: the year starts from the right side and goes counter-clockwise\n(like on unit trigonometric circle). It will only work properly in regions with real sunrises and reals sunsets all year round (outside polar circle).","pinned":false,"hidden":false,"mode":"md"},{"id":238,"value":"colorScheme = {\n return {\n original: {\n nightBeforeMidnight: \"rgba(20, 40, 255, 0.6)\",\n daylight: \"yellow\",\n nightAfterMidnight: \"rgba(20, 40, 255, 0.6)\"\n },\n nazar: {\n nightBeforeMidnight: \"#69b8ea\",\n daylight: \"white\",\n nightAfterMidnight: \"#12278b\"\n }\n };\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":255,"value":"colorSchemeLabels = {\n return {\n original: \"Original (Lemercier)\",\n nazar: \"Nazar (نظر - Mediterranean bead eye)\"\n };\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":6,"value":"canvasWidth = 600","pinned":true,"hidden":false,"mode":"ojs"},{"id":8,"value":"canvasHeight = 600","pinned":true,"hidden":false,"mode":"ojs"},{"id":10,"value":"sunData = {\n const start = new Date(new Date(\"2025-01-01T00:00:00Z\").getTime());\n const sunData = d3\n .range(0, 365)\n .map((i) =>\n SunCalc.getTimes(\n new Date(start.getTime() + i * 86400e3),\n ...location.toReversed()\n )\n );\n const meanSolarNoon = sunData.reduce(\n (acc, current) =>\n acc + (current.solarNoon.getTime() % 86400e3) / 86400e3 / 365,\n 0\n );\n const meanSolarMidnight = (0.5 - meanSolarNoon) * 86400e3;\n Object.assign(sunData, { meanSolarNoon, meanSolarMidnight });\n return sunData;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":102,"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":12,"value":"SunCalc = require(\"suncalc@1.9.0\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":208,"value":"reverseGeocoding = (lon, lat) => {\n return fetch(\n `https://nominatim.openstreetmap.org/reverse?format=json&lat=${lat}&lon=${lon}`,\n { referrer: \"https://observablehq.com/@pierreleripoll/geocoding-nominatim\" }\n )\n .then((res) => {\n if (res.ok && res.json) {\n return res.json();\n } else {\n return {\n error: `Address not found for lat=${lat} & lon=${lon}`\n };\n }\n })\n .catch((err) => {\n return { error: err };\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":213,"value":"placeName = place?.address?.village ||\n place?.address?.municipality ||\n place?.address?.town ||\n place?.address?.city ||\n \"\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":211,"value":"place = reverseGeocoding(...location)","pinned":true,"hidden":false,"mode":"ojs"},{"id":124,"value":"htl.html``","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}