100%

d3js Exercice 1 - number formats

✓ Published0🌍 Public

Last edited Oct 10, 2017

Created on Oct 10, 2017

This example demonstrates number formatting in D3.js by printing a series of values computed from 0.1 increments and a fixed variable, then applying various format specifiers such as '.1f' and '.2s' to show fixed-point and SI-prefix notation. It also defines a custom French locale with comma decimal separators and period thousands separators, then reapplies the format to illustrate localized output. The code uses the d3-format module’s `d3.format` and `d3.formatDefaultLocale` APIs, rendering results directly into the page’s HTML via `document.writeln`.

AI-generated description

d3js Exercice 1 - number formats

Built with blockbuilder.org

forked from <a href='http://bl.ocks.org/AlainRo/'>AlainRo</a>'s block: <a href='http://bl.ocks.org/AlainRo/66e8f2df6e5253c42911e1ff0504a627'>d3js Exercice 1 - number formats</a>

mit Licensed

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

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

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

77% match

Loading thumbnail…

d3js Exercice 2 - Scales

This example demonstrates how D3.js scale functions map input domain values to output range values, printing results directly to the page. It uses `d3.scaleLinear()` to transform numbers between 0 and 20 into a range of 0 to 1, showing outputs for boundary and mid-point inputs. The code then applies the `.clamp(true)` method to restrict output values beyond the specified domain, so inputs like -10 and 200 return clamped results. Written in French comments, it also suggests experimenting with `invert`, `power`, `log` scales, and color ranges. The visualization is purely text-based, using `document.writeln` to display results in a `<pre>` element.

YYannLive

74% match

Loading thumbnail…

d3js Exercice 2 - Scales

This example demonstrates how d3.scaleLinear maps input values from a domain to a range, showing the output for inputs of 0, 10, and 20, then extending beyond the interval to reveal unbounded behavior. It then applies the clamp(true) method to the scale, which restricts outputs for out-of-range values like -10 and 200. Built with D3 v4, the code writes results directly to the document via document.writeln, and comments suggest experimenting with invert, power, log scales, or a color range.

JJeromeMouly

68% match

Loading thumbnail…

Hello VizHub

This example displays a large, centered numeric message generated from a simple calculation, formatted and rendered using D3.js v5 and ES6 modules. It shows how VizHub supports importing local modules and D3 API functions, with the message derived from a mathematical expression and formatted using the `d3.format` method. The page uses a CSS import for the Ubuntu font and a dark blue background to make the text prominent. The code demonstrates basic DOM selection, module exports, and D3’s number formatting in a minimal setup.

Yyukozome

67% match

Loading thumbnail…

d3js Exercice 2 - Scales

This example demonstrates the behavior of D3.js linear scales, specifically how they map input domain values to output range values. It shows the default scaling for values within the domain, then highlights what happens outside the interval, and finally illustrates the effect of the clamp method. The code uses `d3.scaleLinear()` with a domain of `[0, 20]` and range `[0, 1]`, logging results for various inputs including negative and oversized values. A second scale with `.clamp(true)` restricts outputs to the range. The visualization is purely text-based, using `document.writeln` to display computed values in the browser.

AAlainRo

67% match

Loading thumbnail…

Formating numbers and dates in Spanish

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')`.

LLuisSevillano

66% match