Published
Edited
Apr 4, 2022
7 stars
Plot: Stacked bin dotsWaffle ChartRenko ChartHow to attach a plot to a DOM elementIrregular Bar ChartLog-scale histogramIrregular bins histogramPlot HyperboloidHappy anniversary, Project Gutenberg!ROC curveELD ViewerMatrix diagramK-means binningHello, Open MeteoRoad traffic under COVID restrictions (France)How many books was I reading?Metbrewer color schemesIrregular scalesTopological subsamplingVariants du SARS-CoV-2 en FranceVariants of SARS-Cov-2 in EuropeVariable tick colorMinimalist dodge plotAssemblée nationale 2017-2022AoC 12: shortest path under constraintsHow fast does walk-on-spheres converge?
Database Outage Plot
// fake time of the postgres fix 🪄
tfix = new Date(Date.UTC(2021, 4, 19, 21))
simulated = {
const random = d3.randomPareto(1);
// start date
let t0 = new Date(Date.UTC(2021, 4, 17));
// the interval between queries is random and depends on the time of the day
const density = (t) => 0.1 + Math.cos(1 + (t.getHours() / 24) * Math.PI) ** 2;
// query duration is random, but the denser the number of queries, the slower it gets
// after the fix, it becomes immediately much better: the base time is reduced from 3s to 10ms
// and the lag is 100x better
const duration = (t) =>
(t < tfix ? 0.1 : 0.1) +
Math.min(15 * density(t) * (t < tfix ? 1 : 0.01) * (random() - 1), 30);
return Array.from({ length: 14000 }, () => ({
time: (t0 = new Date(+t0 + 12000 * d3.randomExponential(density(t0))())),
duration: duration(t0)
}));
}
Plot.dot(simulated, { x: "time", y: "duration", r: 1, fill: "black" }).plot({
marks: [Plot.tickX([tfix], { stroke: "brown" }), Plot.tickY([0])]
})
Plot.plot({
color: { scheme: "ylgnbu", type: "sqrt" },
marks: [
Plot.rect(
simulated,
Plot.bin(
{ fill: "count" },
{ x: "time", y: "duration", r: 1, thresholds: 50 }
)
),
Plot.lineY(
simulated,
Plot.binX(
{ y: "median" },
{ x: "time", y: "duration", r: 1, thresholds: 50, curve: "step" }
)
),
Plot.tickX([tfix], { stroke: "brown" }),
Plot.tickY([0])
]
})
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.
