function hrvecdf(data, mean, { width } = {}) {
const lines = new Map();
const plot = Plot.plot({
grid: true,
width: width,
inset: 10,
x: { tickFormat: d3.format(".2f"), domain: [0, 0.3] },
marks: [
Plot.lineY(data, {
x: "the_value",
y: "proportion",
z: "session_id",
stroke: "session_id",
render: (index, scales, values, dimensions, context, next) => {
const g = next(index, scales, values, dimensions, context);
for (const line of g.childNodes) {
line.setAttribute("opacity", 0.3);
lines.set(values.z[line.__data__[0]], line);
}
return g;
},
tip: true
}),
Plot.lineY(mean, {
x: "the_value",
y: "proportion",
stroke: "black",
strokeWidth: 2
})
]
});
plot.addEventListener("input", () => {
const z = plot.value?.["session_id"];
for (const [id, line] of lines) {
line.setAttribute("opacity", z ? id === z ? 1 : 0.1 : 0.3);
}
});
return plot;
}