In a first course in calculus, many students encounter an image similar to the following:<\/p>\n
![\"\"](\"http:\/\/blogs.reed.edu\/projectproject\/files\/2017\/07\/tangent-300x214.png\")
\nSuch an illustration highlights a key property of the single variable derivative: it’s the best linear approximation<\/i> 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?<\/p>\n
For the past few weeks, I’ve been working towards a visualization of multivariable functions and their derivatives. Check out the end result here<\/a>, or read on to hear about my process. I assume some knowledge of calculus and mathematical notation.<\/p>\n <\/p>\n To make matters simple, I narrowed my focus to functions [latex]f : \\mathbf{R}^2 \\to \\mathbf{R}^2[\/latex]. The derivative of such a function is also a transform [latex]\\mathbf{R}^2 \\to \\mathbf{R}^2[\/latex]. Thus to build a visual representation of the derivative, I first needed a general purpose visualization of vector fields in the plane.<\/p>\n Consider a particular function [latex]f : \\mathbf{R}^2 \\to \\mathbf{R^2}[\/latex] given by To give the visualization more object constancy<\/a>, 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<\/b>; as a coder, this is a tween function of SVG Inspired by the common single variable visualization of the derivative, I wanted to plot functions [latex]f : \\mathbf{R}^2 \\to \\mathbf{R}^2[\/latex] alongside a derivative-based approximation function. What does this approximation look like in the multivariable case?<\/p>\n If it exists, the derivative of a multivariable function [latex]f : \\mathbf{R}^n \\to \\mathbf{R}^m[\/latex] at a point [latex]\\mathbf{a}[\/latex] is a linear function [latex]T[\/latex] such that [latex]h : \\mathbf{R}^n \\to \\mathbf{R}^m[\/latex] given by $$ Suppose we choose [latex]\\mathbf{a} = (1.8,\\ 1.4)[\/latex] and compute [latex]h[\/latex] for the particular [latex]f[\/latex] given before. Plotting both [latex]h[\/latex] and [latex]f[\/latex] together (with [latex]h[\/latex] in green) yields the following visual: Conveniently, this visualization can also be adapted to visualizing functions [latex]\\mathbf{C} \\to \\mathbf{C}[\/latex]. Just like functions of real numbers, complex functions can be differentiated and have an approximation function Typically a point in the complex plane is written as [latex]a + bi[\/latex] for some [latex]a,\\ b \\in \\mathbf{R}[\/latex]. We could alternatively notate this point as [latex](a, b)[\/latex], which looks just like a point in [latex]\\mathbf{R}^2[\/latex]! 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 [latex]f(z) = e^z[\/latex] and its derivative:<\/p>\n Next up I’m planning a 3D-printable version of this same visualization. The idea is to perform similar deformation of a lattice in [latex]\\mathbf{R}^3[\/latex]. For the curious or computer-minded, the code for this visualization is on GitHub<\/a>. Highlights include a totally bonkers JavaScript implementation of complex arithmetic<\/a> or the main plot component<\/a>. I would also love to hear<\/a> any further ideas for visualization in this area.<\/p>\n","protected":false},"excerpt":{"rendered":" In a first course in calculus, many students encounter an 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 … Continue reading “Visualizing multivariable functions and their derivative”<\/span><\/a><\/p>\n","protected":false},"author":1575,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[9],"tags":[6,4,7,5,8],"class_list":["post-53","post","type-post","status-publish","format-standard","hentry","category-vector-calc","tag-calculus","tag-derivative","tag-math","tag-multivariable","tag-visualization"],"_links":{"self":[{"href":"https:\/\/blogs.reed.edu\/projectproject\/wp-json\/wp\/v2\/posts\/53","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blogs.reed.edu\/projectproject\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blogs.reed.edu\/projectproject\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blogs.reed.edu\/projectproject\/wp-json\/wp\/v2\/users\/1575"}],"replies":[{"embeddable":true,"href":"https:\/\/blogs.reed.edu\/projectproject\/wp-json\/wp\/v2\/comments?post=53"}],"version-history":[{"count":19,"href":"https:\/\/blogs.reed.edu\/projectproject\/wp-json\/wp\/v2\/posts\/53\/revisions"}],"predecessor-version":[{"id":195,"href":"https:\/\/blogs.reed.edu\/projectproject\/wp-json\/wp\/v2\/posts\/53\/revisions\/195"}],"wp:attachment":[{"href":"https:\/\/blogs.reed.edu\/projectproject\/wp-json\/wp\/v2\/media?parent=53"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blogs.reed.edu\/projectproject\/wp-json\/wp\/v2\/categories?post=53"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blogs.reed.edu\/projectproject\/wp-json\/wp\/v2\/tags?post=53"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}Visualizing vector fields in the plane<\/h2>\n
\n$$
\nf(x,\\ y) = \\left( \\frac{x^3 + y^3}{3}, \\frac{x^3}{3} – y \\right)
\n$$
\nWhat does [latex]f[\/latex] look like? A common representation of such functions selects a uniformly-spaced set of points in [latex]\\mathbf{R}^2[\/latex], and draws an arrow at each point representing the magnitude and direction of the vector field:<\/p>\n![\"\"](\"http:\/\/blogs.reed.edu\/projectproject\/files\/2017\/07\/vector-field-300x298.png\")
\nThis is sometimes called a vector plot<\/b>. For static mediums like a textbook or chalk board, this is an intuitive visualization of [latex]f[\/latex]. However, I wanted to make use of additional visual techniques made possible with computer graphics. I came up with the following:<\/p>\n\n
![\"\"](\"http:\/\/blogs.reed.edu\/projectproject\/files\/2017\/07\/viz-steps-300x153.png\")
\nPerforming those steps on a grid of lines in [latex][-2,2] \\times [-2,2][\/latex] with the function [latex]f[\/latex] from above produces the following visual:<\/p>\n![\"\"](\"http:\/\/blogs.reed.edu\/projectproject\/files\/2017\/07\/grid-and-transform-300x167.png\"){kind=spacer}
\nNeat-o! The transformed grid gives some sense of how [latex]f[\/latex] deforms and stretches the Euclidean plane. As another example, the linear map given by
\n$$
\nA = \\begin{pmatrix}
\n2 & 1 \\\\
\n0 & 2
\n\\end{pmatrix} \\in \\textrm{Mat}_{2 \\times 2}(\\mathbf{R})
\n$$
\nyields the following picture when applied to a grid around the origin:<\/p>\n![\"\"](\"http:\/\/blogs.reed.edu\/projectproject\/files\/2017\/07\/grid-transformed-linear-300x107.png\"){kind=spacer}
\nAs 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.<\/p>\npath<\/code> elements. If you would like to peek under the hood of the visualization, be sure to check out the main d3<\/a>-based drawing method here<\/a>.<\/p>\nThe multivariable derivative<\/h2>\n
\n$$
\nh(\\mathbf{x}) = f(\\mathbf{a}) + T(\\mathbf{x – a})
\n$$
\napproximates [latex]f[\/latex] well near [latex]\\mathbf{a}[\/latex]. More precisely, we require that
\n$$
\n\\lim_{\\mathbf{x} \\to \\mathbf{a}} \\frac{| f(\\mathbf{x}) – h(\\mathbf{x}) |}{| \\mathbf{x – a} |} = 0
\n$$
\nIf such a linear transform [latex]T[\/latex] exists, it is unique and is given by the Jacobian matrix of partial derivatives<\/b><\/p>\n
\nDf(x_1,\\ x_2,\\ \\ldots,\\ x_n) := \\begin{pmatrix}
\n\\frac{\\partial f_1}{\\partial x_1} & \\frac{\\partial f_1}{\\partial x_2 } & \\ldots & \\frac{\\partial f_1}{\\partial x_n} \\\\[1.1em]
\n\\frac{\\partial f_2}{\\partial x_1} & \\frac{\\partial f_2}{\\partial x_2 } & \\ldots & \\frac{\\partial f_2}{\\partial x_n} \\\\[1.1em]
\n\\vdots & \\vdots & \\ddots & \\vdots \\\\[0.4em]
\n\\frac{\\partial f_m}{\\partial x_1} & \\frac{\\partial f_m}{\\partial x_2} & \\ldots & \\frac{\\partial f_m}{\\partial x_n}
\n\\end{pmatrix}
\n$$<\/p>\n
\n![\"\"](\"http:\/\/blogs.reed.edu\/projectproject\/files\/2017\/07\/grid-transformed-overlaid-300x250.png\"){kind=spacer}
\nImmediately we can see the essential properties of the derivative: near the chosen point [latex]\\mathbf{a}[\/latex], the function [latex]h[\/latex] closely approximates [latex]f[\/latex]. Moreover, this approximation is linear; the grid transformed by [latex]h[\/latex] consists only of straight lines, indicating that it is a linear function. Be sure to check out the full animated version<\/a> of this visualization to see different functions at work!<\/p>\nExtending the visualization to complex functions<\/h2>\n
\n$$
\nh(z) = f(a) + f'(a)(z – a)
\n$$
\nwhere [latex]a,\\ z \\in \\mathbf{C}[\/latex] and [latex]f'[\/latex] is the derivative of [latex]f[\/latex].<\/p>\n![\"\"](\"http:\/\/blogs.reed.edu\/projectproject\/files\/2017\/07\/complex-exponential-300x200.png\")
<\/p>\nClosing thoughts<\/h2>\n
\n![\"\"](\"http:\/\/blogs.reed.edu\/projectproject\/files\/2017\/07\/3d-lattice.jpg\")
\nMore on this soon!<\/p>\n