Published
Edited
Mar 27, 2020
Importers
Insert cell
md`# utility`
Insert cell
function getBottom(args) {
return args.height - args.bottom;
}
Insert cell
function getPlotBottom(args) {
// returns the pixel location of the bottom side of the plot area.
return getBottom(args) - args.buffer;
}
Insert cell
function getTop(args) {
return args.top;
}
Insert cell
function getPlotTop(args) {
// returns the pixel location of the top side of the plot area.
return getTop(args) + args.buffer;
}
Insert cell
function getRight(args) {
return args.width - args.right;
}
Insert cell
function getPlotRight(args) {
// returns the pixel location of the right side of the plot area.
return getRight(args) - args.buffer;
}
Insert cell
function getLeft(args) {
return args.left;
}
Insert cell
function getPlotLeft(args) {
// returns the pixel location of the left side of the plot area.
return getLeft(args) + args.buffer;
}
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
function getSvgChildOf(target) {
return select(target).select('svg');
}
Insert cell
function makeRug({ target, data, rugClass }) {
const svg = getSvgChildOf(target);
const allData = data.flat(Infinity);
const rug = svg.selectAll(`line.${rugClass}`).data(allData);

rug
.enter()
.append('line')
.attr('class', rugClass)
.attr('opacity', RUG_OPACITY);

// remove rug elements that are no longer in use
exitAndRemove(rug);

return rug;
}
Insert cell
Insert cell
function selectAllAndRemove(svg, cl) {
return svg.selectAll(cl).remove();
}
Insert cell
function exitAndRemove(el) {
return el.exit().remove();
}
Insert cell
Insert cell
function getRolloverTimeFormat({ rolloverTimeFormat, utcTime, timeFrame }) {
// if a rollover time format is defined, use that
if (rolloverTimeFormat) return timeFormat(utcTime, rolloverTimeFormat);

switch (timeFrame) {
case 'millis':
return timeFormat(utcTime, '%b %e, %Y %H:%M:%S.%L');
case 'seconds':
return timeFormat(utcTime, '%b %e, %Y %H:%M:%S');
case 'less-than-a-day':
return timeFormat(utcTime, '%b %e, %Y %I:%M%p');
case 'four-days':
return timeFormat(utcTime, '%b %e, %Y %I:%M%p');
default:
return timeFormat(utcTime, '%b %e, %Y');
}
}
Insert cell
function timeFormat(utc, specifier) {
return utc
? d3_time_format.utcFormat(specifier)
: d3_time_format.timeFormat(specifier);
}
Insert cell
Insert cell
RUG_OPACITY = 0.3
Insert cell
Insert cell
d3_time_format = require('d3-time-format')
Insert cell
select = require('d3-selection')
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