Public
Edited
Jun 29, 2023
{
const checkTable = [],
{ df1, df2, alpha: targetAlpha } = fDistributionTableSetup,
alpha = [...new Array(100)].map((_, i) => i * 0.001);
alpha.map((alpha) => {
checkTable.push({
alpha,
fValue: statsBaseDistsF.quantile(1 - alpha, df1, df2),
df1,
df2
});
});
return htl.html`
<h2>${
checkTable
.filter((d) => d.alpha === targetAlpha)
.map((d) => pfString(df1, df2, d.alpha, d.fValue))[0]
}</h2>
<div style= "display: flex">
${[
// -----------------------------------------------------
// Plot the check curve
Plot.plot({
x: { nice: true },
y: { nice: true },
grid: true,
color: { nice: true, legend: true, domain: [-1, 5] },
marks: [
Plot.dot(checkTable, { x: "alpha", y: "fValue", fill: "fValue" }),
Plot.ruleX([targetAlpha]),
Plot.text(
checkTable.filter((d) => d.alpha === targetAlpha),
{
x: "alpha",
y: "fValue",
text: (d) => pfString(df1, df2, d.alpha, d.fValue),
lineAnchor: "bottom",
frameAnchor: "bottom-left",
dx: 20,
dy: -20,
fill: "black",
stroke: "fValue",
fontSize: 20
}
),
Plot.frame()
]
}),
// -----------------------------------------------------
// Plot the grid
Plot.plot({
// height: 600,
x: { nice: true },
y: { nice: true },
grid: true,
color: {
nice: true,
legend: true,
// scheme: "Inferno",
domain: [-1, 5]
},
marks: [
Plot.cell(table, { x: "df2", y: "df1", fill: "fValue" }),
Plot.ruleX([df2 - 0.5, df2 + 0.5]),
Plot.ruleY([df1 - 0.5, df1 + 0.5]),
Plot.frame()
]
})
]}
</div>
`;
return table;
}
htl.html`
<div style="display: flex">
${[
Plot.plot({
height: 600,
x: { nice: true },
y: { nice: true },
grid: true,
color: { nice: true, legend: true },
marks: [
Plot.line(data, {
x: "f",
y: "pdf",
fy: "df1",
stroke: "df2" //(d) => [d.df1, d.df2].join("-")
}),
Plot.frame()
]
}),
Plot.plot({
height: 600,
x: { nice: true },
y: { nice: true },
grid: true,
color: { nice: true, legend: true, scheme: "Cividis" },
marks: [
Plot.cell(data, {
x: "f",
y: "df2",
fy: "df1",
fill: "pdf"
}),
Plot.frame()
]
})
]}
</div>
`
data
Type Table, then Shift-Enter. Ctrl-space for more options.
data = {
const data = [];
var dfs = [...dfsGenerator()];
for (let f = 0.01; f < 3; f += 0.01) {
dfs.map(({ df1, df2 }) => {
data.push({
f,
df1,
df2,
pdf: statsBaseDistsF.pdf(f, df1, df2),
cdf: statsBaseDistsF.cdf(f, df1, df2),
k: statsBaseDistsF.kurtosis(df1, df2)
});
});
}
return data;
}
/**
* Generate df1 and df2,
* the generation follows the setup as linear interval with [start, end, step]
*/
function* dfsGenerator(df1Setup = [3, 20, 3], df2Setup = [5, 100, 10]) {
for (let df1 = df1Setup[0]; df1 < df1Setup[1]; df1 += df1Setup[2]) {
for (let df2 = df2Setup[0]; df2 < df2Setup[1]; df2 += df2Setup[2]) {
yield { df1, df2 };
}
}
}
statsBaseDistsF = require("https://cdn.jsdelivr.net/gh/stdlib-js/stats-base-dists-f@umd/browser.js")
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.
