Skip to main content
SimilarExport ZIP
100%

Moon Calendar 2022 - a bit off.

✓ Published0🌍 Public
Zzach b.
Last edited Nov 27, 2025
Created on Mar 23, 2021
Forked from Moon Calendar 2024

A lunar calendar for 2026 displays each day as a small moon phase, arranged by month on a grid, with a red circle animating to highlight today’s date on click. Phases are computed from a reference new moon using a fixed lunar period and mapped via `d3.geoOrthographic` and `d3.geoPath`. The visualization uses `d3.timeDays` for daily data, `d3.scalePoint` for months, and D3 transitions for the click interaction.

AI-generated description

a bit off. close enough for hippies, but not witches.

forked from Moon Calendar 2020 which is based on Moon Phase Calculators.

click anywhere to circle today's date.

calculates based on a known new moon date of 1970-01-07+20:35.

uses a lunarPeriod of 2551443000 milliseconds
wich is 29.530590278 days;
or 29 days 12 hours 44 minutes 3 seconds.

wikipedia suggests slightly different numbers but it seems to work pretty good.
2021, at least, visually checks out against a quick look at this calendar.

upon closer inspection, it is off.
the last full moon of the year is 2021-12-18+21:37:58. But this calcs it to be the 20th.
the first is 2021-01-28+12:18:35. But this calcs it to be the 29th.
most seem to be a day or two behind.

setting the "known new moon" to the last of 2020 tightened it up but it's still off.

two issues: the "now date" is calced from 00:00, morning_of, not night_of
and the lunar interval might be a little long?

MIT Licensed

Similar vizzes

Loading thumbnail…

Moon Calendar 2022

A grid of small moon icons displays the lunar phase for every day of 2022, with months arranged along the y-axis and days along the x-axis. Each icon uses an orthographic projection with `d3.geoPath` and `d3.geoCircle` to render the illuminated portion based on a “Simple” phase calculation. Clicking anywhere on the chart animates a red ring around the current day’s moon via an SVG transition. The visualization is built with D3 v5, uses SVG for rendering, and derives its phase values from a fixed reference new moon timestamp.

CCurran Kelleher
90% match
Loading thumbnail…

Moon Calendar 2020

The Moon Calendar 2020 displays the moon’s phase for every day of the year in a grid, with months on the y-axis and days on the x-axis. Each moon is rendered as an orthographic projection of a circle using `d3.geoPath` and `d3.geoOrthographic`, with phase computed from a simple lunar-cycle formula. Clicking anywhere highlights the current day’s moon with a fading red ring, animated via `transition`. The visualization uses `d3.scaleLinear` for days, `d3.scalePoint` for months, and `d3.timeDays` to generate the date sequence.

AAjayyy
89% match
Loading thumbnail…

Moon Calendar 2022

The Moon Calendar 2022 is an annual grid of moons, one per day, arranged by month (rows) and day (columns). Each cell displays the moon’s phase as a small orthographic projection of a sphere, with the lit portion rendered in light gray against a dark background. The phase is calculated using the “Simple” lunar-period formula from ben-daglish.net, given a reference new moon in 1970. The visualization uses `d3.timeDays` to generate daily data, `d3.geoPath` with a `d3.geoOrthographic` projection to draw each moon, and `d3.axisLeft`/`d3.axisTop`/`d3.axisBottom` for axes. Clicking the SVG triggers an animated expanding red ring around the current day’s moon via `transition().duration()`.

Rrhona-o'neill
89% match
Loading thumbnail…

Moon Calendar 2024

The Moon Calendar 2025 renders each day of the year as a small orthographic projection of the Moon’s phase using d3.geoPath and d3.geoOrthographic. Days are arranged in a grid by month along the y-axis and day of month on the x-axis, with axes labeled via d3.axisTop and d3.axisBottom. The phase is computed from a simple lunar period formula using timestamps. Clicking any point triggers a red expanding circle animation via transition, highlighting today’s position.

CCurran Kelleher
89% match
Loading thumbnail…

Moon Calendar 2020

This visualization presents a year-long moon calendar for 2020, showing each day’s lunar phase as a small orthographic projection of the moon arranged by month and day. User clicks trigger an animated red ring that expands and fades around the current day’s moon. The code uses D3 v5 with SVG, `d3.geoPath` and `d3.geoOrthographic` for rendering, and computes phases from a simple formula based on a fixed new moon reference time. Axis labels are generated with `d3.axisLeft` and `d3.axisTop`.

IInnan Yuan
88% match
Loading thumbnail…

Fork of Moon Calendar 2022

This visualization displays a full year of moon phases as a calendar grid, with months on the y-axis and days on the x-axis. Each day renders a small moon using d3.geoPath and d3.geoOrthographic, with phase computed from a simple lunar period calculation based on a 1970 reference new moon. A click on the visualization adds a red pulsing ring around the current day’s moon via a transition. The code uses d3.timeDays and d3.axis scales to layout the calendar, with SVG animation for the highlighting effect.

Ppkdvalis
86% match
Loading thumbnail…

Moon Calendar 2017

A 2017 moon calendar renders each day as a small orthographic projection of the Moon, showing its phase across the year in a grid of months and days. Clicking the visualization highlights the current day with an animated red ring. Built with D3 v4, it uses `d3.geoPath` and `d3.geoOrthographic` to draw each moon, with phase angles calculated from a lunar period formula derived from a known new moon epoch. The SVG output is organized using `d3.scaleLinear` and `d3.scalePoint` for axes, and dates are generated via `d3.timeDays`.

CCurran Kelleher
85% match
Loading thumbnail…

Fork of Moon Calendar 2022

This visualization displays the moon’s phase for every day of the year 2022 in a calendar grid, with months on the y-axis and days on the x-axis. Each moon glyph is drawn using `d3.geoOrthographic` and `d3.geoPath` to project a circle based on the phase angle, calculated from a simple lunar period formula. The SVG renders a dark circle with a light path overlay to represent the illuminated portion. Clicking the graphic triggers an animated red ring that expands and fades to highlight the current day.

MMuhriddinMahmudjonovich
85% match