The end-to-end solution for building and hosting better data apps, dashboards, and reports.
Public
Edited
Jun 17
1 star
Plot.plot({
width,
x: { interval, tickSpacing },
marks: [
Plot.axisX({ ...(removeOverlap && { render }), tickSpacing, fontSize }),
Plot.lineY(data, { sort: "X", x: "X", y: "Y" })
]
})
function render(index, scales, values, dimensions, context, next) {
// the values property contains the tick positions and text
if (!values.text) return next(index, scales, values, dimensions, context);
const {x, text} = values;
// tick labels
const pxPerChar = (this.fontSize ?? 10) * 0.6; // works for monospace fonts, where each char is same px width
const monospace = (t) => d3.max(t.split("\n"), (k) => k.length) * pxPerChar;
const padding = monospace(" "); // 1 char
const filtered = []; // filtered index
let lastPosition = -Infinity;
for (const i of index) {
const position = x[i];
const w = d3.max(text[i].split("\n"), monospace); // size of the (possibly multiline) label
// Keep visible if this position is more than half the width of the previous label away from the previous tick
if (position - lastPosition >= padding + w / 2) {
filtered.push(i);
lastPosition = position + w / 2;
}
}
return next(filtered, scales, values, dimensions, context);
}
data = line_test_data.map(d => ({...d, X_MIN: new Date(d.X_MIN), X_MAX: new Date(d.X_MAX), X: new Date(d.X)}))
line_test_data = FileAttachment("line_test_data.json").json()
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.
