Week of hours

100%

✓ Published0🌍 Public

Last edited Jan 6, 2016

Created on Jan 3, 2016

A radial ring visualization displays 168 hours across five concentric weeks, with each arc segment colored by random value and shaded blue for nighttime hours or gold for daytime. The animation uses D3.js arc generators with randomized opacity scales to create a flickering effect. Interactive transparent overlay arcs reveal per-hour data on mouseover, while labeled axes mark 6:00 and 18:00 boundaries. The visualization relies on d3.svg.arc, linear color scales with RGB interpolation, and power opacity scaling.

AI-generated description

Similar vizzes

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

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

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

72% match

Loading thumbnail…

A year of weekly running mileage

This radial heatmap visualizes a year of weekly running mileage, with runs plotted as bars radiating from the center. The distance (yellow) and elevation gain (blue) of individual runs are encoded along a circular time axis, with hover interactions revealing detailed tooltips. Using D3 v4 and SVG animations, the visualization applies a moving 7-day sum to calculate weekly mileage. Two interactive sliders adjust color thresholds (low/middle/high) that segment the data into three colored zones, and the underlying masked paths are redrawn dynamically as thresholds change, selectively coloring the bars. The example builds on Adam Pearce’s mask-based coloring technique to show how multiple color zones can be rendered in a single path.

663anp3ca

72% match

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

72% match

Loading thumbnail…

Untitled

This visualization displays a radial, donut-like chart composed of eight concentric arcs, each representing a different data item stacked from a single-row dataset. The arcs are rendered using D3’s `arc` generator, with their inner and outer radii mapped through a linear scale (`scaleLinear`) to encode values, while the start and end angles are fixed to create a partial ring. The SVG is drawn in React, and the stacked data is computed with `d3.stack()`. Each arc segment is assigned a distinct color from a predefined array, producing a nested multi-layered ring visualization.

Ssubratanp

72% match

Loading thumbnail…

Gist 798b9a5ccb654ceebb5b29ce680c5707

This visualization presents a week of daily weather data for a single location, using a circular timeline to encode conditions such as temperature, humidity, wind, and cloud cover. Each day is a concentric ring, with hourly metrics plotted as colored arcs or bars. The code relies on D3.js for layout and rendering, specifically using `d3.forceSimulation` to position labels and `d3.scaleTime` for temporal axes. Data comes from a local JSON file containing Dark Sky API-style forecast fields, rendered in an SVG canvas.

MMbrownshoes

72% match

Loading thumbnail…

Animated Arcs

Four concentric animated arcs rotate continuously around a central point, each with a distinct color and its own random start and end angles. The arcs periodically change their sweep length and position, creating a dynamic, looping visual rhythm. Built with D3 v4, the example uses SVG paths and `d3.interval` to trigger transitions, while `transition.attrTween` and `d3.interpolate` smoothly animate each arc’s angles. The code generates random data for four arcs with varying radii and colors, drawing them with the `d3.arc` shape generator.

FFrissAnalytics

71% match