Probability Playground

Way back in 2018, I was a graduate student working toward an MA in biostatistics at the University at Buffalo. As with most students studying statistics, the first class introduced several special probability distributions we hadn’t seen before. There were a lot of algebra and formulas involved. We spent a lot of time on proofs of means and variances and analyzing how distributions were related. As someone who previously taught math at the University at Buffalo for several years, I could ‘do the math’ and work with these distributions algebraically by the end of the class. What I didn’t yet have was an intuitive feel for many of them.

There are hundreds of websites about probability distributions. However, most are essentially ‘books on the web,’ with descriptions, examples, and sometimes several graphs on the same set of axes. The majority don’t have any kind of interactivity, while the few that do often have limited editing capabilities and don’t include relationships between distributions.

I was looking for something different. I wanted to be able to change the distribution parameters and see the density or mass graph dynamically update. If one distribution was a limiting case of another, I wanted to see how they converged. If a distribution arose because of some data-generating process, I wanted to see that process in action. So, as an educator with a background in software engineering and time on my hands, the ‘obvious’ thing was to build the kind of website I wanted to see. Additionally, the qualifying exams were coming up, and what better way to learn than to teach?

Designing an Interactive Website

Broad principles were used in designing the Probability Playground website. For a start, everything had to fit on one page, at least on larger screens. Users don’t like to scroll to find information, and it’s much easier to take in everything at a single glance. The website also had to be completely dynamic and interactive—whenever any variable changed, the change was immediately propagated to all dependent variables, graphs, and animations. The interface had to be intuitive, using standard elements to provide a consistent look and feel that worked across multiple devices. Options for navigation and control had to be immediately visible and accessible using as few user actions as possible. Finally, a single unified framework that encompassed all univariate probability distributions would ensure that, once a user interacted with one distribution, they would know how to interact with them all.

Relationships Are Important

Rather than treating the relationships between distributions as secondary, they play a central role in Probability Playground. From the beginning, I envisaged having graphs for both a main and a related distribution side-by-side, with any changes made to the main distribution propagating to the related one. Building this in from the start meant all kinds of relationships—special cases, transformations, limits—were dealt with within a single framework. Users can see how distributions converge to their limiting cases; how the probability mass function of a special case such as the geometric compares to the more general negative binomial; and how the shapes of sampling distributions such as the chi-squared, F, or T change with sample size.

The map page serves as both a way to navigate the website and a graphical description of how distributions are related. Color is used to categorize distributions based on the similarity of their data-generating process. For example, the binomial, beta-binomial, hypergeometric, and Poisson distributions all involve counting discrete events and are grouped in the “counting” class. This was a later enhancement, with the distributions originally arranged to minimize the number of lines that cross. However, when color was added, the distributions already grouped together spatially under this categorization system, suggesting this is a natural way to classify them. Links are also classified and color-coded as special cases, transformations, limiting cases, statistics (those based on a statistic calculated from a sample), and statistic limits (the limiting case of a statistic).

An Interactive Tool for Exploration

The website was designed as an interactive tool that allows students to explore the 29 most commonly encountered distributions in probability theory and statistics courses. It can also be used as a teaching aid in classes where these distributions are introduced.

Probability Playground provides a wide range of functionality, with several unique features to support interactive exploration. Examples illustrating the range of shapes distributions take can be dynamically loaded by selecting them, resulting in an animated transition to the new parameter values. Parameters can be changed using either the text boxes above the graph or the sliders to the right. This allows students to either graph the pdf or pmf for specific parameter values or see how they change smoothly as parameters vary.

Distribution means and variances can also be independently edited, with an inverse mapping performed back to the parameter values. This can be done using either the slider below the graph (which shows the mean plus and minus one standard deviation) or by dragging and zooming directly on the graph. This is particularly useful when visualizing convergence to limiting cases, as the mean can be independently held constant while the variance is decreased.

The website also provides the option to choose between fixed or automatically calculated axis ranges. These are designed to display nearly all the probability mass on the graph in a visually intuitive fashion across a wide set of parameters.

Formulas for calculating the ranges for distributions with bounded, partially bounded, and unbounded x-axes were developed to ensure they are consistent across relationships.

Four views of each distribution are available: the pdf/pmf graph; cumulative distribution function; a visualization of the data-generating process underlying each distribution; and an animated simulation of this process. Visual representations of processes such as the Bernoulli or Poisson are consistent across the website, enabling the similarities between distributions based on these processes to be seen. Video-style controls allow simulations to be paused, run, reset, or stepped through one update at a time. A histogram below the simulation accumulates results, enabling students to see how the shape of a pdf or pmf arises from the data-generating process.

Lastly, to add mathematical rigor, more than 150 proofs are included for distribution means, variance, and relationships. These are accessed by selecting the formula or relationship.

Designed with Accessibility in Mind

Several months of work went into ensuring Probability Playground is accessible to users with disabilities. A wide range of improvements were made by following the Web Content Accessibility Guidelines of the World Wide Web Consortium. These ensure as many users as possible can perceive, operate, and understand the website with or without the use of assistive technologies.

To assist users in perceiving the website, larger and more legible sans-serif fonts were used, coded in such a way that font sizes can be controlled through web browsers. Contrast was enhanced for users with reduced visual acuity, and a color-blind friendly palette was used. Mathematical expressions and characters were coded to be accessible to screen readers, and all website elements were labeled to be navigable by users of these technologies.

Operating a website often presents difficulties for users with reduced motor control. Large buttons and icons make finding a target with a mouse easier, while the full range of functionality is also available using a keyboard. Extensive use of accessible rich internet application roles and attributes also makes the names and purpose of all controls explicit, so they can be accessed and controlled using speech recognition software.

A further advantage of designing for accessibility is it makes for a better experience for all users. A website that is well laid out with larger fonts and buttons is more accessible and understandable to everyone. Users with “temporary disabilities” such as injury, lost reading glasses, or bright sunlight can also find themselves needing to perceive or operate a website in a way they normally don’t. I found this out the hard way last winter, when I was stuck in Buffalo for two days during a snowstorm without my reading glasses. I found I couldn’t increase the font size to read my own website! Needless to say, this was one of the first issues I addressed.

Probability Playground has evolved from its earliest days as a personal project into a robust, extensive, and accessible resource for visually illustrating probability distributions and their relationships. It has been tested for compatibility with all major operating systems, web browsers, and devices, offering an off-the-shelf solution for educators looking to incorporate interactive and exploratory learning into their classrooms.