Published
Edited
Mar 27, 2020
Insert cell
md`# formatters`
Insert cell
Insert cell
function formatXAggregateMouseover(args, d) {
return formatDataForMouseover(
args,
d,
args.xMouseover,
'key',
args.timeSeries
);
}
Insert cell
function formatYMouseover(args, d) {
return formatDataForMouseover(
args,
d,
args.yMouseover,
args.yAccessor,
false
);
}
Insert cell
function formatXMouseover(args, d) {
return formatDataForMouseover(
args,
d,
args.xMouseover,
args.xAccessor,
args.timeSeries
);
}
Insert cell
function formatNumberMouseover(args, d) {
return formatDataForMouseover(
args,
d,
args.xMouseover,
args.xAccessor,
false
);
}
Insert cell
Insert cell
function formatYRollover({
num,
d,
mouseover,
accessor,
isTimeSeries,
aggregateRollover,
units,
name
}) {
let formattedY;
if (mouseover !== null) {
formattedY = numberRolloverFormat(mouseover, d, accessor);
} else {
if (isTimeSeries) {
formattedY = aggregateRollover
? num(accessor(d))
: units + num(accessor(d));
} else {
formattedY = name + ': ' + units + num(accessor(d));
}
}
return formattedY;
}
Insert cell
function numberRolloverFormat(f, d, accessor) {
if (typeof f === 'string') {
return format('s')(d[accessor]);
} else if (typeof f === 'function') {
return f(d);
}
return d[accessor];
}
Insert cell
function timeRolloverFormat(f, d, accessor, utc) {
if (typeof f === 'string') {
return timeFormat(utc, f)(d[accessor]);
} else if (typeof f === 'function') {
return f(d);
}
return d[accessor];
}
Insert cell
function formatRolloverNumber({ format, decimals, yaxUnitsAppend, yaxUnits }) {
if (format === constants.format.count) {
return d => {
const pf = d % 1 !== 0 ? format(`,.${decimals}f`) : format(',.0f');

// are we adding units after the value or before?
return yaxUnitsAppend ? pf(d) + yaxUnits : yaxUnits + pf(d);
};
} else {
return d => {
const fmtString = Number.isInteger(decimals) ? `.${decimals}%` : '%';
const pf = format(fmtString);
return pf(d);
};
}
}
Insert cell
format = require('d3-format')
Insert cell
Insert cell
Insert cell

Purpose-built for displays of data

Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
Learn more