Skip to main content
SimilarExport ZIP
100%

Fork of yearwheel b4 fullcricle

✓ Published1🌍 Public
LLiml
Last edited Aug 27, 2024
Created on Jun 12, 2024

A circular "year wheel" visualization displays a calendar year as concentric rings, with each month divided into a grid of day cells. Colored segments represent events from a hardcoded dataset, including meetings, holidays, and seasonal periods, while quarter and month labels provide temporal context. The visualization is built with D3 v4 and React, using SVG shapes and animations to render the wheel. Users can switch between purple, red, and blue color schemes via radio buttons, which dynamically update the event and background fills.

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

Fork of yearwheel b4 360 degreefix

This interactive year-wheel visualization displays a full calendar year of events arranged in a circular, radial layout, with each day plotted as a sector around the wheel. Events are shown as colored markers, grouped by month, quarter, and category, with hover states that highlight individual items. The visualization is built using React and D3 v4, leveraging D3's SVG rendering and animation capabilities. It encodes dates using JavaScript Date functions, including leap-year and day-of-year calculations, to position each data point on the 360-degree wheel.

LLiml
93% 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
92% 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
92% match
Loading thumbnail…

Fork of yearwheel b4 adding zoom

A radial year-wheel calendar displays twelve months as concentric arcs around a central donut, with events positioned along date-specific tracks. The visualization renders a full year of human-resource deadlines, meetings, and holidays using hardcoded sample data. D3 v5 calculates day-of-year positions, maps event dates to polar coordinates, and draws SVG paths for month segments, week bands, and event rects. Hover interactions trigger tooltips showing event details, while color-coded fills distinguish quarterly and monthly regions.

LLiml
91% match
Loading thumbnail…

Fork of Fork of yearwheel with occupiedcheck

This visualization presents a yearly calendar as a radial wheel, with events displayed as colored arcs around the circle for each month. D3.js v4 handles the SVG rendering, converting day-of-year values into angular positions and drawing event arcs alongside month and quarter labels. The code includes an occupancy-checking mechanism that uses a matrix to track and avoid overlapping events across multiple rows. React provides the framework integration, while CSS controls the visual styling for event highlights and color-coded month segments.

LLiml
90% match