Published
Edited
Apr 4, 2022
7 stars
AWS HTTP Status DashboardIntegration Test DurationIntegration Test FlakinessAWS S3 API StarterAWS EC2 API StarterVisualizing Open-Source Code, Contributions & CommunitiesMost Popular Programming Languages, 2004–2021DataViz Dashboards for DevelopersVideo - How Data Visualization Affects Developer Practices“Yes And”: Collaboration for software developersHierarchical edge bundling IINotebook visualizerZoomable sunburstMobile App Breaches, Data Leaks, and Malware TimelineChat application with Firebase on Observable (Twitch)Mobile Games Data VisualizationHow to make a Twitter BlueSky BotSoundcloud Reactive Audio Visualizer Music Video Generator3D apps overviewQuery, Process and Visualize Data Stream via a Functional Pipeline approachBright Sky (Better Weather App)How to build a Teachable Machine with TensorFlow.jsRidiculously Rapid Software-as-a-Service (SaaS) development with Observable, Firebase and Stripe
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])
]
})
One platform to build and deploy the best data apps
Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.