Formating numbers and dates in Spanish

100%

Formating numbers and dates in Spanish

✓ Published0🌍 Public

Last edited Dec 21, 2017

Created on Dec 21, 2017

This example demonstrates how to localize number and date formatting for the Spanish language using D3.js. It applies custom locale settings for both numeric values and time-based strings, such as abbreviating numbers with a comma as the decimal separator. The code imports locale-specific JSON files for Spanish from the `d3-format` and `d3-time-format` libraries, then uses `formatLocale` and `timeFormatLocale` to create formatting functions that capitalize the first letter of month names output by `locale.format('%B')`.

AI-generated description

Similar vizzes

Loading thumbnail…

d3js Exercice 1 - number formats

This example demonstrates how d3-format creates number formatting functions from format specifiers, testing values like 2.9971832 against descriptors such as `.1f`, `.2s`, and others. It also shows the default locale being overridden with French formatting rules, changing decimal separators to commas and thousands separators to periods. The code loads only the d3-format module and uses `document.writeln` to output results in a preformatted block. A commented section illustrates the same library working in Node.js.

JJeromeMouly

66% match

Loading thumbnail…

d3js Exercice 1 - number formats

This example demonstrates how to format numbers in JavaScript using the d3-format module, highlighting the limitations of native floating-point arithmetic. It first shows the raw output of multiplying 0.1 by integers, then applies various format specifiers like `.1f`, `.2s`, and `.2s` with a custom French locale to control decimals, thousands separators, and SI-prefix notation. The code uses `d3.format` and `d3.formatDefaultLocale` from the d3-format v1 library, reading a hardcoded value (`x`) to illustrate different formatting outputs. The rendering approach is a simple HTML `<pre>` block with `document.writeln`.

AAlainRo

63% match

Loading thumbnail…

Gist e75fdfd9429caf37873275cd41779b88

This example demonstrates a custom formatting function that inserts non-breaking spaces as thousands separators, a convention common in Finnish numeric formatting. The function, `spaceSeparateNumber`, iteratively processes the input number using a regular expression to identify digit groups, replacing them with a space between the leading digits and the trailing three-digit group. It relies on JavaScript’s string replacement and number-to-string conversion, without any external libraries. The visualization likely applies this formatting to numeric labels in a chart, ensuring readable, localized display of large values. The code focuses solely on text transformation, not on rendering or data binding, making it a standalone utility for formatting axis ticks or tooltip values.

EEelsie

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

59% match

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

58% match

Loading thumbnail…

d3.time.format localization

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.

Mmbostock

58% match

Loading thumbnail…

Untitled

This example demonstrates how to format numbers with D3’s `d3.format` API from the `d3-format.v2` module. It creates two format specifications—a compact two-significant-digit format and a centered width-20 format—and outputs the results of formatting the number 12347 with each to the console. The code loads the D3 library from a CDN and executes the formatting calls directly in a script tag, showing the formatted strings as the primary output.

EEric Ho

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

57% match