# Visualizing multivariable functions and their derivative

This summer I'm working with Project Project, a summer research group at Reed College. Our goal is to visualize mathematical concepts; this post details some work with introductory calculus material.

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 . The derivative of such a function is also a transform . 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 given by

What does look like? A common representation of such functions selects a uniformly-spaced set of points in , 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 . 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 .
- Consider the line as a discrete collection of points (a
**polyline**). - Apply a function to those points.
- Draw a new line through the transformed points.

Performing those steps on a grid of lines in with the function from above produces the following visual:

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

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 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 at a point is a linear function such that given by

approximates well near . More precisely, we require that

If such a linear transform exists, it is unique and is given by the **Jacobian matrix of partial derivatives**

Suppose we choose and compute for the particular given before. Plotting both and together (with in green) yields the following visual:

Immediately we can see the essential properties of the derivative: near the chosen point , the function closely approximates . Moreover, this approximation is linear; the grid transformed by 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 . Just like functions of real numbers, complex functions can be differentiated and have an approximation function

where and is the derivative of .

Typically a point in the complex plane is written as for some . We could alternatively notate this point as , which looks just like a point in ! 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 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 .

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.