${JSON.stringify(item)}

31:T7c8,dayCalcs = days.map((d) => { const noon = d3.timeHour.offset(d, 12) const sunTimes = suncalc.getTimes(noon, lat, long) const dayLength = (new Date(sunTimes.sunset) - new Date(sunTimes.sunrise)) const daylightPercent = dayLength / (24 * 60 * 60 * 1000) const radianTimeSunrise = (sunTimes.sunrise - d) / (24 * 60 * 60 * 1000) * Math.PI * 2 const radianTimeSunset = (sunTimes.sunset - d) / (24 * 60 * 60 * 1000) * Math.PI * 2 const timeSunrise = sunTimes.sunrise.toLocaleTimeString('en-US', { hour: 'numeric', minute: '2-digit', hour12: true }) const timeSunset = sunTimes.sunset.toLocaleTimeString('en-US', { hour: 'numeric', minute: '2-digit', hour12: true }) const illum = suncalc.getMoonIllumination(noon) const moonTimes = suncalc.getMoonTimes(noon, lat, long) const moonPos = suncalc.getMoonPosition(noon, lat, long) const sunPos = suncalc.getPosition(noon, lat, long) const relativeTide = (Math.cos(illum.phase * 4 * Math.PI) + 1) / 2 const lunarISO = d.toLocaleString('sv-SE', { year: 'numeric', month: 'numeric', day: 'numeric', calendar: 'chinese' }) const lunarMMDD = lunarISO.split('-').slice(1).map((part) => (part.replace(/^0/g, ''))).join('-') const phenoms = phenomDays.filter((item) => (item.date * 1 === noon * 1)) return { day: d, noon, labels: { quarter: `${year}-Q${Math.floor((noon.getMonth() + 3) / 3)}`, month: `${year}-M${((noon.getMonth()+1) + '').padStart(2, '0')}`, week: `${year}-W${((weeks.findIndex((weekStart) => (weekStart > noon)) - 1) + '').padStart(2, '0')}`, }, sun: { times: sunTimes, pos: sunPos, length: dayLength, percent: daylightPercent, radianTimeSunrise, radianTimeSunset, timeSunrise, timeSunset, }, moon: { illum, times: moonTimes, pos: moonPos, relativeTide, iso: lunarISO, mmdd: lunarMMDD, }, phenoms, } })32:Td80,renderChart = (groupItems) => { const groupHeight = [...(new Set(groupItems.map((item) => (item.labels.week))))].length * weekdayRadius * 4 return html`` }33:[] 2f:{"title":"Phases of the Moon","cells":[{"id":988,"value":"md`# Phases of the Moon\n\nFor the year ${year} at ${lat}, ${long}, some styling inspired by [Irwin Glusker](https://www.moma.org/explore/inside_out/2012/10/16/a-paean-to-the-phases-of-the-moon/), forked to include \"tidal\" approximation, sunrise / sunset, color-scaling for season, and lunar dates. Meant to be printed in quarters on landscape letter to make a bookmark for nature journaling. Inspired by [Cycal](https://naturescalendar.com/).`","pinned":false,"hidden":false,"mode":"ojs"},{"id":977,"value":"chart = renderChart(dayCalcs)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1201,"value":"q1Chart = {\n const quarterCalcs = Object.entries(groupedDayCalcs)[0][1]\n return renderChart(quarterCalcs)\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1222,"value":"q2Chart = {\n const quarterCalcs = Object.entries(groupedDayCalcs)[1][1]\n return renderChart(quarterCalcs)\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1224,"value":"q3Chart = {\n const quarterCalcs = Object.entries(groupedDayCalcs)[2][1]\n return renderChart(quarterCalcs)\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1229,"value":"q4Chart = {\n const quarterCalcs = Object.entries(groupedDayCalcs)[3][1]\n return renderChart(quarterCalcs)\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1245,"value":"m01Chart = {\n const monthCalcs = Object.entries(groupedByMonthCalcs)[0][1]\n return renderChart(monthCalcs)\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1249,"value":"m02Chart = {\n const monthCalcs = Object.entries(groupedByMonthCalcs)[1][1]\n return renderChart(monthCalcs)\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1252,"value":"m03Chart = {\n const monthCalcs = Object.entries(groupedByMonthCalcs)[2][1]\n return renderChart(monthCalcs)\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1271,"value":"m04Chart = {\n const monthCalcs = Object.entries(groupedByMonthCalcs)[3][1]\n return renderChart(monthCalcs)\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1254,"value":"m05Chart = {\n const monthCalcs = Object.entries(groupedByMonthCalcs)[4][1]\n return renderChart(monthCalcs)\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1257,"value":"m06Chart = {\n const monthCalcs = Object.entries(groupedByMonthCalcs)[5][1]\n return renderChart(monthCalcs)\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1259,"value":"m07Chart = {\n const monthCalcs = Object.entries(groupedByMonthCalcs)[6][1]\n return renderChart(monthCalcs)\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1261,"value":"m08Chart = {\n const monthCalcs = Object.entries(groupedByMonthCalcs)[7][1]\n return renderChart(monthCalcs)\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1263,"value":"m09Chart = {\n const monthCalcs = Object.entries(groupedByMonthCalcs)[8][1]\n return renderChart(monthCalcs)\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1265,"value":"m10Chart = {\n const monthCalcs = Object.entries(groupedByMonthCalcs)[9][1]\n return renderChart(monthCalcs)\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1267,"value":"m11Chart = {\n const monthCalcs = Object.entries(groupedByMonthCalcs)[10][1]\n return renderChart(monthCalcs)\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1269,"value":"m12Chart = {\n const monthCalcs = Object.entries(groupedByMonthCalcs)[11][1]\n return renderChart(monthCalcs)\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":78,"value":"viewof year = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":950,"value":"viewof lat = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":955,"value":"viewof long = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":418,"value":"viewof locale = {\n const form = md``;\n form.input.oninput = event => {\n if (form.input.value) {\n try { (new Date).toLocaleString(form.input.value); }\n catch (error) { return event.stopImmediatePropagation(); }\n }\n form.value = form.input.value || undefined;\n form.dispatchEvent(new CustomEvent(\"input\"));\n };\n form.onsubmit = event => event.preventDefault();\n form.value = Promise.resolve();\n return form; \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":435,"value":"md`---\n\n## Appendix`","pinned":false,"hidden":false,"mode":"ojs"},{"id":140,"value":"projection = d3.geoOrthographic()\n .translate([0, 0])\n .scale(weekdayRadius)","pinned":true,"hidden":false,"mode":"ojs"},{"id":145,"value":"path = d3.geoPath(projection)","pinned":true,"hidden":false,"mode":"ojs"},{"id":142,"value":"hemisphere = d3.geoCircle()()","pinned":true,"hidden":false,"mode":"ojs"},{"id":593,"value":"seasonScale = {\n return d => {\n const seasonRange = seasonRanges.find((item) => (item.range.start < d && d <= item.range.end))\n const fromSeasonStart = d - seasonRange.range.start\n const seasonProgress = fromSeasonStart / seasonRange.range.duration\n\n const scaledValue = seasonRange.scaledRange.start + ( seasonProgress * (seasonRange.scaledRange.end - seasonRange.scaledRange.start) )\n return scaledValue\n }\n // 0 -> winter, 0.25 -> fall, 0.5 -> summer, 0.75 -> spring, 1 -> winter\n // 1 -> winter, 0.75 -> spring, 0.5 -> summer, 0.25 -> fall, 0 -> winter\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":689,"value":"seasonColorScale = {\n const colorScale = d3.scaleSequential(d3.interpolateRainbow)\n return d => colorScale(seasonScale(d))\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":23,"value":"dayScale = {\n const scale = d3.scalePoint()\n .domain(d3.range(1, 40))\n .range([margin.left, width - margin.right])\n .padding(1);\n return d => {\n const start = d3.timeMonth(d);\n const offset = start.getDay() || 7;\n return scale(d.getDate() + offset);\n };\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":763,"value":"weekdayScale = {\n const scale = d3.scalePoint()\n .domain(d3.range(1, 8))\n .range([margin.left, width - margin.right])\n .padding(0.5);\n return d => {\n const offset = d.getDay() || 7;\n return scale(offset)\n };\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":794,"value":"weekdayRadius = (weekdayScale(new Date(year, 0, 2)) - weekdayScale(new Date(year, 0, 1))) / 2 * 0.7","pinned":true,"hidden":false,"mode":"ojs"},{"id":1178,"value":"weeks = d3.timeMonday.range(d3.timeMonday.floor(new Date(year, 0, 1)), d3.timeMonday.ceil(new Date(year * 1 + 1, 0, 11)))","pinned":true,"hidden":false,"mode":"ojs"},{"id":766,"value":"weekScale = { \n const scale = d3.scalePoint()\n .domain(d3.range(0, weeks.length - 1))\n .range([margin.top, height - margin.bottom])\n .padding(0.5);\n \n return (d, dStart) => scale(weeks.findIndex((weekStart) => (weekStart > d)) - weeks.findIndex((weekStart) => (weekStart > dStart)))\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":36,"value":"monthScale = {\n const scale = d3.scalePoint()\n .domain(d3.range(12))\n .range([margin.top, height - margin.bottom])\n .padding(1);\n return d => scale(d.getMonth());\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":10,"value":"days = {\n const now = new Date(year, 0, 1);\n const start = d3.timeYear(now);\n return d3.timeDays(start, d3.timeYear.offset(start, 1));\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":629,"value":"phenomDays = (await Promise.all(\n [`${year - 1}`, year, `${year + 1}`].\n map(\n (currentYear) => d3.json(`https://aa.usno.navy.mil/api/seasons?year=${currentYear}&tz=-6&dst=true`)\n )\n ))\n .reduce((all, current) => ([...all, ...current.data]), [])\n .map((day) => ({\n ...day,\n date: new Date(day.year, day.month - 1, day.day, 12),\n }))","pinned":true,"hidden":false,"mode":"ojs"},{"id":1276,"value":"seasonDays = phenomDays\n .filter(({phenom}) => (['Equinox', 'Solstice'].includes(phenom)))","pinned":true,"hidden":false,"mode":"ojs"},{"id":653,"value":"seasonRanges = seasonDays\n .map((day, index, input) => ({\n season: ['spring', 'summer', 'fall', 'winter'][index % 4],\n phenoms: [day, input[index + 1]],\n }))\n .filter((item) => (item.phenoms[1]))\n .map((item) => ({\n ...item,\n range: {\n start: item.phenoms[0].date,\n end: item.phenoms[1].date,\n duration: (item.phenoms[1].date - item.phenoms[0].date),\n },\n scaledRange: {\n ...{\n spring: {start: 0.75, end: 0.5},\n summer: {start: 0.5, end: 0.25},\n fall: {start: 0.25, end: 0},\n winter: {start: 1, end: 0.75},\n }[item.season],\n }\n }))","pinned":true,"hidden":false,"mode":"ojs"},{"id":712,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":1182,"value":"groupedDayCalcs = Object.groupBy(dayCalcs, (item) => (item.labels.quarter))","pinned":true,"hidden":false,"mode":"ojs"},{"id":1243,"value":"groupedByMonthCalcs = Object.groupBy(dayCalcs, (item) => (item.labels.month))","pinned":true,"hidden":false,"mode":"ojs"},{"id":1210,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"},{"id":717,"value":"daylightRange = [Math.min(...dayCalcs.map((len) => (len.sun.percent))), Math.max(...dayCalcs.map((len) => (len.sun.percent)))]","pinned":true,"hidden":false,"mode":"ojs"},{"id":719,"value":"scaleDaylight = {\n const scale = d3.scaleLinear(daylightRange, [0, 1])\n return d => (scale(dayCalcs.find((item) => (item.day === d)).sun.percent))\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":352,"value":"months = {\n const now = new Date(year, 0, 1);\n const start = d3.timeYear(now);\n return d3.timeMonths(start, d3.timeYear.offset(start, 1));\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":16,"value":"width = 420","pinned":true,"hidden":false,"mode":"ojs"},{"id":18,"value":"height = (weekdayRadius * 4) * 52","pinned":true,"hidden":false,"mode":"ojs"},{"id":804,"value":"fontSize = 12","pinned":true,"hidden":false,"mode":"ojs"},{"id":347,"value":"margin = ({top: 10, right: 0, bottom: 0, left: 0})","pinned":true,"hidden":false,"mode":"ojs"},{"id":125,"value":"suncalc = require(\"suncalc@1\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":13,"value":"d3 = require(\"d3@6\")","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}