viewof sigma_1 = setSigma()
md`#### Imports`
import {slider, button} from "@jashkenas/inputs"
d3 = require("d3@5")
Plotly = require("https://cdn.plot.ly/plotly-latest.min.js")
math = require("https://cdnjs.cloudflare.com/ajax/libs/mathjs/5.4.0/math.js")
_ = require("underscore")
import {toc} from "@bluprince13/toc/2"
stdlib = require("https://unpkg.com/@stdlib/stdlib@0.0.32/dist/stdlib-flat.min.js")
// https://github.com/stdlib-js/stdlib/tree/develop/lib/node_modules/%40stdlib/stats/base/dists/normal/pdf
pdf = stdlib.base.dists.normal.pdf
md`#### Defaults`
muMin = -10
muMax = 10
muDefault = 0
sigmaMin = 0
sigmaMax = 10
sigmaDefault = 5
rangeVarMean = [muMin - sigmaMax, muMax + sigmaMax]
range = [-sigmaMax, sigmaMax]
nMin = 3
nMax = 100
nDefault = 10
numberOfSamplesDefault = 10
xText = "observations (x)"
muText = "pop mean (μ)"
sigmaText = "pop std dev (σ)"
sampleText = "sample (i)"
meanText = "sample mean (x̅)"
sText = "sample std dev (s)"
nText = "sample size (n)"
NText = "population size (N)"
numberOfSamplesText = "no. of samples"
stdErrorSigmaText = "std error (σ<sub>x̅</sub>)"
stdErrorSText = "std error (s<sub>x̅</sub>)"
probabilityDensityText = "Probability Density Function (PDF)"
frequencyText = "frequency (f)"
scoreText = "score"
meanTex = `\\textcolor{red}{\\overline{x}}`
sigmaTex = "\\textcolor{green}{\\sigma}"
muTex = "\\textcolor{green}{\\mu}"
sTex = "\\textcolor{red}{s}"
nTex = "\\textcolor{red}{n}"
stdErrorSigmaTex = "\\textcolor{green}{{\\sigma_{\\overline{x}}}}"
stdErrorSTex = "\\textcolor{red}{{s_{\\overline{x}}}}"
NTex = "\\textcolor{green}{N}"
md`#### Slider generators`
setMu = () =>
slider({
min: muMin,
max: muMax,
value: muDefault,
step: 0.1,
description: muText
})
setSigma = () =>
slider({
min: sigmaMin,
max: sigmaMax,
value: sigmaDefault,
step: 0.1,
description: sigmaText
})
setn = () =>
slider({
min: nMin,
max: nMax,
value: nDefault,
step: 1,
description: nText
})
setNumberOfSamples = () =>
slider({
min: 3,
max: 100,
value: numberOfSamplesDefault,
step: 1,
description: "Number of samples"
})
setS = () =>
slider({
min: sigmaMin,
max: sigmaMax,
value: sigmaDefault,
step: 0.1,
description: sText
})
setNumberOfStdDev = () =>
slider({
min: 1,
max: 3,
value: 1,
step: 1,
description: "Number of standard deviations"
})
setPop = ({
name = "Inputs",
muInitial = muDefault,
sigmaInitial = sigmaDefault,
nInitial = nDefault
} = {}) => {
const form = html`
<form>
<h4> ${name} </h4>
<div>
<input type=range name="mu" min=${muMin} max=${muMax} step=0.1 value=${muInitial}>
<i>${muText} = </i>
<output id="muResult"></output>
</div>
<div>
<input type=range name="sigma" min=${sigmaMin} max=${sigmaMax} step=0.1 value=${sigmaInitial}>
<i>${sigmaText} = </i>
<output id="sigmaResult"></output>
</div>
<div>
<input type=range name="n" min=${nMin} max=${nMax} step=1 value=${nInitial}>
<i>${nText} = </i>
<output id="nResult"></output>
</div>
</form>`;
form.oninput = () => {
const mu = form.mu.valueAsNumber;
const sigma = form.sigma.valueAsNumber;
const n = form.n.valueAsNumber;
form.muResult.value = mu;
form.sigmaResult.value = sigma;
form.nResult.value = n;
return (form.value = { mu, sigma, n });
};
form.oninput();
return form;
}
md`#### Helper functions`
getTex = symbolTex => html`${tex`${symbolTex}`}`
getInfo = ({ mu, sigma, n, numberOfSamples }) => {
var info = [];
mu != undefined && info.push(`μ = ${mu}`);
sigma != undefined && info.push(`σ = ${sigma}`);
n != undefined && info.push(`n = ${n}`);
numberOfSamples != undefined &&
info.push(`${numberOfSamplesText} = ${numberOfSamples}`);
return info.join(", ");
}
getTraceErrorsEnvelope = ({
x,
y,
yError,
name,
axis,
fillcolor = lighterBlue,
linecolor = lightBlue
}) => {
const { xaxis, yaxis, showlegend } = getAxis(axis);
const polygonX = [...x, ...[...x].reverse()];
const polygonY = polygonX.map((item, idx) => {
if (idx < x.length) {
return y[item] + yError[item];
} else {
return y[item] - yError[item];
}
});
var traceStds = {
x: polygonX,
y: polygonY,
fill: "tozerox",
fillcolor,
line: { color: linecolor },
name: name,
type: "scatter",
xaxis,
yaxis,
showlegend
};
return traceStds;
}
getPDF = ({ mu, sigma, numberOfStdDev }) => {
const getX = (mu, sigma, numberOfStdDev) => {
const min = mu - numberOfStdDev * sigma;
const max = mu + numberOfStdDev * sigma;
const unit = (max - min) / 100;
return _.range(min, max, unit);
};
const x = getX(mu, sigma, numberOfStdDev);
const getPDFs = (x, mu, sigma) => pdf(x, mu, sigma);
const y = x.map(score => getPDFs(score, mu, sigma));
const fractionsOfPopulation = {
1: 68,
2: 95,
3: 99.7
};
const fractionOfPopulation = fractionsOfPopulation[numberOfStdDev];
return { x, y, fractionOfPopulation };
}
getAxis = axis => {
let xaxis, yaxis, showlegend;
if (axis == 1) {
xaxis = "x1";
yaxis = "y1";
showlegend = true;
} else if (axis == 2) {
xaxis = "x2";
yaxis = "y2";
showlegend = false;
}
// if axis is not defined, then it returns undefined which is required when there aren't subplots
return { xaxis, yaxis, showlegend };
}
md`#### Generate samples and traces`
getRandomNormal = () => {
const mu = mu_1;
const sigma = sigma_1;
const n = n_1;
return {
x: d3.range(n).map(() => d3.randomNormal(mu, sigma)()),
y: d3.range(n).map(() => d3.randomNormal(muDefault, sigmaDefault)())
};
}
getExperiment = function({
numberOfSamples = numberOfSamplesDefault,
n = nDefault,
mu = muDefault,
sigma = sigmaDefault
} = {}) {
var samples = Array.from({ length: numberOfSamples }, (x, i) => i);
var data = samples.map(() => {
return d3.range(n).map(() => d3.randomNormal(mu, sigma)());
});
var means = data.map(sample => math.mean(sample));
var stds = data.map(sample => math.std(sample));
var stdErrors = stds.map(std => std / math.sqrt(n));
var stdErrorPopulation = math.std(means);
var stdErrorsPopulation = Array(numberOfSamples).fill(stdErrorPopulation);
// Now let's flatten the data for plotting
const flatSamples = samples.reduce((res, current) => {
return res.concat(Array(n).fill(current));
}, []);
const flatData = [].concat.apply([], data);
const mus = Array(numberOfSamples).fill(mu);
const sigmas = Array(numberOfSamples).fill(sigma);
return {
numberOfSamples,
n,
samples,
flatSamples,
data,
flatData,
means,
stds,
stdErrors,
stdErrorPopulation,
stdErrorsPopulation,
mus,
sigmas
};
}
getTracesExperiment = ({
mu = muDefault,
sigma = sigmaDefault,
n = nDefault,
numberOfSamples = numberOfSamplesDefault,
axis = 1,
meanMode = "markers",
showMeanError = true
}) => {
const { xaxis, yaxis, showlegend } = getAxis(axis);
const experiment = getExperiment({ mu, n, sigma, numberOfSamples });
const trace_x = {
name: xText,
x: experiment.flatSamples,
y: experiment.flatData,
type: "scatter",
mode: "markers",
marker: {
color: "black"
},
xaxis,
yaxis,
showlegend
};
const trace_stdErrorsSample = getTraceStdErrorsEnvelopeExperiment({
experiment,
axis,
linecolor: lightRed,
fillcolor: lighterRed
});
var trace_mean = {
name: meanText,
x: experiment.samples,
y: experiment.means,
type: "scatter",
mode: meanMode,
marker: {
color: "red"
},
xaxis,
yaxis,
showlegend
};
if (showMeanError) {
trace_mean.error_y = {
type: "data",
array: experiment.stdErrors,
visible: true,
color: "red"
};
}
const trace_mu = {
name: muText,
x: experiment.samples,
y: experiment.mus,
type: "scatter",
mode: "lines",
marker: {
color: "green"
},
line: {
width: 3
},
xaxis,
yaxis,
showlegend
};
const trace_stdErrorPopulation = getTraceErrorsEnvelope({
x: experiment.samples,
y: experiment.mus,
yError: experiment.stdErrorsPopulation,
name: stdErrorSText,
fillcolor: lighterGreen,
linecolor: lightGreen
});
return {
trace_x,
trace_stdErrorsSample,
trace_mean,
trace_mu,
trace_stdErrorPopulation
};
}
getTraceStdErrorsEnvelopeExperiment = ({
experiment,
axis,
linecolor,
fillcolor
}) =>
getTraceErrorsEnvelope({
x: experiment.samples,
y: experiment.means,
yError: experiment.stdErrors,
name: stdErrorSText,
axis,
linecolor,
fillcolor
})
md`#### Colors`
lighterGreen = "rgba(0, 255, 0, 0.2)";
lightGreen = "rgba(0, 255, 0, 0.4)";
lighterBlue = "rgba(0, 199, 255, 0.2)"
lightBlue = "rgba(0, 199, 255, 0.4)"
lighterRed = "rgba(255, 0, 0, 0.2)"
lightRed = "rgba(255, 0, 0, 0.2)"
transparent = "rgba(0, 0, 0, 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.