Software engineer and visualization enthusiast. Lives in Cambridge, Massachusetts, with no dogs.
Unlisted
Edited
May 25, 2023
2 stars
<div class=legend>${timePlot.legend("color")}</div>
<div class=parent style='display:flex;'>${timePlot}${spacePlot}
<style>
.legend { margin-bottom: -5px; }
figure code { font-size: 12px; }
.parent figure:first-child { padding-bottom: 5px; border-right: 1px solid #ccc; padding-right: ${pad}px; margin-right: ${pad}px; }
timePlot = Plot.plot({
marks: [
Plot.frame(),
Plot.lineY(time, {
x: "runs",
y: "time",
z: (d) => `${d.test}${d.variant}`,
stroke: "variant",
fx: "test"
}),
Plot.dot(time, {
x: "runs",
y: "time",
fill: "variant",
// r: 3.5,
fx: "test"
})
],
color,
fx: {
label: "Operation",
padding: 0.15,
tickFormat: (d) => d.toLowerCase()
},
x: { type: "log", label: "Runs →", ticks: 5 },
y: {
tickFormat: "s",
transform: (d) => d / 1e3,
zero: true,
label: "↑ Time (μs/op)"
},
grid: true,
height,
width: timeWidth,
marginLeft: 30,
caption: html`Time per rank and select operation. <code>rank0</code> (not shown) has the same runtime as <code>rank1</code>.`
})
html = htl.html
spacePlot = Plot.plot({
caption: "Space utilization per run.",
width: timePlot.scale("fx").bandwidth + 25 + 20, //
marginTop: 30,
marginBottom: 30,
marginLeft: 25,
marginRight: 20,
marks: [
Plot.frame(),
Plot.lineY(space, {
x: "size",
y: (d) => (d.vec1 + d.vec2) / d.size,
stroke: "variant"
}),
Plot.dotY(space, {
x: "size",
y: (d) => (d.vec1 + d.vec2) / d.size,
fill: "variant"
}),
,
],
color,
x: { type: "log", label: "Runs →", ticks: 5 },
y: { tickFormat: "s", zero: true, label: "↑ Space (bits/run)" },
grid: true,
height
})
// paper run; N = 2G
space17 = `variant,size,vec1,vec2
Orig,1000000,6803456,6800384
Orig,1637890,10384128,10382656
Orig,2682700,16095232,16093952
Orig,4393970,25027584,25020736
Orig,7196860,37957440,37961536
Orig,11787690,58007360,57997888
Orig,19306980,88792384,88799616
Orig,31622780,136529728,136519680
Orig,51794750,199375424,199374592
Orig,84834290,297957824,297933120
Orig,138949550,446142912,446154432
Orig,227584590,633709888,633728256
Orig,372759370,906872832,906872448
Orig,610540230,1290665152,1290692800
Orig,1000000000,1733400192,1733401664
New,1000000,6803456,7301952
New,1637890,10384128,11202304
New,2682700,16095232,17435904
New,4393970,25027584,27221184
New,7196860,37957440,41557888
New,11787690,58007360,63896384
New,19306980,88792384,98449536
New,31622780,136529728,152336128
New,51794750,199375424,225272320
New,84834290,297957824,340362560
New,138949550,446142912,515623424
New,227584590,633709888,747511424
New,372759370,906872832,1093252288
New,610540230,1290665152,1595949120
New,1000000000,1733400192,2335207616
`
Plot.version
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.
