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[3] of examples and articles
- 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].