Normal Probability Bell Curve Tool

This interactive tool combines Vue.js for user inputs and probability calculations with Desmos graphing to visualize the normal distribution bell curve. Users enter a Z-score, and the app computes the cumulative probability using a custom Gaussian distribution library. Clicking “Update Graph” dynamically shades the area under the curve in Desmos, illustrating concepts like one-sided probabilities. The implementation focuses on JavaScript integration for real-time updates and Desmos’ API for embedding interactive math visualizations.

JavaScript Implementation

The app uses Vue for reactivity: inputs bind to data, updating probabilities instantly.

var app = new Vue({
  el: "#app-prob",
  data: {
    znot: 2,
    dist: gaussian(0,1)
  },
  methods: {
    updategraph: function(){
      let p = this.dist.cdf(this.znot);
      setExpress(-3, p);
    }
  }
});

A Gaussian library handles PDF/CDF calculations:

var Gaussian = function(mean, variance) {
  // Constructor with methods for pdf, cdf, etc.
};

This provides accurate stats without external deps.

Integrating Desmos for Interactivity

Desmos powers the graph, initialized with sliders and expressions:

var calculator123 = Desmos.Calculator(elt, {
  zoomButtons: true,
  expressions: true
});

The setExpress function updates LaTeX for the curve and shaded region:

function setExpress(x1b, x2b){
  calculator123.setExpressions([
    { id: 'graph1', latex: 'f(x)=e^{(-{(x-a)^2}/{b})}' },
    { id: 'graph4', latex: '0<y\\le f\\left(x\\right)\\left\\{x_1<x<x_2\\right\\}' }
  ]);
}

This shades from x1b to x2b, called on button click with computed probability.

Benefits of This Approach

Combining Vue’s simplicity with Desmos’ graphing creates engaging tools. Vue handles UI logic, Desmos renders math visually. Ideal for educational widgets, this setup allows custom graphs without building from scratch.

The focus was on seamless JS integration for interactive learning, making stats concepts tangible through code and visualization.