Awesome

github.com/fredhohman/awesome-mathematical-notation-design

Awesome Mathematical Notation Design

While the history of mathematical notation dates back thousands of years, many of the symbols we are familiar with were introduced in the 16th–17th century. Since then, the number of advanced mathematical symbols has increased significantly.

Today, the majority of mathematical notation is digitally communicated in LaTeX, a popular mathematical typesetting system that produces static output. But sometimes mathematical notation can be hard to learn, hard to remember, and drag a reader into the details while preventing the communication of some higher-level idea. Can we do better?

Below is list of links of techniques to help enhance mathematical notation, for example, leveraging color, layout, annotations, Gestalt principles, or interactivity.

Add a new example

Found a new example? Open an issue to include it. Thanks for your suggestions!


Research Papers (4 papers)

Academic papers on augmenting math notation.

Formula formatting language

Zhiyuan Wu, Jiening Li, Kevin Ma, Hita Kambhamettu, Andrew Head

ACM UIST, 2023

code
color
annotation

Math augmentations

Andrew Head, Amber Xie, and Marti A. Hearst

ACM CHI, 2022

color
annotation
layout

Communicating with interactive articles

Fred Hohman, Matthew Conlen, Jeffrey Heer, Duen Horng (Polo) Chau

Distill, 2020

color
annotation
interactive graphics

On-demand explanations of notation within in a research paper

Andrew Head, et al.

ACM CHI, 2021

annotation

Collections (7 collections)

Meta-collections of math notation examples.

3Blue1Brown

Grant Sanderson

Youtube, 2015

video
color
annotation

Colorized math equations

Kalid Azad

Better Explained, 2017

color
annotation

Equation formatting

Amit Patel

Red Blob Games, 2019

color
annotation

Gallery of concept visualization

Joshua Horowitz

Conceptviz, 2015

interactive graphics

Manim

Grant Sanderson

Github, 2015

video
color
annotation

Visual explanations of mathematics

Matt Hall

Agile Scientific, 2020

color
annotation
emoji

Visual graphing tool examples

Geogebra

Geogebra, 2001

color
annotation

Articles (8 articles)

Blog posts, explainers, and articles that use designed notation throughout.

Differential equations

hzsteinberg

Observable, 2019

color
animation

Legible mathematics

Glen Chiacchieri

Personal blog, 2014

color
variable replacement

Lessons from a year of distilling machine learning research

Shan Carter

OpenVisConf, 2018

layout
annotation

Pixels and their neighbors: Finite volume

Rowan Cockett, Lindsey Heagy, Doug Oldenburg

The Leading Edge, 2016

color
annotation

Predator and prey relationships

Mike Bostock

Observable, 2018

emoji

The art of linear algebra

Kenji Hiranabe

Github, 2021

color
static graphic
layout

VAE Explainer

Donny Bertucci

Github, 2024

color
code
live model

Why momentum really works

Gabriel Gog

Distill, 2017

annotation
layout
opacity

Examples (48 examples)

Other singular examples and explorations.

A Visual Guide to Quantization

Maarten Grootendorst

Github, Personal blog

color
static graphic
annotation

A student's guide to maxwell's equations

Daniel Fleisch

Cambridge University Press, 2008

annotation

Angle between two vectors

Andrew Carr

Twitter, 2021

color
caption

Annotated LaTeX equations

Sibin Mohan

Twitter, 2022

color
annotation

Bulletproofs

dalek cryptography

Github, 2018

color
annotation

Cheatsheet for Bayesian posterior predictions

Andrew Heiss

Personal blog, 2022

color
annotation

Concepts in calculus

Radon Rosborough

Intuitive Explanations, 2015

color
annotation

Continuous prefetch

Haneen Mohammed, Ziyun Wei, Eugene Wu, Ravi Netravali

VLDB, 2020

color

Convolutional neural network operations

Zijie J. Wang, et al.

