d3.time.format localization

100%

d3.time.format localization

✓ Published0🌍 Public

Last edited Feb 9, 2016

Created on Aug 9, 2012

A clock displays the current time in Russian, updating every second. The example demonstrates locale-specific formatting in d3.time.format, using the `%c` directive to render a localized date and time string. The page uses d3.v2.min.js with the `d3.select` API to update an HTML `h1` element. The D3 library is built with the `ru_RU` locale, which changes the output of `d3.time.format`. An animation, driven by `setInterval`, refreshes the displayed time at a one-second interval.

AI-generated description

D3 2.10 adds support for static localization of d3.time.format. When building D3, specify the LOCALE environment variable. For example, to build a version of D3 for Russian:

LOCALE=ru_RU make clean all

gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

Localized Time Axis

A localized time axis displays a one-year span from January 2000 to January 2001, with tick labels rendered in Russian. The visualization loads a locale-specific JSON file from the d3-time-format package and applies it via `d3.timeFormatDefaultLocale`. The axis is generated with `d3.axisBottom` on an SVG canvas, using a `d3.scaleTime` domain and range. This example demonstrates how to customize date formatting for regional languages in D3 visualizations.

Mmbostock

72% match

Loading thumbnail…

Localized Time Axis II

A year-long time axis renders with Russian-language month, day, and time labels. The example uses `d3.timeFormatLocale` to define a custom locale and `d3.timeFormat`-based functions for millisecond, second, minute, hour, day, week, month, and year granularities. A single bottom axis, drawn with `d3.axisBottom` and `d3.scaleTime`, applies a multi-scale format via a `multiFormat` function that selects the appropriate label based on the date’s position within the year. No data is plotted; the SVG canvas shows only the axis.

Mmbostock

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

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

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

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

63% match

Loading thumbnail…

Simple Custom Time Formats with D3 V4

This example demonstrates how D3’s time scale and axis can be customized to display different date-time formats depending on the temporal granularity, such as milliseconds, seconds, minutes, hours, days, weeks, months, or years. It uses D3 v4’s `d3.axisBottom` with a custom `multiFormat` function that conditionally applies format specifiers from `d3.timeFormat` based on the interval between ticks. The data domain spans a single day from January 1, 2000, rendered as an SVG with margins and a 960x500 canvas. The code leverages `d3.timeSecond`, `d3.timeMinute`, `d3.timeHour`, `d3.timeDay`, `d3.timeWeek`, `d3.timeMonth`, and `d3.timeYear` for comparisons, providing a clear hierarchy of time labels.

FFasani

63% match

Loading thumbnail…

Airport Clocks

This example displays a collection of labeled analog clocks, each configured with distinct visual properties such as size, color, and time zone offsets, rendering a global array of synchronized timepieces. The clocks animate in real time using `d3.timer` to update hand rotations based on elapsed milliseconds. The code leverages the `d3-component` library to encapsulate the clock as a reusable SVG component, with D3 v4 handling DOM selection and data binding for numbers, ticks, and hands.

CCurran Kelleher

63% match