drawPlot3(domainColoringParameters)
/* drawPlot3 = plot3.createDrawFunction(`vec2 f (vec2 z) {
return cdiv(cmul(csqr(z) - vec2(1, 0), csqr(z - vec2(2, 1))), csqr(z) + 2.71828182 + vec2(2, 2));
}`) */
drawPlot3 = plot3.createDrawFunction(`vec2 f (vec2 z) {
return cpow(vec2(E,0), csqr(-z)) - vec2(1,0);
}`)
md`
## Motivation
Domain coloring is a technique for visualizing complex functions. Plotting a function of one variable on a two dimensional page is straightforward, but a complex function doubles the number of dimensions by mapping each complex number to another complex number—for a total of four dimensions. That's one more than we can represent with a two-dimensional heat map or contour plot, so we'll need to resort to some other tricks.
[Complex *analytic* functions](https://en.wikipedia.org/wiki/Analytic_function) are for the most part just regular functions evaluated in the complex plane and which don't resort to forbidden operations like treating the real and imaginary components separately (this is *not at all* a technical definition!). For example, ${tex`f(z) = \sqrt{z}`} is complex analytic while ${tex`f(z) = \sqrt{\mathrm{Re}(z)}`} is complex but not analytic. If our function is analytic, then the behavior constrained by the [Cauchy-Riemann](https://en.wikipedia.org/wiki/Cauchy–Riemann_equations) equations and we can take a bit more targeted approach to focus on conveying the characteristics of the complex analytic function that aid interpretation.
Roughly speaking, the rules of domain coloring are:
- Dark grid lines represent inputs ${tex `z`} with integer real or imaginary values. I'll refer to these as **rectangular grid lines**.
- Light grid lines represent the argument (a.k.a. the phase) and modulus (a.k.a. the magnitude) of the input ${tex `z`}. (Well, more precisely the *log* of the modulus, to make it scale-independent.) I'll refer to these as **polar grid lines**.
- The hue represents the complex phase, with red corresponding to a positive real value
- Values with a small modulus are dark
- Values with a large modulus are light
That's a lot to pack into one plot! There are additional tricks like indicating direction with gradients, but I find that more distracting than anything. You can [read more about domain coloring on wikipedia](https://en.wikipedia.org/wiki/Domain_coloring) (and see their version of the above plot). Though the task is straightforward, getting the coloring just right is really tricky. I've given it another shot in this notebook, but there's still room for improvement.
***Edit***: *I'm starting to second guess my take on gradients. It's just so hard to get the scaling right otherwise, especially on the GPU where it's not straightforward to calculate stats and scale the coloring by the actual range displayed. I've [tried the gradient approach here](http://rreusser.github.io/lamb-wave-dispersion/). It's not so bad as long as you aim for a bit of subtlety. Though it still seems more difficult to interpret to me.*
Let's work through this and start simple.
## Visualizing zeros
Using the domain coloring technique, the plot of ${tex `f(z) = (z^2-i)/(2z^2+2i)`} looks like this:
`
drawPlot1 = plot1.createDrawFunction(`vec2 f (vec2 z) {
return cdiv((csqr(z)), cmul(vec2(5,0),csqr(csqr(cinv(z)))) + vec2(4,0) );
}
`)
drawPlot1(domainColoringParameters)
drawPlot2 = plot2.createDrawFunction(`
uniform float n;
vec2 f (vec2 z) {
return csin(z) / (C_ONE - ccos(cpow(z,n))) ;
}
`)
drawPlot2(Object.assign({n},domainColoringParameters))
drawPlot4 = plot4.createDrawFunction(`
uniform float t;
vec2 f (vec2 z) {
vec2 fz = C_ONE;
vec2 a0 = exp(vec2(0.375, -0.125 * t));
fz = cmul(fz, csin(z) - cexp(vec2(0.0, t)));
fz = cdiv(fz, csin(z) - cexp(vec2(0.5, 0.5)));
fz = cmul(fz, csin(z) - cexp(vec2(0.125, -0.625 * t)));
fz = cdiv(fz, csin(csqr(z)) - cexp(vec2(0.25, -0.25 * t)));
fz = cmul(fz, csqr(csqr(csin(z) - a0)));
return fz;
}
`)
!paused && drawPlot4(Object.assign({t: (now / 1000) % 1000}, domainColoringParameters))
drawPlot5 = plot5.createDrawFunction(`
uniform float u;
vec2 f (vec2 z) {
return cdiv(C_ONE, ccos(cdiv(C_ONE, z)));
}
`)
One platform to build and deploy the best data apps
Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.