Data analysis in many fields relies on complex functions, which take and return numbers with both real imaginary parts. Despite wide use, really understanding these functions is tough because, with two dimensional input and two dimensional output there is no obvious way to visualize them. You can still understand complex functions in a purely symbolic way, but below is a tool to explore them graphically. I wrote this when I took complex analysis to help understand the functions we were studying. The input (value of z) and output (value of w) are the fields below, with colors (or arrows) that represent angle (hue) and magnitude (brightness). Choose a function from the list, then place your mouse in the input field, where it’s position specifies the real (left and right) and complex (up and down) value of z. Grid lines are multiples of π/2.

Choose a function:
w =  


Or enter a custom function of z, such as z^3+1 or sin(20/z):
w =


Sorry, your browser does not support inline SVG.

z = z



domain representation:

Plotting functions with real inputs and outputs is straightforward – they have a one-dimensional input and a one-dimensional output, total of two dimensions that fit on a piece of paper. We have to rotate the output dimension compared to the input, even though input and output are actually both on the same, real line. But these plots give you a better understanding of a function than you could ever get from just reading an equation. For complex functions, though, we need two dimensions just to specify input (the real and imaginary parts lie on different lines), so all the perpendicular directions on the paper are used up before we even get to the output. We can solve this problem with color.

Domain coloring is a way to visualize complex functions. The two dimensions of a plot are both for input, then the hue and brightness represent the function’s output. But this requires discerning both hue and brightness, and for most color maps those qualities are perceptually confounded, like those on wikipedia., where the blues look much darker than the yellows even when they represent the same magnitude. Matplotlib for the Python programming language has spectacular color tools that let you create color maps. We used the colorspacious module to generate a map (called soapbubble, approximated here in javascript) for which hue and lightness are perceptually independent. This makes it easier to interpret the magnitude of, for example, the exponential function, where the modulus, depends only on the real part of the input and stays the same over vertical tracts. Compare the domain coloring of the exponential here to that on wikipedia to see the difference.

Output pointer tracking. This color scheme is unfriendly for those with color deficiencies, a set of common conditions which make it difficult to discriminate hues (especially here, where hue is uncorrelated to lightness). So to complement domain coloring, you can move your pointer in the input plot and see the calculated output. The color under your pointer indicates where you will land on the output plot, roughly green and purple for positive and negative real numbers, blue and orange for positive and negative imaginary numbers. Additionally, set the domain representation to the quiver plot option, which requires no color vision. Here, the arrows in the z plot represent locations on the w, output plot. It’s tempting to see it as a flow field, but the arrows aren’t pointing to adjacent locations so much as they are indicating the location of a number on the complex plane. Again, move your pointer in the z plot to see its mapping in the w plot.