Skip to content

Instantly share code, notes, and snippets.

View sathomas's full-sized avatar

Stephen A Thomas sathomas

View GitHub Profile
// ### Ready
//
// This module provides a convenient way to register
// a callback when the document is ready. The callback
// is called immediately if the document is ready
// when the module's API is called.
//
// > This really shouldn't be necessary as a library
// module, but IE10 and below have a nasty bug in how
// they report `document.readyState`. The workaround
@sathomas
sathomas / README.md
Last active August 27, 2016 23:11
Variations on a Random Walk

Can seemingly trivial differences at a small scale have noticeable effects at larger scales? Certainly, as we've learned from chaos theory. This visualization considers another perspective on the same question. It shows the results of three variations of a random walk. The difference between the variations might seem insignificant, yet the resulting large-scale behavior is not at all the same.

@sathomas
sathomas / README.md
Last active March 23, 2021 13:04
Visualizing Bayes, Markov Chain Monte Carlo

Thanks to the excellent bayes.js library from Rasmus Bååth it's now possible to experiment with Bayesian statistics in JavaScript. We'll take advantage of that library in this series of posts, which demonstrate Bayesian statistics visually for anyone with a web browser.

This first post covers Markov Chain Monte Carlo (MCMC), algorithms which are fundamental to modern Bayesian analysis. MCMC is also critical to many machine learning applications. Since this is the first post, though, we'll start with a brief introduction to Bayesian statistics.

@sathomas
sathomas / README.md
Last active May 9, 2021 04:37
A Material Design Gauge in Pure CSS/HTML

As a change of pace from complex visualizations, here's simple Material Design gauge control implemented in pure CSS/HTML. The implementation includes an optional JavaScript component to change the gauge value dynamically. If you'd like to use the gauge on your web pages (it's open source), you can download it from GitHub, where you'll also find documentation on how to use it. In this post we'll walk through the implementation to understand how it works.

@sathomas
sathomas / README.md
Last active September 6, 2015 18:08
Automated Visualization Testing

Many smart folks have been writing about data visualization lately, and there are lots of great resources available on the internet and in your favorite book store. There is one aspect of data visualization, however, that doesn’t seem to get much love—testing. That’s a shame, because effective testing, especially when it’s part of the initial planning for a visualization, is one of the best ways of ensuring high quality results.

@sathomas
sathomas / README.md
Last active August 29, 2015 14:16
Mathematical Models of HIV, Part 2

In part 1 we looked at a basic mathematical model for HIV within a human host. This visualization continues that discussion by looking at one factor that limits the initial proliferation of the virus.

@sathomas
sathomas / README.md
Last active August 29, 2015 14:16
Mathematical Models of HIV, Part 1

Mathematical models of disease often help us understand the epidemiology of disease—how a disease epidemic spreads within a population and how measures such as vaccination can control that spread. This post, however, considers the virology and immunology of HIV rather than its epidemiology. The discussion that follows focuses on the actions of HIV within a single human host.

@sathomas
sathomas / README.md
Last active January 10, 2020 23:37
Visualizing Differential Equations, III

The experiment in visualizing differential equations graduates to second order systems with this example. The graph is based on a phase plane diagram for an autonomous system in x and y. Each line is a solution to the system, and the animation illustrates how each solution evolves in time.

Note: The speed of the animation does not represent the speed as which each solution evolves. Faithfully reproducing the solution velocities would require a more computationally intensive animation technique that would make the visualization impractical in typical web browsers.

The default system has a stable equilibrium point at (0,0), so points near the origin spiral in towards (0,0). All solutions except the one that starts at (0,0) take an infinite amount of time to get there, however. The system also has an equilibrium on the unit circle (a circle of radius 1). That equilibrium is unstable, though. Solutions that start outside the unit circle spiral off to infin

@sathomas
sathomas / README.md
Last active August 29, 2015 14:13
Visualizing Differential Equations, II

Continuing an experiment in visualizing differential equations based on the traditional phase line. (See also: Part I.)

The chart shows a set of solutions to a specific differential equation in a single variable. Initially, the equation is ẋ = 1 - x². The horizontal axis represents increasing time, and the vertical axis represents values of the variable x. Each line on the chart shows the evolution of x for a specific initial value x(0). Equilibrium points, where x(t) is constant for all time, are colored red. The controls permit adjustment of the range of initial values shown, as well as the number of lines and the time increment for the horizontal axis.

Feel free to experiment with different equations and parameters. The function for should be a valid JavaScript expression. There’s no error checking, though, so be careful.

This series of visualizations continues with [p

@sathomas
sathomas / README.md
Last active August 29, 2015 14:13
Visualizing Differential Equations, I

An experiment in visualizing differential equations based on the traditional phase line. The chart shows the qualitative behavior of a specific differential equation in a single variable. Initially, the equation is ẋ = 1 - x². The chart represents the value of across a range of values (initially from -2 to -2) as vertical lines of fixed length. The color and tilt of the lines vary based on . Positive values of tilt to the right and are colored green. Negative values of tilt to the left and are colored blue. The magnitude of determines the degree of tilt, with larger values shown with greater tilt. Lines corresponding to equilibrium points, where ẋ = 0, are colored red.

The chart exposes a physical interpretation of the equation, with x(t) representing the position of a particle in ℜ. The tilt of the line at any point indicates the direction that the particle will move from that point. The angle of the tilt represents h