Skip to main content
SimilarExport ZIP
100%

circular calendar

✓ Published0🌍 Public
PPatrick Wojda
Last edited Mar 20, 2019
Created on Apr 6, 2017

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.

AI-generated description

Built with blockbuilder.org

mit Licensed

Similar vizzes

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
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…

Circular hours per week

This example visualizes multiple weeks of hourly data as concentric circular rings, with each ring representing one week and each segment an hour colored by intensity (daylight hours in yellow, nighttime in blue). The code uses D3.js to generate arc paths via `d3.svg.arc`, mapping random intensity values to color and opacity scales, and includes interactive overlay arcs that highlight an hour on mouseover. The visualization is rendered in SVG with an animated transition, based on a gist by GitNoise built with blockbuilder.org.

PPatrick Wojda
79% match
Loading thumbnail…

Circular Layout (Arc)

A circular layout of concentric arcs radiates outward from a central point, with each arc’s color shifting from brown to steel blue as its radius increases. The visualization encodes two linear scales—one mapping radius size and another mapping fill color—onto a grid of 180 rotated groups. Built with D3 v3, the code uses `d3.svg.arc` to generate each path segment, with `innerRadius` and `outerRadius` driven by the same scale. Rotating each group by successive 2-degree increments creates the full circular pattern. The data is generated synthetically via `d3.range`, not from an external source.

Mmbostock
78% match
Loading thumbnail…

Months on an Arc

Twelve month names curve around a circular arc, with each month occupying a wedge-shaped segment of the ring. The visualization uses D3.js version 3.5.6 to generate SVG paths via `d3.svg.arc` and `d3.layout.pie`, mapping month lengths to angular extents with a small padding between slices. Month labels are placed along each arc using SVG `<textPath>` elements that reference the generated path IDs. The chart is centered and rotated fifteen degrees, with the ring’s radius and text styling defined in CSS.

Ttheaddies
77% match
Loading thumbnail…

Circular Layout (Recursive)

A circular layout visualizes ten concentric rings, each divided into 90 wedge-shaped segments. The example derives these shapes recursively, with each ring’s path geometry generated from radial distances scaled from 180 to 240 pixels and angular slices of π/90 radians. Colors interpolate from brown to steelblue across the rings. The implementation uses D3 v3’s linear scales for radius and fill, and builds SVG paths via `d3.svg.arc` within nested `selectAll` and `enter` calls. The data is procedural, created with `d3.range(10)` for rings and angle increments.

Mmbostock
76% match
Loading thumbnail…

Circular Heat Map

This circular heat map visualizes the relationship between four categories and twelve months, with each cell’s color intensity encoding the numeric value. The chart is composed of concentric rings, one per category, split into twelve angular segments for each month, creating a compact radial layout. Color mapping uses a linear blue scale from white to a dark navy (#01579b). Hovering over any cell triggers a tooltip displaying the exact month, category, and value. The visualization is implemented in D3.js v3 using SVG, with the circular layout emphasizing cyclical patterns in the data.

663anp3ca
75% match
Loading thumbnail…

Circular Heat Map

This circular heat map visualizes the relationship between four categories and twelve months, with each cell’s color intensity encoding the numeric value. The chart is composed of concentric rings, one per category, split into twelve angular segments for each month, creating a compact radial layout. Color mapping uses a linear blue scale from white to a dark navy (#01579b). Hovering over any cell triggers a tooltip displaying the exact month, category, and value. The visualization is implemented in D3.js v3 using SVG, with the circular layout emphasizing cyclical patterns in the data.

663anp3ca
75% match