Skip to main content
SimilarExport ZIP
100%

Untitled

✓ Published0🌍 Public
EEric Ho
Last edited Feb 14, 2021
Created on Feb 14, 2021
Forked from D3 Starter

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.

AI-generated description

A demonstration of how to start using D3 version 6.

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
79% 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
77% match
Loading thumbnail…

Untitled

This example demonstrates a simple D3 version 4 setup that renders a "Hello D3 version 7" message directly into the page body using `d3.select`. The code loads the D3 library and d3-scale-chromatic from a CDN, with CSS styling for monospace text and axis elements. Although the script imports version 7 functions, it actually uses d3.v4, highlighting a version mismatch. The visualization shows minimal content—just a text string—with no data or interactive elements, serving as a basic template for starting with D3.

SSimon Hackbert
69% 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
68% match
Loading thumbnail…

d3 experimental zone

The d3 experimental zone demonstrates how to begin working with D3 version 7, rendering a sequence of numbers from the array `[1,2,3,4,5,6]` directly into the page body. The example uses the `d3.select` API to target the body element and a chained `.Jenter` method to iterate over the data, with a `.text` callback displaying each value. The page is styled with a massive 13em font size, making the numeric output the focal point. This minimal setup illustrates the core selection and data-binding workflow in D3 while serving as a sandbox for experimentation.

SSven
66% match
Loading thumbnail…

Untitled

This example demonstrates how to bind a simple numeric array to existing heading elements using D3 version 7. The static bar-chart-like display renders each value as blue text within `<h2>` tags, using the `selectAll` and `join` API to match data to nodes. The code imports the `select` function from D3 and applies the `.text()` and `.style()` methods to update content and color, with the dataset defined inline as an array of nine numbers.

CCorey-PT
66% match
Loading thumbnail…

d3 practice

This example shows four numbered paragraphs rendered in a single empty `div` element, displaying the static values 1 through 4. The visualization uses the D3.js v6 library to select the container, bind the array of numbers to paragraph elements via the `.data()` method, and append a new `<p>` for each item using `.enter()`. The text for each paragraph is set directly from the data value through the `.text()` callback, with no additional encoding or interaction. The HTML file loads D3 from a CDN and the JavaScript code from a separate `app.js` file.

Nnutmegsashimi
64% match
Loading thumbnail…

test

This example displays the number 250,000 in large white Ubuntu text against a dark blue background, demonstrating basic DOM manipulation with the D3.js library (v5). The page loads D3 from a CDN and uses an empty import statement, while CSS handles the styling through Google Fonts and body properties. The visualization simply presents static text with no interactive or dynamic elements, serving as a minimal template for exploring VizHub’s project structure and D3 integration.

EEyob Westerink
64% match