The end-to-end solution for building and hosting better data apps, dashboards, and reports.
Published unlisted
Edited
Aug 24, 2022
1 fork
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" },
marks: [
Plot.barX(data, {
y: "stat",
x: "old",
fill: "#4e79a7"
}),
Plot.barX(data, {
y: "stat",
x: "new",
height: 5,
fill: "#cc5555",
dy: 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.
