Skip to main content
SimilarExport ZIP
100%

Fork of Fork of Fork Circular calendar

✓ Published0🌍 Public
LLiml
Last edited Apr 25, 2024
Created on Apr 14, 2024

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.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

See also React Starter.

MIT Licensed

Similar vizzes

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
97% 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
94% 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
87% match
Loading thumbnail…

Fork of Fork of yearwheel b4 animation

This radial calendar visualization, built with React and D3 v4, displays a year of events and seasons arranged in a circular wheel. The example maps categorized events (like meetings and festivals) to colored arcs and segments, with each month and quarter rendered as layered donut slices. The code uses D3’s SVG rendering and animation capabilities to draw the wheel, mapping event dates to angular positions. Data is hardcoded as JavaScript arrays, with CSS styling controlling the visual fill colors and hover effects for interactive tooltips. The visualization also includes a static year view without interactive animation, making it a static SVG layout.

LLiml
86% match
Loading thumbnail…

Fork of Fork of yearwheel b4 occupiedcheck

This visualization presents a full year of events on a circular "year wheel," with each month and quarter arranged radially. It uses SVG rendering in React with D3 v4, employing date-based computations like `Date.prototype.getDOY` to convert calendar dates into angular positions. Event bars and shaded time spans are placed along the wheel’s rings using custom path drawing with trigonometric functions, while hover effects and colored categories make event types distinguishable.

LLiml
86% match
Loading thumbnail…

Fork of Fork of yearwheel b4 overflowcheck

This visualization presents a year-long calendar as a multi-ring wheel, with each concentric ring representing a month and color-coded sectors for quarters. Events from the provided dataset are plotted as arcs along the wheel, with tooltips showing details on hover. Built with D3 v4 and React, it uses SVG paths and `Date.prototype.getDOY` to convert dates into angular positions, while CSS classes style the different calendar segments.

LLiml
86% match
Loading thumbnail…

Fork of yearwheel b4 occupiedcheck

This example presents a circular year-wheel visualization of calendar events, where a single labeled event ("APT avd-A") spans from January to July 2024. The wheel is divided into twelve month segments, each colored distinctly, with event arcs rendered as SVG paths using D3 v4’s arc generator and degree-to-radian conversions. The code computes the day of year via custom Date prototype methods and positions month and event labels spatially around the wheel. Hover interactions highlight event arcs by increasing stroke width and reducing opacity, while the layout is generated through D3 selections within a React-compatible HTML page.

LLiml
84% 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
84% match