Moon PLOT

100%

✓ Published0🌍 Public

Last edited Feb 25, 2021

Created on Feb 22, 2021

The Moon PLOT visualization arranges text labels for drink categories and consumption contexts in a circular layout, resembling a moon with orbiting text. Drink names vary in font size according to their proportional values, while context labels are placed at fixed radial positions. Built with D3 v6, the SVG renders text elements positioned using trigonometric calculations and rotated along the circle, with a linear scale mapping data values to font sizes and displacement.

AI-generated description

A demonstration of how to start using D3 version 6.

MIT Licensed

Similar vizzes

Loading thumbnail…

Moon

A circular moon rendered in black and white rotates across the screen, with a dark cratered sphere against a pitch-black background. The visualization uses D3 v4’s `d3.geoOrthographic` projection and `d3.geoPath` to draw the moon as a geographic circle, while `d3.timer` drives an animation that shifts the circle’s center over time, simulating rotation. Two SVG paths—one for the moon’s body and one for its background—are updated each frame. The code defines no external data source, instead generating the shape procedurally with `d3.geoCircle`.

CCurran Kelleher

70% match

Loading thumbnail…

Untitled

A lunar phase calendar displays each day of 2023 as a small orthographic moon, arranged by day along the x-axis and month along the y-axis. The SVG chart uses d3.geoCircle and d3.geoOrthographic projections within d3.geoPath to render moon phases from a computed lunar period. It includes axes via d3.axisLeft, d3.axisTop, and d3.axisBottom, with scales from d3.scaleLinear and d3.scalePoint. Clicking the SVG triggers a red animated pulse, expanding via a .transition().duration().attr() chain to highlight the current day's position.

HHéctor del Castillo

67% 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

67% 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

66% match

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

65% 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

65% match

Loading thumbnail…

Moon Calendar 2022 - a bit off.

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.

Zzach b.

64% 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

64% match