The avatar for @iopsystems
IOP Systems
Unlisted
Edited
Apr 17, 2024
1 star
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
slo = ({ value: 0.9, title: "0.9 (P90)" })
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
subplot_height = 160
Insert cell
subplot_width = 280
Insert cell
quantile_options_single = ({
...quantile_options,
width: subplot_width,
height: subplot_height,
facetAnchor: "right",
marginRight: 10,
fy: {
padding: 0.2,
margin: 10,
label: null
}
})
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
histo_chart_options_base = ({
...histo_options,
color_palette: gray,
tip: true
})
Insert cell
service_histo_options = ({
...histo_options,
style: "font-size: 12px;",
width: subplot_width,
height: subplot_height,
color_palette: use_color ? colors : gray,
color_domain: orig_thresholds,
warningline: 1.6,
tip: false
})
Insert cell
plot_histo = (samples, chart_options = histo_options, quantile = null) =>
Plot.plot({
className: "chart",
marks: [
Plot.frame(),
Plot.rect(samples, {
y1: "latency_min",
y2: "latency_max",
x1: "quantile_min",
x2: "quantile_max",
stroke: "latency_max",
fill: "latency_max",
fillOpacity: fillOpacity
//tip: true,
//channels: { "bin index": Plot.indexOf }
}),
chart_options.tip
? Plot.text(
samples,
Plot.pointerX({
py: (d) => (d.latency_min + d.latency_max) / 2,
px: (d) => (d.quantile_min + d.quantile_max) / 2,
dy: -3 * text_fontsize - 2,
frameAnchor: "top-right",
fontVariant: "tabular-nums",
fontSize: text_fontsize,
text: (d) =>
[
`Latency Range (seconds): (${d.latency_min.toFixed(
3
)} - ${d.latency_max.toFixed(3)}]`,
`Quantile Range: (${d.quantile_min.toFixed(
4
)} - ${d.quantile_max.toFixed(4)}]`,
`Sample Counts: ${d.count}`
].join("\n")
})
)
: null,
chart_options.tip
? Plot.crosshairX(samples, {
y: (d) => (d.latency_min + d.latency_max) / 2,
x: (d) => (d.quantile_min + d.quantile_max) / 2,
ruleStrokeWidth: 1,
ruleStrokeOpacity: 0.8,
color: "teal"
})
: null,
chart_options.tip
? Plot.rect(
samples,
Plot.pointerX({
y1: "latency_min",
y2: "latency_max",
x1: "quantile_min",
x2: "quantile_max",
stroke: "blue",
strokeWidth: 0.5
})
)
: null,
use_warningline && chart_options.warningline != null
? Plot.ruleY([chart_options.warningline], {
stroke: "rgb(221, 64, 48)",
text: String(chart_options.warningline),
title: () => "Warning line"
})
: null,
use_warningline && chart_options.warningline != null
? Plot.tip([chart_options.warningline], {
x: 0,
y: (d) => d,
anchor: "right",
stroke: "rgb(221, 64, 48)",
title: (d) => String(d),
textPadding: 3
})
: null,
quantile == null
? null
: Plot.ruleX([quantile.value], {
stroke: "#0172ad",
text: quantile.title
//title: () => quantile.title
}),
quantile == null
? null
: Plot.tip([quantile], {
title: (d) => d.title,
x: (d) => d.value,
y: 0,
stroke: "#0172ad",
anchor: "top",
textPadding: 3
}),

Plot.gridX({ interval: 0.1, label: null, strokeOpacity: gridOpacity }),
Plot.gridY({ label: null, strokeOpacity: gridOpacity })
],
...chart_options,
marginTop: chart_options.tip ? 3 * text_fontsize + 4 : text_fontsize + 4,
color: {
range: chart_options.color_palette,
//range: pattern_range,
type: "threshold",
domain: chart_options.color_domain
}
})
Insert cell
Insert cell
Insert cell
random_cdf_samples = random_quantiles(n_cdf_sample)
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
plot_width = 600
Insert cell
plot_height = 400
Insert cell
text_fontsize = 14
Insert cell
Insert cell
Insert cell
legend_orig()
Insert cell
Insert cell
Insert cell
swatches(color_tableau10)
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
cdf_uniform = (x) => k * x + m
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
tandem_width = 850
Insert cell
Insert cell
Insert cell
Insert cell
embedded = document.body.classList.contains("embed")
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell

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.
Learn more