SVG fundamentals

100%

SVG fundamentals

✓ Published1🌍 Public

Last edited May 20, 2024

Created on Mar 25, 2024

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.

AI-generated description

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

Similar vizzes

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

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

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

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

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

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

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

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

79% match