In a first course in calculus, many students encounter a image similar to the following:

Such an illustration highlights a key property of the single variable derivative: it’s the *best linear approximation* of a function at a point. For functions of more than one variable, the derivative exhibits this same characteristic, yet there is no obvious corresponding picture. What would an analogous visualization look like for a multivariable function?

For the past few weeks, I’ve been working towards a visualization of multivariable functions and their derivatives. Check out the end result here, or read on to hear about my process. I assume some knowledge of calculus and mathematical notation.

## Visualizing vector fields in the plane

To make matters simple, I narrowed my focus to functions $f : \mathbf{R}^2 \to \mathbf{R}^2$. The derivative of such a function is also a transform $\mathbf{R}^2 \to \mathbf{R}^2$. Thus to build a visual representation of the derivative, I first needed a general purpose visualization of vector fields in the plane.

Consider a particular function $f : \mathbf{R}^2 \to \mathbf{R^2}$ given by

$f(x,\ y) = \left( \frac{x^3 + y^3}{3}, \frac{x^3}{3} - y \right)$What does $f$ look like? A common representation of such functions selects a uniformly-spaced set of points in $\mathbf{R}^2$, and draws an arrow at each point representing the magnitude and direction of the vector field:

This is sometimes called a **vector plot**. For static mediums like a textbook or chalk board, this is a intuitive visualization of $f$. However, I wanted to make use of additional visual techniques made possible with computer graphics. I came up with the following:

- Draw a line in $\mathbf{R}^2$.
- Consider the line as a discrete collection of points (a
**polyline**). - Apply a function $\mathbf{R}^2 \to \mathbf{R}^2$ to those points.
- Draw a new line through the transformed points.

Performing those steps on a grid of lines in $[-2,2] \times [-2,2]$ with the function $f$ from above produces the following visual:

Neat! The transformed grid gives some sense of how $f$ deforms and stretches the Euclidean plane. As another example, the linear map given by

$A = \begin{pmatrix} 2 & 1 \\ 0 & 2 \end{pmatrix} \in \textrm{Mat}_{2 \times 2}(\mathbf{R})$yields the following picture when applied to a grid around the origin:

As one might expect, the linear map sends linear subspaces to linear subspaces (straight lines to straight lines). The visualization has a rather vivid aesthetic—there is no curvature in the transformed result. This will be helpful for understanding the multivariable derivative, which is always a linear map.

To give the visualization more object constancy, I animate between the starting and ending states of each line as well. As a fun aside, the data of such an animation are computed by what mathematicians call a **straight line homotopy**; as a coder, this is a tween function of SVG `path`

elements. If you would like to peek under the hood of the visualization, be sure to check out the main d3.js-based drawing method here.

## The multivariable derivative

Inspired by the common single variable visualization of the derivative, I wanted to plot functions $f : \mathbf{R}^2 \to \mathbf{R}^2$ alongside a derivative-based approximation function. What does this approximation look like in the multivariable case?

If it exists, the derivative of a multivariable function $f : \mathbf{R}^n \to \mathbf{R}^m$ at a point $\mathbf{a}$ is a linear function $T$ such that $h : \mathbf{R}^n \to \mathbf{R}^m$ given by

$h(\mathbf{x}) = f(\mathbf{a}) + T(\mathbf{x - a})$approximates $f$ well near $\mathbf{a}$. More precisely, we require that

$\lim_{\mathbf{x} \to \mathbf{a}} \frac{\lVert f(\mathbf{x}) - h(\mathbf{x}) \rVert}{\lVert \mathbf{x - a} \rVert} = 0$If such a linear transform $T$ exists, it is unique and is given by the **Jacobian matrix of partial derivatives**

Suppose we choose $\mathbf{a} = (1.8,\ 1.4)$ and compute $h$ for the particular $f$ given before. Plotting both $h$ and $f$ together (with $h$ in green) yields the following visual:

Immediately we can see the essential properties of the derivative: near the chosen point $\mathbf{a}$, the function $h$ closely approximates $f$. Moreover, this approximation is linear; the grid transformed by $h$ consists only of straight lines, indicating that it is a linear function. Be sure to check out the full animated version of this visualization to see different functions at work!

## Extending the visualization to complex functions

Conveniently, this visualization can also be adapted to visualizing functions $\mathbf{C} \to \mathbf{C}$. Just like functions of real numbers, complex functions can be differentiated and have an approximation function

$h(z) = f(a) + f'(a)(z - a)$where $a,\ z \in \mathbf{C}$ and $f'$ is the derivative of $f$.

Typically a point in the complex plane is written as $a + bi$ for some $a,\ b \in \mathbf{R}$. We could alternatively notate this point as $(a, b)$, which looks just like a point in $\mathbf{R}^2$! These points operate under a different arithmetic, but can be fed to the same visualization algorithm. In this case, we get a depiction of the points on the real-imaginary plane. Here, for example, is a visualization of the complex exponential function $f(z) = e^z$ and its derivative:

## Closing thoughts

Next up I’m planning a 3D-printable version of this same visualization. The idea is to perform similar deformation of a lattice in $\mathbf{R}^3$. More on this coming soon!

For the curious or computer-minded, the code for this d3.js-based visualization is on GitHub. Highlights include a totally bonkers JavaScript implementation of complex arithmetic or the main plot component. I would also love to hear any further ideas for visualization in this area.