How to use d3-format - 10 common examples
To help you get started, we’ve selected a few d3-format examples, based on popular ways it is used in public projects.
Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
DefinitelyTyped / DefinitelyTyped / d3-format / d3-format-tests.ts View on Github 
let formatFn: (n: number) => string;
let specifier: d3Format.FormatSpecifier;
let localeDef: d3Format.FormatLocaleDefinition;
let localeObj: d3Format.FormatLocaleObject;
// ----------------------------------------------------------------------
// Test Format and FormatPrefix
// ----------------------------------------------------------------------
formatFn = d3Format.format('.0%');
formatFn = d3Format.formatPrefix(',.0', 1e-6);
// ----------------------------------------------------------------------
// Test Format Specifier
// ----------------------------------------------------------------------
specifier = d3Format.formatSpecifier('.0%');
let fill: string = specifier.fill;
let align: '>' | '<' | '^' | '=' = specifier.align;
let sign: '-' | '+' | '(' | ' ' = specifier.sign;
let symbol: '$' | '#' | '' = specifier.symbol;
let zero: boolean = specifier.zero;
let width: number | undefined = specifier.width;
let comma: boolean = specifier.comma;
let precision: number = specifier.precision;
let type: 'e' | 'f' | 'g' | 'r' | 's' | '%' | 'p' | 'b' | 'o' | 'd' | 'x' | 'X' | 'c' | '' | 'n' = specifier.type;let localeObj: d3Format.FormatLocaleObject;
// ----------------------------------------------------------------------
// Test Format and FormatPrefix
// ----------------------------------------------------------------------
formatFn = d3Format.format('.0%');
formatFn = d3Format.formatPrefix(',.0', 1e-6);
// ----------------------------------------------------------------------
// Test Format Specifier
// ----------------------------------------------------------------------
specifier = d3Format.formatSpecifier('.0%');
let fill: string = specifier.fill;
let align: '>' | '<' | '^' | '=' = specifier.align;
let sign: '-' | '+' | '(' | ' ' = specifier.sign;
let symbol: '$' | '#' | '' = specifier.symbol;
let zero: boolean = specifier.zero;
let width: number | undefined = specifier.width;
let comma: boolean = specifier.comma;
let precision: number = specifier.precision;
let type: 'e' | 'f' | 'g' | 'r' | 's' | '%' | 'p' | 'b' | 'o' | 'd' | 'x' | 'X' | 'c' | '' | 'n' = specifier.type;
let formatString: string = specifier.toString();
// ----------------------------------------------------------------------
// Test Precision Suggestorslet localeObj: d3Format.FormatLocaleObject;
// ----------------------------------------------------------------------
// Test Format and FormatPrefix
// ----------------------------------------------------------------------
formatFn = d3Format.format('.0%');
formatFn = d3Format.formatPrefix(',.0', 1e-6);
// ----------------------------------------------------------------------
// Test Format Specifier
// ----------------------------------------------------------------------
specifier = d3Format.formatSpecifier('.0%');
let fill: string = specifier.fill;
let align: '>' | '<' | '^' | '=' = specifier.align;
let sign: '-' | '+' | '(' | ' ' = specifier.sign;
let symbol: '$' | '#' | '' = specifier.symbol;
let zero: boolean = specifier.zero;
let width: number | undefined = specifier.width;
let comma: boolean = specifier.comma;
let precision: number = specifier.precision;
let type: 'e' | 'f' | 'g' | 'r' | 's' | '%' | 'p' | 'b' | 'o' | 'd' | 'x' | 'X' | 'c' | '' | 'n' = specifier.type;
let formatString: string = specifier.toString();
// ----------------------------------------------------------------------
// Test Precision Suggestors
// ----------------------------------------------------------------------let align: '>' | '<' | '^' | '=' = specifier.align;
let sign: '-' | '+' | '(' | ' ' = specifier.sign;
let symbol: '$' | '#' | '' = specifier.symbol;
let zero: boolean = specifier.zero;
let width: number | undefined = specifier.width;
let comma: boolean = specifier.comma;
let precision: number = specifier.precision;
let type: 'e' | 'f' | 'g' | 'r' | 's' | '%' | 'p' | 'b' | 'o' | 'd' | 'x' | 'X' | 'c' | '' | 'n' = specifier.type;
let formatString: string = specifier.toString();
// ----------------------------------------------------------------------
// Test Precision Suggestors
// ----------------------------------------------------------------------
num = d3Format.precisionFixed(0.0005);
num = d3Format.precisionPrefix(0.0005, 1000);
num = d3Format.precisionRound(0.0005, 3000);
// ----------------------------------------------------------------------
// Test Locale Definition
// ----------------------------------------------------------------------
localeDef = {
decimal: ',',
thousands: '.',
grouping: [3],
currency: ['EUR', '']
};let sign: '-' | '+' | '(' | ' ' = specifier.sign;
let symbol: '$' | '#' | '' = specifier.symbol;
let zero: boolean = specifier.zero;
let width: number | undefined = specifier.width;
let comma: boolean = specifier.comma;
let precision: number = specifier.precision;
let type: 'e' | 'f' | 'g' | 'r' | 's' | '%' | 'p' | 'b' | 'o' | 'd' | 'x' | 'X' | 'c' | '' | 'n' = specifier.type;
let formatString: string = specifier.toString();
// ----------------------------------------------------------------------
// Test Precision Suggestors
// ----------------------------------------------------------------------
num = d3Format.precisionFixed(0.0005);
num = d3Format.precisionPrefix(0.0005, 1000);
num = d3Format.precisionRound(0.0005, 3000);
// ----------------------------------------------------------------------
// Test Locale Definition
// ----------------------------------------------------------------------
localeDef = {
decimal: ',',
thousands: '.',
grouping: [3],
currency: ['EUR', '']
};let width: number | undefined = specifier.width;
let comma: boolean = specifier.comma;
let precision: number = specifier.precision;
let type: 'e' | 'f' | 'g' | 'r' | 's' | '%' | 'p' | 'b' | 'o' | 'd' | 'x' | 'X' | 'c' | '' | 'n' = specifier.type;
let formatString: string = specifier.toString();
// ----------------------------------------------------------------------
// Test Precision Suggestors
// ----------------------------------------------------------------------
num = d3Format.precisionFixed(0.0005);
num = d3Format.precisionPrefix(0.0005, 1000);
num = d3Format.precisionRound(0.0005, 3000);
// ----------------------------------------------------------------------
// Test Locale Definition
// ----------------------------------------------------------------------
localeDef = {
decimal: ',',
thousands: '.',
grouping: [3],
currency: ['EUR', '']
};
localeDef = {
decimal: "\u066b",
thousands: "\u066c",
grouping: [3],let comma: boolean = specifier.comma;
let precision: number = specifier.precision;
let type: 'e' | 'f' | 'g' | 'r' | 's' | '%' | 'p' | 'b' | 'o' | 'd' | 'x' | 'X' | 'c' | '' | 'n' = specifier.type;
let formatString: string = specifier.toString();
// ----------------------------------------------------------------------
// Test Precision Suggestors
// ----------------------------------------------------------------------
num = d3Format.precisionFixed(0.0005);
num = d3Format.precisionPrefix(0.0005, 1000);
num = d3Format.precisionRound(0.0005, 3000);
// ----------------------------------------------------------------------
// Test Locale Definition
// ----------------------------------------------------------------------
localeDef = {
decimal: ',',
thousands: '.',
grouping: [3],
currency: ['EUR', '']
};
localeDef = {
decimal: "\u066b",
thousands: "\u066c",
grouping: [3],function getWidthBasedResolutionText(
zoomLevel, maxWidth, binsPerDimension, maxZoom
) {
const resolution = maxWidth / ((2 ** zoomLevel) * binsPerDimension);
// we can't display a NaN resolution
if (!Number.isNaN(resolution)) {
// what is the maximum possible resolution?
// this will determine how we format the lower resolutions
const maxResolutionSize = maxWidth / ((2 ** maxZoom) * binsPerDimension);
const pp = precisionPrefix(maxResolutionSize, resolution);
const f = formatPrefix(`.${pp}`, resolution);
const formattedResolution = f(resolution);
return formattedResolution;
}
console.warn('NaN resolution, screen is probably too small.');
return '';
}}
return newRef => {
ref = newRef
if (ref) {
window.addEventListener('resize', update)
// raf needed to wait for glamor css styles
rafHandle = window.requestAnimationFrame(update)
} else {
window.removeEventListener('resize', update)
window.cancelAnimationFrame(rafHandle)
}
}
}
const thousandSeparator = '\u2019'
const swissNumbers = formatLocale({
decimal: ',',
thousands: thousandSeparator,
grouping: [3],
currency: ['CHF\u00a0', '']
})
const formatPow = (tLabel, baseValue) => {
const decimalFormat = swissNumbers.format('.0f')
let [n] = decimalFormat(baseValue).split('.')
let scale = value => value
let suffix = ''
if (n.length > 9) {
scale = value => value / Math.pow(10, 9)
suffix = tLabel(' Mrd.')
} else if (n.length > 6) {
scale = value => value / Math.pow(10, 6)function getWidthBasedResolutionText(
zoomLevel, maxWidth, binsPerDimension, maxZoom
) {
const resolution = maxWidth / ((2 ** zoomLevel) * binsPerDimension);
// we can't display a NaN resolution
if (!Number.isNaN(resolution)) {
// what is the maximum possible resolution?
// this will determine how we format the lower resolutions
const maxResolutionSize = maxWidth / ((2 ** maxZoom) * binsPerDimension);
const pp = precisionPrefix(maxResolutionSize, resolution);
const f = formatPrefix(`.${pp}`, resolution);
const formattedResolution = f(resolution);
return formattedResolution;
}
console.warn('NaN resolution, screen is probably too small.');
return '';
}
