Introduction

The Mandelbrot set is a fascinating mathematical structure that creates beautiful pictures. This page demonstrates using an HTML5 canvas and D3.js to plot the Mandelbrot set. First, the plot, then more information about plotting Mandelbrot sets.

A Little Math

It's helpful to have a little mathematical background on the Mandelbrot set. The set consists of complex numbers $c$ where iterating

$$z_{i+1} = z_{i}^2 + c$$

does not approach infinity when starting with $z_0 = 0$.

Less formally, repeatedly multiplying the previous value by itself then adding in a fixed complex number does not grow forever.

A number not in the Mandelbrot set is $c=1$. The iterations are $0, 1, 2, 5, 26, ...$. There is not way for the next iteration to be smaller, so this grows to infinity. A number in the Mandelbrot set is $c=-1$. The iterations are $0, -1, 0, -1, 0, -1, ...$. Once a value repeats, it will repeat the sequence forever and never reach infinity. A third possibility is that a value $c$ does not repeat, but also never approaches infinity. These are tricky to find and demonstrate, but do exist.

The Picture

The black areas in the picture represent members of the Mandelbrot set. Repeated iterations do not approach infinity.

The colored portions of the plot are not members. The colors are chosen to represent how fast a number can be seen to approach infinity. This takes advantage of the fact that if the magnitude of an iteration is ever greater than 2, repeated iteration approaches infinity. The chosen color represents the number of iterations before the magnitude becomes greater than 2.

In the plot above, blues are a small number of iterations, greens are in the tens of iterations, reds are a few hundred, and yellows are closer to 1000 iterations.

Code

Feel free to review the code for plotting the Mandelbrot set. To include in your own page, use the following HTML:

<div id="viz" style="min-height: 480px; min-width: 640px;">&nbsp;</div>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="/src/mandelbrot/mandelbroti.js" type="text/javascript"></script>