Polar Clock

100%

✓ Published0🌍 Public

Last edited Feb 24, 2016

Created on Jul 21, 2011

This polar clock visualizes time as six nested, colored arcs, each representing seconds, minutes, hours, days, dates, and months, with the arc length proportional to the current value. The SVG updates every second with an elastic transition, using `d3.svg.arc` for curved shapes, `attrTween` to interpolate arc angles, and a linear color scale to map each value to a hue. The code, built with D3 v3, tracks the current date via a `fields()` function and respects the `document.hidden` property to pause animation when the tab is inactive.

AI-generated description

This unusual clock in polar coordinates is based on a Flash screensaver by pixelbreaker. See also the earlier Protovis version, and two newer variations.

gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

Polar Clock III

A polar clock visualizes time through a series of six concentric rings, each representing a progressively shorter time unit from years to seconds. The outermost rings track years and months, while inner rings display weeks, days, hours, and minutes. Each ring contains colored tick marks for sub-units and a rotating arm that sweeps through them, with the active tick highlighted. Built with d3.v4, the animation uses `d3.timeInterval` for time arithmetic, `d3.arc` for arm geometry, and `d3.scaleRainbow` for color mapping, updating every second via CSS transitions.

Mmbostock

89% match

Loading thumbnail…

Polar Clock II

The Polar Clock II visualization displays the current time as a set of six concentric rings, each representing a time unit from seconds to year, with colored arcs and labels showing the progression within each period. The code uses D3 v4, SVG, and a timer to repeatedly update the visualization, with `d3.arc` generating the curved bodies and text paths for each field. It relies on `d3.timeFormat` and date intervals like `d3.timeDay` to calculate angles and label values, while the `d3.scaleRainbow` color scale maps each angle to a hue.

Mmbostock

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

80% match

Loading thumbnail…

Multicolored Clock

The Multicolored Clock visualizes time as a nested set of seven animated arc segments, each representing seconds, minutes, hours, day, date, month, and a static credit ring. The arcs smoothly transition every second using elastic easing, with colors interpolating across an HSL spectrum based on each unit’s current value via a linear scale. Built with D3 v3, it uses `d3.svg.arc`, `attrTween` for value interpolation, and `textPath` to label each ring. Data is generated live from the JavaScript `Date` object, rendered as SVG with continuous animation.

MManinder Singh

80% match

Loading thumbnail…

Fork of Multicolored Clock

A multicolored clock displays the current time as nested, animated SVG arcs, each ring representing seconds, minutes, hours, day, date, and month. The outermost arc shows the author’s name and a full circle. The visualization updates every second with d3.transition and an elastic easing, while the arc paths are interpolated using attrTween. It uses d3.time.format for time labels, d3.svg.arc for ring geometry, and a linear color scale interpolating between HSL hues.

Jjustvizzin

78% match

Loading thumbnail…

Animated Clock

A stylized clock face displays twelve tan, rounded arc segments for the hour positions, with black hour and minute hands rotating continuously. The animation uses SVG `animateTransform` elements to rotate the hands at different speeds, completing a full revolution every 60 seconds for the minute hand and every 720 seconds for the hour hand. D3.js version 6.6.2 generates the arc paths and labels using the `d3.arc()` generator with `centroid()` positioning, while the white tick marks are static SVG lines rotated around the center.

Jjabowen2020@gmail.com

77% match

Loading thumbnail…

Fork of Animated Clock

This example shows an animated clock that ticks through an entire day at 60 times normal speed. The clock face is rendered as twelve distinct SVG arcs, each representing an hour and styled with a tan background, while the hour and minute hands rotate continuously via D3.js. A sky-blue gradient background with drifting white clouds—animated via CSS keyframes—creates a playful, dynamic scene. The code leverages D3’s arc generator to draw the hour segments and positions the hour labels, with the entire clock centered and scaled to the viewport.

66264kusuma@gmail.com

73% match

Loading thumbnail…

Retro Clock

A retro-styled animated clock displays a series of date-time strings, each formatted as "08h15 01.07.2022". The visualization cycles through these markers every second, showing how characters rotate in and out of a rectangular frame using a D3 mask. Built with D3 v7, the SVG text elements transition vertically via `transition.attr()` to simulate a mechanical flip-clock effect. The string data is hardcoded in the script, and the clock aligns to the right within the canvas layout.

Sscheenmi@gmail.com

73% match