data = [
{stat: "average", new: 1, old: 8},
{stat: "maximum", new: 14, old: 43},
{stat: "p50", new: 0.1, old: 7},
{stat: "p90", new: 4.9, old: 14.9},
{stat: "p95", new: 6, old: 22},
]
tidy = data.flatMap((d) => [
{ stat: d.stat, series: "old", time: d.old },
{ stat: d.stat, series: "new", time: d.new }
])
Plot.plot({
x: { grid: true, label: "Time (seconds)" },
y: { label: "Metric", axis: null },
color: { legend: true },
facet: {
data: tidy,
y: "stat",
marginLeft: 60
},
marks: [
Plot.barX(tidy, {
x: "time",
y: "series",
fill: "series"
})
]
})
Plot.plot({
x: { grid: true, label: "Time (seconds)" },
y: { label: "Metric" },
marks: [
Plot.barX(data, { x: "new", y: "stat", fill: "#ccc" }),
Plot.ruleX([0]),
Plot.tickX(data, { x: "new", y: "stat", strokeWidth: 1.5 }),
Plot.arrow(data, { x1: "old", x2: "new", y: "stat", stroke: "red" }),
Plot.dot(data, { x: "old", y: "stat", fill: "red" })
]
})
Plot.plot({
x: { grid: true, label: "Time (seconds)" },
y: { label: "Metric", paddingInner: .45 },
color: { legend: true },
facet: {
marginLeft: 60
},
marks: [
Plot.barX(data, {
y: "stat",
x: "old",
fill: "#4e79a7",
insetTop: -4,
insetBottom: -3
}),
Plot.barX(data, {
y: "stat",
x: "new",
height: 5,
fill: "#cc5555",
dy: 0,
})
]
})
tidy1 = data.flatMap((d) => [
{ stat: d.stat, series: 'old', time: d.old, fill: '#4f79a7' },
{ stat: d.stat, series: 'new', time: d.new, fill: '#f18e2c' },
]);
Plot.plot({
x: { grid: true, label: 'Time (seconds)' },
y: { axis: null },
color: { legend: true },
facet: {
data: tidy1,
y: 'stat',
marginLeft: 60,
marginRight: 60,
label: 'Metric',
},
fy: {domain: ["average", "p50", "p90", "p95", "maximum"]},
marks: [
Plot.barX(tidy1, {
x: 'time',
y: 'series',
fill: 'fill',
}),
Plot.text(tidy1, {
y: 'series',
x: 'time',
text: 'time',
textAnchor: 'start',
dx: 10,
}),
],
});
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.
