I wanted to try formatting, annotating, and colorizing equations. Inspiration:

- Kalid Azad uses color for equations
^{[1]} - Chris Olah uses tables for equations
^{[2]} **Fred Hohman’s awesome list**of examples and articles^{[3]}- Matt Hall talks about color + formatting of equations
^{[4]}, and followup post^{[5]} - A example of annotation
^{[6]} - Matt Adereth blogged about color and formatting
^{[7]} - Rowan Cockett has amazing equation formatting
^{[8]} - An annotated equation from Andrew Alexander
^{[9]} - Annotated equations in TeX
^{[10]} - Andrew Head’s paper
^{[11]}on the topic - Keenan Crane’s annotated equation
^{[12]}uses background colors for equations and foreground colors for annotations. I like this a lot, and the next time I want to annotate equations I want to try this. I think using background for the equation helps with the contrast, and also gives visual markers of which elements go together. I’d probably try less saturated colors for the backgrounds. - Scratch A Pixel uses color for equations
^{[13]} - Blog post about singular value decomposition
^{[14]}uses colors for equations*and*makes them match the colors in diagrams. - Math Augmentation: How Authors Enhance the Readability of Formulas using Novel Visual Design Practices
^{[15]}is a paper about this topic; see Figure 4 for a summary of the different types of annotations. - FFL
^{[16]}is a CSS-like language for annotating equations with colors.

Here I’m using both color and tables (using the table tag instead of css grid), with labels for the symbols:

\(\frac{dR}{dt}\) | = | \(\alpha\) | \(\cdot\) | \(R\) | \(-\) | \(\beta\) | \(\cdot\) | \(R\) | \(\cdot\) | \(F\) |

rate of change of rabbits | is | birth rate | times | rabbits | minus | kill rate | times | rabbits | times | foxes |

This is highly distracting. Describing the basic symbols is overkill for an audience that’s reading about differential equations! Let’s drop those:

\(\frac{dR}{dt}\) | = | \(\alpha\) | \(\cdot\) | \(R\) | \(-\) | \(\beta\) | \(\cdot\) | \(R\) | \(\cdot\) | \(F\) |

rate of change of rabbits | birth rate | rabbits | kill rate | rabbits | foxes |

There are still too many colors. Let’s use color only for rabbits:

\(\frac{dR}{dt}\) | = | \(\alpha\) | \(\cdot\) | \(R\) | \(-\) | \(\beta\) | \(\cdot\) | \(R\) | \(\cdot\) | \(F\) |

rate of change of rabbits | birth rate | rabbits | kill rate | rabbits | foxes |

An alternative to describing the *symbols* is to describe the *expressions*. Chris Olah recommends left alignment and extra whitespace.

\( \frac{dR}{dt}\) | \(=\) | \( \alpha \cdot R\) | \(-\) | \( \beta \cdot R \cdot F\) |

rate of change | rabbits born | rabbits die |

I haven’t quite figured out the TeX to make explanations appear underneath the parts of the formula. These don’t line up:

\[ \underbrace{\frac{dR}{dt}}_\text{rate of change} = \underbrace{\alpha \cdot R}_\text{rabbits born} - \underbrace{\beta \cdot R \cdot F}_\text{rabbits die} \]

Also see Shan Carter^{[17]}’s beautiful version, which has both labels for variables and labels for expressions, and also uses color! I haven’t tried to reproduce this yet. I think it uses CSS grid with borders on an empty cell to create the bracket.

[2021] Two years later, I spent some time looking at lotka-volterra^{[18]}.