Jekyll2022-08-01T16:32:21+00:00https://sam.zhang.fyi/feed.xmlsamzhang111.github.ioThe illusion of predictability in common scientific visualizations2022-05-11T12:00:00+00:002022-05-11T12:00:00+00:00https://sam.zhang.fyi/2022/05/11/psup<p>See <a href="/html/psup/index.html">our interactive tutorial</a> or <a href="https://osf.io/preprints/socarxiv/5tcgs/">the paper</a>.</p>See our interactive tutorial or the paper.Elliptic curves and traveling wave solutions to the KdV equations2021-12-07T12:00:00+00:002021-12-07T12:00:00+00:00https://sam.zhang.fyi/2021/12/07/elliptic-kdv<p>See <a href="/html/elliptic-kdv/index.html">the full screen page.</a></p>See the full screen page.Bayesian inference for COVID-19 testing2021-10-12T12:00:00+00:002021-10-12T12:00:00+00:00https://sam.zhang.fyi/2021/10/12/covid<p>See <a href="https://github.com/samzhang111/seroprevalence-viz">source</a>.</p>See source.Ridge unfolding polytopes2021-10-12T12:00:00+00:002021-10-12T12:00:00+00:00https://sam.zhang.fyi/2021/10/12/unfolding<p>See <a href="/html/unfolding/index.html">the full screen page.</a></p>See the full screen page.Curve shortening2020-10-29T01:44:00+00:002020-10-29T01:44:00+00:00https://sam.zhang.fyi/2020/10/29/curve-shortening<div style="display: flex; width: 1020px; margin: 2em 0; justify-content:space-between; border: 3px solid black; border-radius: 30px">
<div id="control" style="flex:0 1 auto;width: 500px;height:500px;border-right: 3px solid black"></div>
<div id="curve-2d" style="flex:0 1 auto;width: 500px;height:500px;border: none;"></div>
</div>
<p><a href="/html/fullscreen/curve-shortening">Full screen version</a>.</p>
<p>Suppose you had a smooth curve $C(s, t)$ parameterized by arclength and time, and you decided to continuously deform $C$ through time analogously to the heat equation. That is, parts of the curve with high curvature are very “hot” and would like to flow toward the “cold” parts that have negative curvature. We set</p>
<p>\[\frac{\partial C}{\partial t} = \frac{\partial^2 C}{\partial^2 s} = \kappa n\]</p>
<p>where $\kappa$ is the curvature and $n$ is the unit normal vector to the curve, so that the curve is shortened, and parts of the curve with larger curvature are shortened more. This is called <a href="https://en.wikipedia.org/wiki/Curve-shortening_flow">curve shortening</a>, and it leads to deep areas of geometric analysis. One major result is the <a href="https://en.wikipedia.org/wiki/Curve-shortening_flow#Gage%E2%80%93Hamilton%E2%80%93Grayson_theorem">Gage-Hamilton-Grayson theorem</a>, which states that under the curve shortening flow, simple closed curves remain smoothly embedded without self-intersections until they become convex, after which they stay convex, before converging to a circle as the curve shrinks to a point.</p>
<p>But how do we implement curve shortening on a computer? Many discretizations have been proposed, and here we implement a particular algorithm proposed by <a href="https://www.jstor.org/stable/27642194?seq=1#metadata_info_tab_contents">Chow and Glickenstein (2007)</a>. The procedure is analogous to the continuous case, except since we have a polygon instead of a smooth curve, we do not have a “curvature” at any point. Instead, we approximate the normal vector for the vertex $x_{i, t}$ by setting</p>
<p>\[n_{i, t} = (x_{i+1, t} - x_i) + (x_{i-1, t} - x_{i, t})\]</p>
<p>and performing the discrete update step</p>
<p>\[x_{i, t+1} = x_{i, t} + \delta n_{i, t}\]</p>
<p>for some step size $\delta > 0$.</p>
<p>Do we have the equivalent of the Gage-Hamilton-Grayson theorem for this discrete curve shortening flow? Not in its entirety. Some results are known, such as that the curve shortens to a point, and it is asympototically an affine transformation of a regular polygon. But a key piece still unknown is whether a curve that starts without self-intersections will remain without self-intersections for each time step, for sufficiently small $\delta$.</p>
<p>In the visualization above, there are parameters to control $\delta$, the number of iterations, and the number of points on the polygon. I did not worry at all about numerical issues, as you might discover! The points on the polygon can of course be moved. The visualization on the right is actually an interactive three-dimensional figure shown with a top-down view. The temporal aspect of the curve-shortening flow is portrayed in color, but also in height, since one can consider the flow as slices in time of a higher dimensional object. I reparameterized the height to be spaced out in the earlier steps since the beginning steps of the algorithm are some of the more interesting. As for all the 3D stuff on this blog, the <a href="/html/fullscreen/curve-shortening">full screen version</a> is much more satisfying than the tiny figures above.</p>
<p>I was tempted into making this thanks to the beautiful pictures in <a href="https://press.princeton.edu/books/hardcover/9780691145532/discrete-and-computational-geometry">Discrete and Computational Geometry, by Satyan Devadoss and Joseph O’Rourke</a>.</p>A catastrophe machine2020-01-20T12:00:00+00:002020-01-20T12:00:00+00:00https://sam.zhang.fyi/2020/01/20/catastrophe-machine<p><a href="https://en.wikipedia.org/wiki/Catastrophe_theory">Catastrophe theory</a> was a popular branch of mathematics concerned with qualitative characterizations of ways that singularities relate to potential energy functions. The name “catastrophe theory” comes from how a continuous change in a parameter of a potential function can introduce a <em>discontinuous</em> jump in observed phenomena, and this can be catastrophic in certain cases, like with a buckling beam. I say the field “was” popular, rather than “is”, because it was a classic example of a field of applied mathematics that was overhyped, applied too widely without adequate attention toward scientific fundamentals, and the backlash all but killed it. However, there is some talk about it recently becoming popular again for chemical applications. (Hence why this blog post!)</p>
<p>Plus, the mathematics is indisputably elegant – that was never in doubt, even during the controversy around it – and one can develop a basic intuition for it using simple physical examples that are well-suited for a website like this. I’ve created an interactive “catastrophe machine” that exhibits the basic form of the “cusp” catastrophe. Imagine a wedge shaped like a parabola balancing on a table (see thick blue outline in left figure below). The parameter that we will alter continuously is its center of mass (green dot in figure; drag it around!), and the discontinuity comes in the wedge’s equilibrium resting position.</p>
<p>Move the center of mass to the center-top of the parabola, within the dotted cusp (called the <em>bifurcation set</em>). Notice that two local minima emerge on the potential function. As the center of mass crosses the bifurcation set, one of the local minima disappear. If that was the one that the parabola was resting in, then the parabola undergoes a dramatic change in behavior: a “catastrophe” as it’s been termed.</p>
<p>Note that in the visualization, the line representing the <em>ground</em> moves when the center of mass moves, rather than the parabola itself. I only drew the point corresponding to the global minimum - perhaps it would have been more accurate to include both. Also note that the right hand figure is interactive.</p>
<div style="display: flex; flex-wrap: wrap; width: 100%; margin: 3px auto; justify-content:space-between; border: 3px solid black; border-radius: 10px; overflow: hidden">
<div id="catastrophe-control" style="flex:1 0 auto; width: 20em; height: 30em; border-right: 3px solid black"></div>
<div id="catastrophe-surface" style="flex:1 0 auto; width: 20em; height: 30em; border: none;"></div>
</div>
<p><a href="/html/fullscreen/catastrophe">Full screen version</a>.</p>
<p>The right hand figure is the so-called <em>catastrophe surface</em> for this machine. For each possible center of gravity $(x, y)$ in the parabola, we give it z-coordinates for the critical points of the energy function, in other words, the zeros of the derivative of the potential energy function. That turns out to be a cubic polynomial in this case. The roots of a cubic polynomial vary continuously with the coefficients, and there can be one, two, or three roots. The catastrophe occurs when
the point must “jump” across the fold on the catastrophe surface.</p>
<p>Two accessible introductions to the subject for anyone who has taken multivariable calculus are <a href="https://www.amazon.com/Curves-Singularities-Geometrical-Introduction-Singularity/dp/0521429994">Curves and Singularities</a> by J.W. Bruce and P.J. Giblin; <a href="https://store.doverpublications.com/048669271x.html">Catastrophe Theory and its Applications</a> by Tim Poston and Ian Stewart. Bruce and Giblin analyze this particular catastrophe in detail in Chapter 1, which they call the Poston catastrophe machine. <a href="http://faculty.washington.edu/etsb/402W12/materials/Zahler_Sussman_claims_and_accomplishments_of_applied_catastrophe_nature_77.pdf">This critique</a> of catastrophe theory is among the more famous in mathematics. I think it still makes a great read, for the types of issues one encounters while doing modeling.</p>Catastrophe theory was a popular branch of mathematics concerned with qualitative characterizations of ways that singularities relate to potential energy functions. The name “catastrophe theory” comes from how a continuous change in a parameter of a potential function can introduce a discontinuous jump in observed phenomena, and this can be catastrophic in certain cases, like with a buckling beam. I say the field “was” popular, rather than “is”, because it was a classic example of a field of applied mathematics that was overhyped, applied too widely without adequate attention toward scientific fundamentals, and the backlash all but killed it. However, there is some talk about it recently becoming popular again for chemical applications. (Hence why this blog post!)Linear regression, the old fashioned way2019-06-21T12:00:00+00:002019-06-21T12:00:00+00:00https://sam.zhang.fyi/2019/06/21/least-squares-springs<p>Suppose you want to fit an ordinary least squares model to a set of points in $\mathbb{R}^2$, but you zoned out during statistics class and now you’re stuck on a desert island. In fact, all you have are a wooden board, a hammer, a bunch of nails, some good old zero-length springs, frictionless cloth loops, and a frictionless rod.</p>
<p>Pretend your wooden board is the plane, and decide on a grid system. Then nail each of your data points into the board. Attach to each nail a zero-length spring that can only move up or down. On the other end of each spring place a little cloth loop, for hanging something.</p>
<p>Now imagine taking the long frictionless rod, and threading it through each of these loops. The equilibrium state it reaches is the line of best fit!</p>
<p>I made an interactive demonstration of this, but it only works in full screen (click to open):</p>
<p><a href="/html/fullscreen/springs" style="outline:solid"><img src="/images/thumbnails/springs.png?raw=true" width="50%" alt="Screenshot of fullscreen springs app" /></a></p>
<p><a href="/html/fullscreen/springs">Full screen</a></p>
<p>You can drag on the rod, but you have to be <em>very</em> accurate with your mouse. Refreshing the page gives a new random set of points.</p>
<p>One can derive the optimality of the equilibrium state using the fact that the potential energy of a zero-length string extended by distance $u$ is $\frac{k}{2}u^2$, where $k$ is Hooke’s constant. It doesn’t matter what Hooke’s constant is, as long as it’s positive, so we can set it to $k=2$ to eliminate the fraction. One ends up with the total potential energy of the system $\sum_{i=0}^n (Ax_i - y_i)^2$, where $(x_i, y_i)$ are the points (nails), and $A$ is the function that tells the $y$ value of the rod at point $x_i$. We know $A$ is linear since the rod is straight. This happens to be the loss function for ordinary least squares!</p>
<p>Squaring is convex, and $Ax_i -y_i$ is affine. Composing convex functions with affine ones gives convex functions, and adding convex functions gives convex functions. So the whole loss function is convex. If there is more than one data point, it is strongly convex, and the only minimum in the system is the unique global minimum. In other words, the resting point for the rod attached to the springs is the (unique) line of best fit. Hooray!</p>
<p>Why do the springs have to go straight down? Well, they don’t have to! If you loosen that restriction, then you end up with a <a href="https://en.wikipedia.org/wiki/Total_least_squares">Total Least Squares</a> regression instead. A TLS model allows for error not just in the $y$ axis, like OLS, but also the $x$ axis. For example, suppose you took noisy x-y plane GPS measurements along a straight trail, and you wanted to estimate a line through the actual trail. Since there is error on both $x$ and $y$, one can use TLS. (If we assume the variance on $x$ and $y$ here is the same, then one actually drops into a subcase of TLS called <a href="https://en.wikipedia.org/wiki/Deming_regression#Orthogonal_regression">orthogonal regression</a>.)</p>
<p>The example was made using <a href="https://github.com/shakiba/planck.js">planck.js</a>, which is a nice javascript port of <a href="https://box2d.org">Box2D</a>, although it was sorely lacking in documentation. For instance, I couldn’t find an easy way to run my demo outside of fullscreen.</p>
<p>This setup came from the book, <a href="https://press.princeton.edu/titles/8861.html">The Mathematical Mechanic</a>, which is full of perversities like this.</p>Suppose you want to fit an ordinary least squares model to a set of points in $\mathbb{R}^2$, but you zoned out during statistics class and now you’re stuck on a desert island. In fact, all you have are a wooden board, a hammer, a bunch of nails, some good old zero-length springs, frictionless cloth loops, and a frictionless rod.A moduli space for triangles2019-02-12T12:00:00+00:002019-02-12T12:00:00+00:00https://sam.zhang.fyi/2019/02/12/a-moduli-space-for-triangles<p>Charles Dodgson, <a href="https://en.wikipedia.org/wiki/Lewis_Carroll">better known as Lewis Carroll</a>, once posed the following mathematical question: what is the probability that a random triangle is obtuse?</p>
<p>The answer he gave was incorrect, and several subsequent attempts to correct the answer also fell short. In a <a href="https://arxiv.org/abs/1702.01027">2017 paper from Jason Canterella, Tom Needham, Clayton Shonkwiler, and Gavin Stewart</a>, a nice resolution is presented to this problem.</p>
<p>The key issue with Dodgson’s original solution was that in order to say what probability a random triangle is obtuse, he had to first come up with a space that triangles lived in, and find what part of that space corresponded to obtuse triangles. This turns out to be a subtle issue. Canterella et al. solve this by associating each n-gons with a so-called Grassmanian of 2-planes in $\mathbb{R}^n$. This blog post is a demonstration of their parameterization, omitting all of the details :), using triangles and $\mathbb{R}^3$.</p>
<p>In short, there is a way to send any n-gon with a fixed perimeter to a pair of orthonormal vectors in $\mathbb{R^n}$ up to translation (technically, $2^n$ pairs, but they are all identified with each other). The space of all pairs of orthonormal vectors is a <a href="https://en.wikipedia.org/wiki/Stiefel_manifold">Stiefel manifold</a>, and that is the space we would operate in if we cared about the orientation (as in rotations) of the polygon. But what if we don’t care about the orientation? It turns out we get lucky and rotating the polygon sends these pairs of orthonormal vectors to the same spanning
plane. Hence why the Grassmannian of 2-planes serves as the moduli space for polygons when we don’t care about rotations.</p>
<p>Since we’re in $\mathbb{R}^3$ here, we have an identification between the Grassmannian of 2-planes and the real projective plane $\mathbb{R}P^2$ (through the normal vector to the 2-planes). Recall that the real projective plane can be visualized as lines through a sphere: that is what you are looking at in the top pane.</p>
<div id="triangles-overlay" style="width:600px;height:600px;margin:auto;border:3px solid black"></div>
<div style="display: flex; width: 600px; margin: 3px auto; justify-content:space-between">
<div id="triangle1" style="flex:0 1 auto;width:280px;height:300px;border: 3px solid black"></div>
<div id="triangle2" style="flex:0 1 auto;width:280px;height:300px;border: 3px solid black;"></div>
</div>
<div id="triangles-grassman" style="width:600px;height:600px;border:3px solid black;margin:auto"></div>
<p><a href="/html/fullscreen/triangles-moduli">Full screen version</a>.</p>
<p>The top pane (the sphere) is the moduli space, with both the yellow and green triangles from the middle panes displayed on it as yellow and green lines. The moduli space is eight-fold covered by the sphere, hence why there are eight lines of both colors. All of the lines of the same color are quotiented together. For appearance’s sake, I highlighted one of cosets in blue and thickened the representative vectors through that sector.</p>
<p>The yellow line connecting the two distinguished representatives is a geodesic. Thus in some sense, it represents an optimal way to transform the green triangle into the yellow one, or vice versa. That transformation is what you see in the bottom pane.</p>
<p>You can move the vertices of the triangles around in the middle two panes and watch it move in the moduli space. I normalize the perimeters and make some arbitrary choices when it comes to orientation.</p>
<p>Hat tip to <a href="http://math.colorado.edu/~rohi1040">Rob Hines</a>, who first told me about this.</p>Charles Dodgson, better known as Lewis Carroll, once posed the following mathematical question: what is the probability that a random triangle is obtuse?The cross-section of a cylinder is an ellipse2019-01-26T12:00:00+00:002019-01-26T12:00:00+00:00https://sam.zhang.fyi/2019/01/26/cylinder-ellipse<p>Here’s an interactive WebGL-ification of the visual diagram that goes along with the proof of the elementary fact that the cross-section of a cylinder is an ellipse:</p>
<div id="cylinder" style="width:600px;height:600px;margin-right:auto"></div>
<p><a href="/html/fullscreen/cylinder">Full screen version</a>.</p>
<p>I was inspired to make this when I saw the diagram below in <a href="https://www.maa.org/press/maa-reviews/geometry-and-the-imagination">Geometry and the Imagination</a>.</p>
<p><img src="/images/hilbert-cylinder.png" align="right" /></p>
<p>Given a cylinder with radius $r$, and the plane slicing through it, the proof goes as follows. Imagine the cylinder is hollow, with two spheres placed snugly (that is, of radius $r$) into it, so that they touch against the intersecting plane. The claim is that these points where the sphere touch the cross-section are the foci of the ellipse. We’ll show this is an ellipse by proving that the sum of the distance from the foci to any point on the boundary is constant.</p>
<p>Take an arbitrary point on the ellipse, $p$. Then let’s call the lengths of the two red lines $r_{v, p}$ and $r_{h, p}$ for the vertical red line and the “horizontal” (ellipse-bound) red line from $p$. The interactive visualization above loops over the values of $p$. Likewise, the lengths of the blue lines will be denoted $b_{v, p}$ and $b_{h, p}$.</p>
<p>Then notice that the two red lines in the visualization are both tangent to the sphere: the wall of the cylinder is tangent to the sphere at all points where they make contact, and the intersecting plane is tangent to the sphere.</p>
<p>Now recall (or convince yourself) that tangents from a sphere that intersect at the same point are of the same length. That is, $r_{v, p} = r_{h, p}$, and $b_{v, p} = b_{h, p}$ for all $p$.</p>
<p>Moreover, the two vertical lines always sum up to a constant: $r_{v, p} + b_{v, p} = K$ for all $p$.</p>
<p>Combining those two equations gives $r_{h, p} + b_{h, p} = K$ for all $p$, which shows that the cross-section is an ellipse.</p>
<p>I think it’s a testament to good mathematical illustration that the drawing from Geometry and the Imagination is easier to follow (for me) than the interactive 3d one. But there is something very neat about seeing these old diagrams “come to life”.</p>
<p>I made this using the library <a href="https://github.com/unconed/mathbox/">mathbox</a>.</p>Here’s an interactive WebGL-ification of the visual diagram that goes along with the proof of the elementary fact that the cross-section of a cylinder is an ellipse:Whitney’s Umbrella2019-01-24T12:00:00+00:002019-01-24T12:00:00+00:00https://sam.zhang.fyi/2019/01/24/whitneys-umbrella<p>I’ve been test driving the excellent <a href="https://github.com/unconed/mathbox/">mathbox</a> WebGL library. For starters, here’s a pan-and-zoomable <a href="https://en.wikipedia.org/wiki/Whitney_umbrella">Whitney’s umbrella</a>:</p>
<div id="umbrella" style="width:600px;height:600px;margin-right:auto"></div>
<p><a href="/html/fullscreen/umbrella">Full screen version</a>.</p>
<p>I have been thinking about how to organize the contents of this blog more visually as well. Thus I have created a preliminary version of <a href="/html/gallery">“a mathematical zoo”</a>.</p>
<p>My main inspirations for beautiful mathematical illustrations have been <a href="https://www.maa.org/press/maa-reviews/geometry-and-the-imagination">Geometry and the Imagination</a> and <a href="https://www.springer.com/us/book/9780387345420">A Topological Picturebook</a>. As I become more comfortable with mathbox, and (painfully) shake the rust off of my d3 skills (while learning d3 v4), I hope more of the images from those books make their way to this blog.</p>I’ve been test driving the excellent mathbox WebGL library. For starters, here’s a pan-and-zoomable Whitney’s umbrella: