roll = function (d, k) {
return d3.rollup(
d,
(a) => d3.sum(a, (d) => d[k]),
(d) => d.date
);
}
collapse = function (m, mk, name) {
return Array.from(m, ([k, v]) => {
const o = {};
o.date = k;
o["name"] = name;
o[mk] = v;
return o;
});
}
bRx = collapse(roll(dataDetails, "bytes_rx"), "bytes_rx", "rx")
bTx = collapse(roll(dataDetails, "bytes_tx"), "bytes_tx", "tx")
retries = collapse(roll(dataDetails, "retries"), "retries", "retries")
{
const p = Plot.plot({
grid: true,
width: width,
marginLeft: 50,
marginRight: 70,
y: { label: "bytes", tickFormat: ".1s" },
x: { label: "date" },
marks: [
Plot.ruleY([0]),
Plot.lineY(bRx, {
x: "date",
y: "bytes_rx",
stroke: "green"
}),
Plot.lineY(bTx, {
x: "date",
y: "bytes_tx",
stroke: "steelblue"
}),
genText(bRx, "bytes_rx", "rx"),
genText(bTx, "bytes_tx", "tx")
]
});
return p;
}
genText = (d, y, text) => {
return Plot.text(
d,
Plot.selectLast({
x: "date",
y,
text: "name",
textAnchor: "start",
dx: 3,
fontSize: "15px"
})
);
}
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.
