circular calendar

100%

circular calendar

✓ Published0🌍 Public

Last edited Jun 24, 2019

Created on Jun 24, 2019

This circular calendar visualizes a year of events as concentric rings, with each month occupying a colored arc segment and individual days marked along the circumference. Event markers, color-coded by project (DS, N, S, special), appear as highlighted points on their corresponding dates. The visualization is built with D3 v4, using SVG paths and arcs generated via `d3.arc()` with computed start and end angles derived from each day-of-year. The code also defines custom arc segments for months and spring/summer/autumn color schemes, with a large “middle” text element at the center.

AI-generated description

Built with blockbuilder.org

forked from <a href='http://bl.ocks.org/GitNoise/'>GitNoise</a>'s block: <a href='http://bl.ocks.org/GitNoise/2e40f3fac95d07e385e357f8e8685f24'>circular calendar</a>

mit Licensed

Similar vizzes

Loading thumbnail…

circular calendar

A circular calendar visualization arranges the days of the year as concentric arcs, with each month represented by a colored ring segment and individual day cells marked within. The example plots specific project dates—marked with distinct colors and symbols—onto this radial timeline, while the current day is highlighted as a special point. Built with D3 v4, the code uses `d3.arc` to draw the arcs, `Date.prototype.getDOY` to compute day-of-year angles, and SVG paths for rendering. The underlying data is a small hardcoded array of date–project pairs.

TThanaporn-sk

95% match

Loading thumbnail…

circular calendar

This circular calendar visualizes a year as a ring of colored arcs, with each month shaded by season and individual days marked as small strokes. The visualization plots specific project dates (labeled DS, N, S, and special) as points on the ring, using a custom degree conversion from day-of-year. Built with D3 v4 and SVG, the code draws concentric arc segments via `d3.arc()`, positions them with trigonometric calculations, and applies CSS classes to color months, weeks, and days.

PPatrick Wojda

94% match

Loading thumbnail…

Fork of Fork of Fork Circular calendar

A circular calendar displays a full year of events as colored arcs arranged in concentric rings, with each ring representing a month and event labels positioned along the outer edge. The visualization uses d3.arc to draw the arcs, d3.select to manage the SVG, and custom date prototype methods to calculate day-of-year values that map to angular positions. Event data is defined in a JavaScript array with start and end dates, while CSS classes control the color scheme for each month and event type. The layout also includes hover effects on event arcs to highlight interactions.

LLiml

85% match

Loading thumbnail…

Fork Circular calendar

This radial "fork" calendar arranges a full year of days along the circumference of a circle, with months (and quarters) drawn as concentric colored arc segments. Events are encoded as thicker, prominent arcs positioned by their start and end dates, using `d3.arc()` with angles computed from the day of the year. The visualization is rendered as an SVG in a React app with D3 v4, with month and quarter bands colored distinctly and event arcs highlighted. The circular layout supports at-a-glance comparison of seasonal and quarterly spans, and the minimal code example includes commented-out event data for customization.

LLiml

83% match

Loading thumbnail…

SVG fundamentals

A circular calendar visualization maps events across a year using SVG arcs. The chart displays quarterly color bands and overlaid event markers, with special styling for specific projects. Data includes dates and project names rendered as colored segments. The implementation uses D3 v4's arc generator to create ring sections, with custom date utilities calculating day-of-year positions and converting them to angular coordinates in radians.

LLiml

83% match

Loading thumbnail…

Fork of Fork Circular calendar

A circular calendar visualization renders a full year as a ring, with months divided into colored arcs and text labels positioned around the outer edge. Events from a hardcoded array appear as blue annular bands spanning their start and end dates, using d3.arc to compute the radial segments. The code calculates day-of-year with custom Date prototype methods and maps those to angles via doyToDegrees, while d3 v4 selects the SVG container and appends paths. CSS classes control styling for months, quarters, and interactive hover effects on specific arcs.

LLiml

82% match

Loading thumbnail…

YearCalendar

This visualization renders a year as a circular wheel, with the months and quarters of 2024 positioned around the circumference. Events such as employee meetings and holidays are placed as arcs at their corresponding dates. The visualization is built with D3 v5 and renders to SVG. It imports configuration and helper modules for date-to-angle conversion, and loads event data from a mock JSON service, with support for sorting events by text length.

LLiml

80% match

Loading thumbnail…

Fork of yearwheel b4 eventcheck

This circular visualization of a one-year calendar displays individual events, months, and quarters as separate rings or bands, with the colored arcs representing scheduled activities and the varying shades of blue delineating month boundaries. The code uses D3 v4 to handle date calculations, such as converting dates to the day of the year and checking for leap years, and then maps those values to angular positions on the wheel. SVG rendering and CSS styling are used to draw the rings, event markers, and labels, while a hover interaction reveals a tooltip with event details.

LLiml

78% match