<!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"> &lt; x &lt; <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 */