100%

d3js Exercice 1 - number formats

✓ Published0🌍 Public

Last edited Feb 22, 2018

Created on Oct 3, 2017

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

AI-generated description

d3js Exercice 1 - number formats

Built with blockbuilder.org

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

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

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

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

65% match

Loading thumbnail…

d3js Exercice 4 - selection, data

This example demonstrates a basic data join with D3.js v4, where an array of five numeric values drives the widths of five horizontal bars. The visualization shows how selection and data binding work by pairing each number with a `<div>` element, applying a CSS class and dynamic pixel widths based on the data. The code uses `d3.select` and `selectAll` to target the container, then the `.data()` method to bind the array, followed by `.attr()` and `.style()` to update the bars. Commented exercises hint at extending the example with `.enter()` and `.exit()` for dynamic element creation and removal, though the visible implementation only performs the initial update. The static bars, with heights and margins set via CSS, render from the hardcoded dataset.

AAlainRo

64% match

Loading thumbnail…

Indian Number System Format

This example demonstrates a custom JavaScript function that formats numbers according to the Indian Number System, using commas in the thousands, lakh, and crore groupings. The left column shows positive values, while the right column displays their negative counterparts, using D3.js version 3.5.5 to append formatted text to the page. The code handles both integer and decimal numbers, including edge cases like 10,000 and negative inputs, as noted in the README.

CCurran Kelleher

64% match

Loading thumbnail…

locale semi-agnostic string to float conversion [JavaScript]

This example demonstrates a JavaScript utility for converting strings to floating-point numbers, designed to be locale semi-agnostic. It shows how the function handles various numeric formats, including European decimal commas, thousands separators, and ambiguous cases like “1.000” or “2,999.95”, returning numeric values or `NaN` for invalid inputs. The code uses the `toLocaleString()` method to detect the current locale’s decimal and thousands separators, then applies heuristic rules to interpret strings based on separator placement and digit counts. A MooTools click handler triggers the conversion examples, logging results to the console, with an accompanying HTML page featuring a product price display.

GGerHobbelt

64% match