Published
Edited
Apr 15, 2022
Globus task-event visualizer
html`<svg width =${width} height=${graphHeight * 2 + 50}>
<g transform="translate(0,25)">
<text>${uploadData.name}</text>
<g>${totals}</g>
<g transform="translate(0,${graphHeight})">${mbps}</g>
</g>
</svg>`
graphHeight = 200
progress = uploadData.data.DATA.filter((e) => e.code == "PROGRESS").map((e) => {
let { details, time, ...rest } = e;
time = new Date(time);
details = JSON.parse(details);
return { details, time, ...rest };
})
bytes = d3.cumsum(
progress.map((e) => e.details["bytes_transferred"] / 1e9).reverse()
)
cprog = progress.map((e, i) => ({
...e,
MBSoFar: bytes[bytes.length - 1 - i]
}))
totals = Plot.plot({
grid: true,
marginLeft: 50,
height: graphHeight,
y: {
label: "GB transferred"
},
marks: [Plot.line(cprog, { x: "time", y: (e) => e.MBSoFar })]
})
mbps = Plot.plot({
grid: true,
height: graphHeight,
y: {
label: "MB/s"
},
marks: [Plot.line(progress, { x: "time", y: (e) => e.details.mbps / 8 })]
})
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.
