Skip to main content
100%

Socrata Clock Rotations

✓ Published0🌍 Public
Aapburnes
Last edited Nov 8, 2013
Created on Nov 7, 2013

This visualization calculates and animates the rotational differences between two user-selected times using D3.js v3. It renders the Socrata logo as a clock face with SVG circles and paths for minute and hour tick marks, applying linear interpolation to compute rotations. The animation transitions text counters showing minute and hour rotation totals, using d3.svg.line for tick paths and transition tweens for dynamic label updates. Users input start and end times, triggering a 3-second countdown before rotation values animate.

AI-generated description

Using D3.js to calculate and visualize hour and minute hand rotations between two times. Using some artistic license with the Socrata logo to visualize the analog rotations.

Similar vizzes

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

Clock Spins

Clock Spins displays the current time as a set of six concentric annular arcs, each representing seconds, minutes, hours, weekday, date, and month. The arcs fill progressively as each unit advances, with color and label position updating via a d3.timer loop. Using D3 v3’s d3.svg.arc and d3.time.format, the visualization renders in SVG with animated transitions, mapping each time field’s fractional value to an arc angle and radius.

Aapburnes
75% match
Loading thumbnail…

Clock

A real-time analog clock displays hour, minute, second, and millisecond hands against an outer ring and central hub. The visualization uses d3.v4 and d3-component to structure the SVG as reusable nested components, with each hand rendered as a rotated line element. A d3.timer callback updates the rotation transforms based on time elapsed since midnight, while the component lifecycle manages the timer’s creation and cleanup on destroy. The example demonstrates optimized component-based animation without external data sources.

CCurran Kelleher
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
72% match
Loading thumbnail…

line clock

A small D3.js animation renders the current time as three horizontal bands of vertical lines, one for hours, minutes, and seconds, with a digital clock text above. The hour line is red, the minute line green, and the second line blue, each positioned proportionally across a 120-pixel width. A `setInterval` updates the visualization every second, moving the minute and hour lines instantly while the second line transitions with a bounce easing. The SVG uses `d3.scale.linear` for the hour range and includes fixed gray tick marks every 15 units.

Aaaizemberg
72% match
Loading thumbnail…

Clock with React & D3

This example shows an analog clock face with twelve, three, six, and nine labeled, rendered as SVG elements within a React component. Three rotating rectangular hands indicate hours, minutes, and seconds, using D3’s `rect` and React’s JSX syntax. The clock uses native SVG `<animateTransform>` elements to rotate each hand continuously, with durations of 60, 3600, and 216000 seconds, while D3 v5 and React 16 manage the rendering and structure.

Mmanasishrotri
72% 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
71% 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
71% match