Power Applet Visualization

Demonstrating parameters underlying statistical power using HTML, JS, and SVG elements (Instead of Java, as found here).

I've been working on an applet that visualizes the different parameters that affect statistical power when sampling populations. So far it's been a lot of generating custom SVGs / appending and deleting them according to statistics performed on the parameters input by the user. The rest of the application is built on d3.js, which has been especially helpful for implementing drag functionality and writing SVG shapes to the screen. Sliders to the right are based on jquery-ui library. Stats.js, a javascript statistical library, has been handy for calculating the z-score of α, and especially for generating the shape of the normal distributions based on user-entered mean/standard deviation.

  • mu0 = mean of the null population
  • mu1 = mean of the alternative population
  • σ = pooled standard deviation
  • d = normalized difference between the means
  • α = probability of a Type I error, one-tailed
  • β = probability of a Type II error (1-power)
  • Power = statistical power resulting from the above parameters
  • Next steps:
    • Build in functionality for sampling the populations, and rejecting/accepting null hypothesis accordingly (done!)
    • Calculate power (or required sample size, and change peaks accordingly), as the user is changing inputs. Power, β, and the rest of the parameters can be related to each other via the following formulas and a z-score table:
      \(n = {(Z_\alpha + Z_\beta)^2 \;\cdot\; 2\sigma^2 \over d^2}\), \(d = {\mu_0-\mu_1\over\sigma}\)
      \(Z_\beta\,\rightarrow\,\beta\)
      \(Power = 1\,-\,\beta\)