<!DOCTYPE html>
<html>
<head>
<script data-require="d3@*" data-semver="4.0.0" src="https://d3js.org/d3.v4.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/jstat@latest/dist/jstat.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<main>
<h1>jstat distributions demo</h1>
<select id="select">
<option value="jStat.beta.pdf,x,alpha,beta">jStat.beta.pdf</option>
<option value="jStat.beta.cdf,x,alpha,beta">jStat.beta.cdf</option>
<option value="jStat.beta.inv,p,alpha,beta">jStat.beta.inv</option>
<option value="jStat.beta.mean,alpha,beta">jStat.beta.mean</option>
<option value="jStat.beta.median,alpha,beta">jStat.beta.median</option>
<option value="jStat.beta.mode,alpha,beta">jStat.beta.mode</option>
<option value="jStat.beta.sample,alpha,beta">jStat.beta.sample</option>
<option value="jStat.beta.variance,alpha,beta">jStat.beta.variance</option>
<option value="jStat.centralF.pdf,x,df1,df2">jStat.centralF.pdf</option>
<option value="jStat.centralF.cdf,x,df1,df2">jStat.centralF.cdf</option>
<option value="jStat.centralF.inv,p,df1,df2">jStat.centralF.inv</option>
<option value="jStat.centralF.mean,df1,df2">jStat.centralF.mean</option>
<option value="jStat.centralF.mode,df1,df2">jStat.centralF.mode</option>
<option value="jStat.centralF.sample,df1,df2">jStat.centralF.sample</option>
<option value="jStat.centralF.variance,df1,df2">jStat.centralF.variance</option>
<option value="jStat.cauchy.pdf,x,local,scale">jStat.cauchy.pdf</option>
<option value="jStat.cauchy.cdf,x,local,scale">jStat.cauchy.cdf</option>
<option value="jStat.cauchy.inv,p,local,scale">jStat.cauchy.inv</option>
<option value="jStat.cauchy.median,local,scale">jStat.cauchy.median</option>
<option value="jStat.cauchy.mode,local,scale">jStat.cauchy.mode</option>
<option value="jStat.cauchy.sample,local,scale">jStat.cauchy.sample</option>
<option value="jStat.cauchy.variance,local,scale">jStat.cauchy.variance</option>
<option value="jStat.chisquare.pdf,x,dof">jStat.chisquare.pdf</option>
<option value="jStat.chisquare.cdf,x,dof">jStat.chisquare.cdf</option>
<option value="jStat.chisquare.inv,p,dof">jStat.chisquare.inv</option>
<option value="jStat.chisquare.mean,dof">jStat.chisquare.mean</option>
<option value="jStat.chisquare.median,dof">jStat.chisquare.median</option>
<option value="jStat.chisquare.mode,dof">jStat.chisquare.mode</option>
<option value="jStat.chisquare.sample,dof">jStat.chisquare.sample</option>
<option value="jStat.chisquare.variance,dof">jStat.chisquare.variance</option>
<option value="jStat.exponential.pdf,x,rate">jStat.exponential.pdf</option>
<option value="jStat.exponential.cdf,x,rate">jStat.exponential.cdf</option>
<option value="jStat.exponential.inv,p,rate">jStat.exponential.inv</option>
<option value="jStat.exponential.mean,rate">jStat.exponential.mean</option>
<option value="jStat.exponential.median,rate">jStat.exponential.median</option>
<option value="jStat.exponential.mode,rate">jStat.exponential.mode</option>
<option value="jStat.exponential.sample,rate">jStat.exponential.sample</option>
<option value="jStat.exponential.variance,rate">jStat.exponential.variance</option>
<option value="jStat.gamma.pdf,x,shape,scale">jStat.gamma.pdf</option>
<option value="jStat.gamma.cdf,x,shape,scale">jStat.gamma.cdf</option>
<option value="jStat.gamma.inv,p,shape,scale">jStat.gamma.inv</option>
<option value="jStat.gamma.mean,shape,scale">jStat.gamma.mean</option>
<option value="jStat.gamma.mode,shape,scale">jStat.gamma.mode</option>
<option value="jStat.gamma.sample,shape,scale">jStat.gamma.sample</option>
<option value="jStat.gamma.variance,shape,scale">jStat.gamma.variance</option>
<option value="jStat.invgamma.pdf,x,shape,scale">jStat.invgamma.pdf</option>
<option value="jStat.invgamma.cdf,x,shape,scale">jStat.invgamma.cdf</option>
<option value="jStat.invgamma.inv,p,shape,scale">jStat.invgamma.inv</option>
<option value="jStat.invgamma.mean,shape,scale">jStat.invgamma.mean</option>
<option value="jStat.invgamma.mode,shape,scale">jStat.invgamma.mode</option>
<option value="jStat.invgamma.sample,shape,scale">jStat.invgamma.sample</option>
<option value="jStat.invgamma.variance,shape,scale">jStat.invgamma.variance</option>
<option value="jStat.kumaraswamy.pdf,x,a,b">jStat.kumaraswamy.pdf</option>
<option value="jStat.kumaraswamy.cdf,x,alpha,beta">jStat.kumaraswamy.cdf</option>
<option value="jStat.kumaraswamy.inv,p,alpha,beta">jStat.kumaraswamy.inv</option>
<option value="jStat.kumaraswamy.mean,alpha,beta">jStat.kumaraswamy.mean</option>
<option value="jStat.kumaraswamy.median,alpha,beta">jStat.kumaraswamy.median</option>
<option value="jStat.kumaraswamy.mode,alpha,beta">jStat.kumaraswamy.mode</option>
<option value="jStat.kumaraswamy.variance,alpha,beta">jStat.kumaraswamy.variance</option>
<option value="jStat.lognormal.pdf,x,mu,sigma">jStat.lognormal.pdf</option>
<option value="jStat.lognormal.cdf,x,mu,sigma">jStat.lognormal.cdf</option>
<option value="jStat.lognormal.inv,p,mu,sigma">jStat.lognormal.inv</option>
<option value="jStat.lognormal.mean,mu,sigma">jStat.lognormal.mean</option>
<option value="jStat.lognormal.median,mu,sigma">jStat.lognormal.median</option>
<option value="jStat.lognormal.mode,mu,sigma">jStat.lognormal.mode</option>
<option value="jStat.lognormal.sample,mu,sigma">jStat.lognormal.sample</option>
<option value="jStat.lognormal.variance,mu,sigma">jStat.lognormal.variance</option>
<option value="jStat.normal.pdf,x,mean,std">jStat.normal.pdf</option>
<option value="jStat.normal.cdf,x,mean,std">jStat.normal.cdf</option>
<option value="jStat.normal.inv,p,mean,std">jStat.normal.inv</option>
<option value="jStat.normal.mean,mean,std">jStat.normal.mean</option>
<option value="jStat.normal.median,mean,std">jStat.normal.median</option>
<option value="jStat.normal.mode,mean,std">jStat.normal.mode</option>
<option value="jStat.normal.sample,mean,std">jStat.normal.sample</option>
<option value="jStat.normal.variance,mean,std">jStat.normal.variance</option>
<option value="jStat.pareto.pdf,x,scale,shape">jStat.pareto.pdf</option>
<option value="jStat.pareto.inv,p,scale,shape">jStat.pareto.inv</option>
<option value="jStat.pareto.cdf,x,scale,shape">jStat.pareto.cdf</option>
<option value="jStat.pareto.mean,scale,shape">jStat.pareto.mean</option>
<option value="jStat.pareto.median,scale,shape">jStat.pareto.median</option>
<option value="jStat.pareto.mode,scale,shape">jStat.pareto.mode</option>
<option value="jStat.pareto.variance,scale,shape">jStat.pareto.variance</option>
<option value="jStat.studentt.pdf,x,dof">jStat.studentt.pdf</option>
<option value="jStat.studentt.cdf,x,dof">jStat.studentt.cdf</option>
<option value="jStat.studentt.inv,p,dof">jStat.studentt.inv</option>
<option value="jStat.studentt.mean,dof">jStat.studentt.mean</option>
<option value="jStat.studentt.median,dof">jStat.studentt.median</option>
<option value="jStat.studentt.mode,dof">jStat.studentt.mode</option>
<option value="jStat.studentt.sample,dof">jStat.studentt.sample</option>
<option value="jStat.studentt.variance,dof">jStat.studentt.variance</option>
<option value="jStat.tukey.cdf,q,nmeans,dof">jStat.tukey.cdf</option>
<option value="jStat.tukey.inv,p,nmeans,dof">jStat.tukey.inv</option>
<option value="jStat.weibull.pdf,x,scale,shape">jStat.weibull.pdf</option>
<option value="jStat.weibull.cdf,x,scale,shape">jStat.weibull.cdf</option>
<option value="jStat.weibull.inv,p,scale,shape">jStat.weibull.inv</option>
<option value="jStat.weibull.mean,scale,shape">jStat.weibull.mean</option>
<option value="jStat.weibull.median,scale,shape">jStat.weibull.median</option>
<option value="jStat.weibull.mode,scale,shape">jStat.weibull.mode</option>
<option value="jStat.weibull.sample,scale,shape">jStat.weibull.sample</option>
<option value="jStat.weibull.variance,scale,shape">jStat.weibull.variance</option>
<option value="jStat.uniform.pdf,x,a,b">jStat.uniform.pdf</option>
<option value="jStat.uniform.cdf,x,a,b">jStat.uniform.cdf</option>
<option value="jStat.uniform.inv,p,a,b)">jStat.uniform.inv</option>
<option value="jStat.uniform.mean,a,b">jStat.uniform.mean</option>
<option value="jStat.uniform.median,a,b">jStat.uniform.median</option>
<option value="jStat.uniform.mode,a,b">jStat.uniform.mode</option>
<option value="jStat.uniform.sample,a,b">jStat.uniform.sample</option>
<option value="jStat.uniform.variance,a,b">jStat.uniform.variance</option>
<option value="jStat.binomial.pdf,k,n,p">jStat.binomial.pdf</option>
<option value="jStat.binomial.cdf,k,n,p">jStat.binomial.cdf</option>
<option value="jStat.negbin.pdf,k,r,p">jStat.negbin.pdf</option>
<option value="jStat.negbin.cdf,x,r,p">jStat.negbin.cdf</option>
<option value="jStat.hypgeom.pdf,k,N,m,n">jStat.hypgeom.pdf</option>
<option value="jStat.hypgeom.cdf,x,N,m,n">jStat.hypgeom.cdf</option>
<option value="jStat.poisson.pdf,k,l">jStat.poisson.pdf</option>
<option value="jStat.poisson.cdf,x,l">jStat.poisson.cdf</option>
<option value="jStat.triangular.pdf,x,a,b,c">jStat.triangular.pdf</option>
<option value="jStat.triangular.cdf,x,a,b,c">jStat.triangular.cdf</option>
<option value="jStat.triangular.mean,a,b,c">jStat.triangular.mean</option>
<option value="jStat.triangular.median,a,b,c">jStat.triangular.median</option>
<option value="jStat.triangular.mode,a,b,c">jStat.triangular.mode</option>
<option value="jStat.triangular.sample,a,b,c">jStat.triangular.sample</option>
<option value="jStat.triangular.variance,a,b,c">jStat.triangular.variance</option>
<option value="jStat.arcsine.pdf,x,a,b">jStat.arcsine.pdf</option>
<option value="jStat.arcsine.cdf,x,a,b">jStat.arcsine.cdf</option>
<option value="jStat.arcsine.inv,p,a,b)">jStat.arcsine.inv</option>
<option value="jStat.arcsine.mean,a,b">jStat.arcsine.mean</option>
<option value="jStat.arcsine.median,a,b">jStat.arcsine.median</option>
<option value="jStat.arcsine.mode,a,b">jStat.arcsine.mode</option>
<option value="jStat.arcsine.sample,a,b">jStat.arcsine.sample</option>
<option value="jStat.arcsine.variance,a,b">jStat.arcsine.variance</option>
</select>
<div>
<div>
<input id="x1" value="-10" type="number"> < x < <input id="x2" value="10" type="number">
</div>
<div id="inputs"></div>
</div>
<svg width="500" height="500"></svg>
</main>
<script>
select.value = "jStat.beta.pdf,x,alpha,beta";
select.onchange = setupForm;
setupForm();
window.fn = () => {};
function setupForm() {
const [fnName, x, ...rest] = select.value.split(",");
inputs.innerHTML = rest.map(s => `
<div>
<label>${s}</label>
<input id="${s}" type="number" value="0">
</div>
`).join("") + `<button onclick="plot()">Go!</button>`;
eval(`window.fn = x => ${fnName}(x, ${rest.map(s => `${s}.valueAsNumber`).join()})`);
}
const svg = d3.select("svg");
const margin = { top: 20, right: 20, bottom: 20, left: 20 };
const width = +svg.attr("width") - margin.left - margin.right;
const height = +svg.attr("height") - margin.top - margin.bottom;
const g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")");
const x = d3.scaleLinear().rangeRound([0, width]);
const y = d3.scaleLinear().rangeRound([height, 0]);
const line = d3.line().x(d => x(d.x)).y(d => y(d.y));
function plot() {
g.selectAll("*").remove();
const xs = d3.range(x1.valueAsNumber, x2.valueAsNumber, 0.01);
const data = xs.map(x => {
console.log(x, fn(x));
return { x, y: fn(x) };
});
x.domain(d3.extent(data, d => d.x));
y.domain(d3.extent(data, d => d.y));
g.append("g")
.attr("transform", `translate(0,${height})`)
.call(d3.axisBottom(x))
.select(".domain")
.remove();
g.append("path")
.datum(data)
.attr("fill", "none")
.attr("stroke", "steelblue")
.attr("stroke-linejoin", "round")
.attr("stroke-linecap", "round")
.attr("stroke-width", 1.5)
.attr("d", line);
}
</script>
</body>
</html>
// Code goes here
/* Styles go here */