IEEE TVCG, 2021

color
annotation
interactive graphics

Cutting out knots

Gary Dunkerley

Personal blog, 2022

color
static graphic
layout

Definition of a derivative

Life Through a Mathematician's Eyes

Tumblr, 2015

annotation

Design decisions for Distill equations

Chris Olah

Github, 2017

color
annotation

Differential equation for rate of change

Amit Patel

Twitter, 2019

color
layout
annotation

Distance formula

Natasha Sharma

Towards Data Science, 2019

color
diagram

Editing generalized additive models

Zijie J. Wang, et al.

Research2Clinics at NeurIPS, 2021

color

Eigenvectors and eigenvalues

Victor Powell and Lewis Lehe

Explained Visually, 2015

color
interactive graphics

Elementary math

grundt

Reddit, 2018

color
static graphic prototype

Energy consumption in machine learning

Omar Shaikh, et al.

ACH CHI LBW, 2021

color
number scrubber

Equations in R

Andrew Heiss

Twitter, 2020

color

Exponential function

Tivadar Danka

Twitter, 2022

color
annotation
layout

Function plotting

Ben Goldsmith

YouTube, 2017

interactive graphics

Generalized additive models

Fred Hohman, et al.

ACM CHI, 2019

color

Generating animated videos with natural language queries

Shreenabh Agrawal

Magnum, 2020

annotation

Geometric visualization of Bayes' theorem

Cmglee

Wikipedia, 2022

color
pictogram

Geometry line segement problem

Slim “Sarah” Lim

Twitter, 2021

color
interactive graphics

Helmholtz equation

Luc Jaouen

Twitter, 2020

notation expansions
text

How mathematicians think about four dimensions

hillexed

Explanaria, 2019

interactive graphics

Integrating study results and distributions with text

Alex Kale, Matthew Kay, Jessica Hullman

IEEE VIS, 2020

color
arrow annotations

Interactive exploration of a dynamical system

Bret Victor

worrydream, 2011

direct manipulation

Linking informal and formal statements

Will Crichton

Twitter, 2021

color
annotation

Machine learning flashcards

Chris Albon

Machine Learning Flashcards, 2017

color
annotation
hand-drawn graphic

Mathtype equation annotation

MathType

color
annotation

Neural network backpropagation

Donald Bertucci and Minsuk Kahng

VISxAI at IEEE VIS, 2021

color
interactive graphics

Numbers at play: Dynamic toys make the invisible visible

Scott Farrar, May-Li Khoe, Andy Matuschak

Khan Academy, 2017

color
physicalization

PDEs and volume rendering thread

Keenan Crane

Twitter, 2022

color
annotation

Paths perspective on value learning

Sam Greydanus and Chris Olah

Distill, 2019

annotation
static graphics

Predator and prey differential equation

3Blue1Brown

Twitter, 2019

emoji

Summation and product notation in code

Freya Holmér

Twitter, 2021

color
code

Tangle: Explorable explanations made easy

Bret Victor

worrydream, 2013

interactive graphics

Teaching array programming

Jay Alammar

Personal blog, 2019

color
code

The case of the impossible triangles

hillexed

Explanaria, 2021

color
interactive graphics

The parts of a learning problem

Michael Ekstrand

Twitter, 2021

color

The rendering equation

Artsiom Sanakoyeu

Twitter, 2021

color

The singular value decomposition

Peter Bloem

Personal blog, 2022

color
layout
static graphic

Triangle solver

Freya Holmér

Personal Blog, 2021

color
code
interactive graphics

Visual Pythagorean demonstration and proofs

Daryl

StackExchange, 2014

color
static graphic

Visualizing quaternions: An explorable video series

Grant Sanderson, Ben Eater

Personal blog, 2018

color
video
interactive graphics

Volume rendering for developers: Foundations

Scratchapixel

Scratchapixel, 2022

color
static graphic