Skip to main content
SimilarExport ZIP
100%

Months on an Arc

✓ Published0🌍 Public
Ttheaddies
Last edited Mar 2, 2022
Created on Mar 2, 2022
Forked from Hello HTML

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.

AI-generated description

A bare minimum HTML page.

MIT Licensed

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

Month Axis

A month axis displays a horizontal time scale spanning the year 2012, with a tick for each month. The code uses `d3.time.scale` to map a date domain to pixel coordinates, `d3.svg.axis` for the bottom-oriented axis, `d3.time.months` for tick spacing, and `d3.time.format` to render month abbreviations as labels. The SVG output places tick text to the right and below each mark.

Mmbostock
72% 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
70% match
Loading thumbnail…

Arc Clock

Three ring-like arcs display the current hour, minute, and second, with each arc filling proportionally to its unit and updating every second. A label beneath each arc shows the numeric value and unit letter. Built with D3 v3, the visualization uses SVG paths and `d3.svg.arc` for geometry, while `transition.attrTween` and an elastic easing animate the arc changes. The `update` function redraws the clock using `Date` methods like `getHours`, `getMinutes`, and `getSeconds`.

Mmbostock
70% match
Loading thumbnail…

Untitled

This visualization displays a monthly grid of numeric values, with each month as a row and each date as a column. The data consists of eleven date values for twelve months, rendered as SVG text elements positioned using `d3.scalePoint` for both axes. Custom CSS classes style the month labels in green, while the code uses D3’s selection and join methods (`selectAll().join()`) to bind the plot data. The framework is React, and the chart is drawn entirely with SVG, with axis labels manually placed rather than using generated axes.

Ssubratanp
70% 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
69% 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
69% match
Loading thumbnail…

Simple line chart

A simple line chart displays twelve months of numeric values, with a black polyline connecting evenly spaced points and a large label showing the final value. The chart includes interactive circles that turn red on hover, revealing the corresponding value and a dashed vertical guide line using SVG transitions. Built with D3.js v3, it uses ordinal and linear scales, SVG paths for the line, and JSON data loaded via `d3.json`.

JJulesSauvinet
69% match