Public
Edited
Jan 23, 2023
1 fork
Importers
// This is taking ticks from the dataset, but you could have them come from another source
viewof clicked = linePlot(data, "AVISITN", "AVISIT", "AVAL", "USUBJID", "TRTA")
clicked
linePlot = (data, x, xlabel, y, z, color) => {
let ticks = d3.rollup(data, (v) => v[0].xlabel, (d) => d.x)
const state = [];
const chart = Plot.plot({
style: "overflow: visible;",
y: {
//type: "log",
grid: true,
label: "↑ Value"
//tickFormat: formatChange
},
color: {
legend: true
},
marginBottom: 50,
x: {
label: "",
ticks: [...ticks.keys()],
tickRotate: -45,
tickFormat: (d) => ticks.get(d)
},
marks: [
//Plot.ruleY([1]),
Plot.line(data, {
x: x,
y: y,
z: z,
stroke: color,
title: (d) => `Subject: ${d[z]} Treatment: ${d[color]}`
}),
Plot.dot(data, {
x: x,
y: y,
z: z,
stroke: color,
r: 3,
fill: color,
title: (d) => `Subject: ${d[z]} \n X: ${d[x]} \n Y: ${d[y]}`
})
],
tooltip: {
stroke: color,
"stroke-width": "3px",
r: 3
}
});
// Adding the on… event listener with D3.
// Alternatively see https://observablehq.com/@fil/plot-onclick-experimental-plugin
const lines = d3.select(chart).select("[aria-label=line]").selectAll("path");
const Z = Plot.valueof(data, z);
lines
.on("pointerenter", function (event, i) {
lines.attr("stroke-opacity", (j) => (i === j ? 1 : 0.25));
})
.on("pointerout", () => lines.attr("stroke-opacity", 1))
.on("click", (event, I) => {
const owner = chart;
const v = Z[I[0]];
if (!Array.isArray(owner.value) || !event.metaKey) {
owner.value = [v];
} else {
if (owner.value.includes(v))
owner.value = owner.value.filter((d) => d !== v);
else owner.value.push(v);
}
owner.dispatchEvent(new CustomEvent("input"));
});
const points = d3
.select(chart)
.select("[aria-label=dot]")
.selectAll("circle");
points.on("click", (event, i) => {
const owner = chart;
const v = data[i];
owner.value = v;
owner.dispatchEvent(new CustomEvent("input"));
})
.on("pointerenter", function (event, i) {
points.attr("stroke-opacity", (j) => (i === j ? 1 : 0.25));
})
.on("pointerout", () => lines.attr("stroke-opacity", 1));
return chart;
}
import {Plot} from "@mkfreeman/plot-tooltip"
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.
