2D Vector Fields and Their Derivative

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 : \mathbb{R}^2 \to \mathbb{R}^2$. The derivative of such a function is also a transform $\mathbb{R}^2 \to \mathbb{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 : \mathbb{R}^2 \to \mathbb{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 $\mathbb{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:

1. Draw a line in $\mathbb{R}^2$.
2. Consider the line as a discrete collection of points (a polyline).
3. Apply a function $\mathbb{R}^2 \to \mathbb{R}^2$ to those points.
4. 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-o! 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}(\mathbb{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 : \mathbb{R}^2 \to \mathbb{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 : \mathbb{R}^n \to \mathbb{R}^m$ at a point $\mathbf{a}$ is a linear function $T$ such that $h : \mathbb{R}^n \to \mathbb{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

$$Df(x_1,\ x_2,\ \ldots,\ x_n) := \begin{pmatrix} \frac{\partial f_1}{\partial x_1} & \frac{\partial f_1}{\partial x_2 } & \ldots & \frac{\partial f_1}{\partial x_n} \\[1.1em] \frac{\partial f_2}{\partial x_1} & \frac{\partial f_2}{\partial x_2 } & \ldots & \frac{\partial f_2}{\partial x_n} \\[1.1em] \vdots & \vdots & \ddots & \vdots \\[0.4em] \frac{\partial f_m}{\partial x_1} & \frac{\partial f_m}{\partial x_2} & \ldots & \frac{\partial f_m}{\partial x_n} \end{pmatrix}$$

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 $\mathbb{C} \to \mathbb{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 \mathbb{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 \mathbb{R}$. We could alternatively notate this point as $(a, b)$, which looks just like a point in $\mathbb{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 $\mathbb{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.

← Back to Project Project Home