# Some Wavelet Visualizations

Recently I started to learn how to use d3.js, a JavaScript library for interactive data-driven visualizations. As a first little project, I decided to make interactive and animated versions of graphics that I originally created for two articles on wavelets (article 1, article 2). Besides being visually appealing, I hope that this shines a bit of light at some of the deep connections and fascinating properties of wavelets. Here I narrowed down the explanations to a bare minimum, but I linked the corresponding passages in my articles in case you want to dig a little deeper.

The code is maybe a bit messy, and some things were quite tricky to accomplish or do not yet work completely as I wanted. But in general, I am very pleased with d3, it’s a really powerful and fun tool that produces beautiful results. Please let me know if you have any suggestions or questions!

## The Dilation and Wavelet Equation

In the Fast Wavelet Transform, the wavelets scaling function is defined by the dilation equation:

This shows the fractal self-similarity of the scaling function: We can construct it from scaled and shifted versions of itself that are summed together. In a similar way, we can construct the wavelet function from the scaling function using the wavelet equation:

Here you can see the construction of some famous scaling and wavelet functions:

Code

## The Wavelet Dilation Graph

Here we try to show a certain equivalence of two graphs. The first one is derived directly from the filterbank implementation of the Fast Wavelet Transform, and has the following construction formula:

The second graph shows several steps of the cascading algorithm, using the dilation equation:

Each node depicts the value of $x_n(t)$ or $\phi_n(t)$ at certain $n$ and $t$. These values are obtained by following all possible paths from the specified node to the bottom: The colors of the edges stand for the different factors $h_0$, these factors of each path are multiplied, and the products arising from the paths are summed together. We see that the paths from both graphs have always exactly the same color combinations (although in a different order) and so they result in the same value. Read more…

The graphs get crowed pretty quickly if your choose long wavelets and many levels. Be careful, the number of paths increases exponentially!

Code

## Vanishing Moments

Some wavelet function have a property called vanishing moments. This means that they are orthogonal to polynomials up to a certain degree. The scaling function then has the expressive power to exactly reconstruct any segment of these polynomials perfectly, from few coefficients. Polynomials of higher degrees require longer wavelets. The Daubechies wavelets in particular are named on the number of vanishing moments they have. Read more…

Here we show the perfect reconstruction from a finite number of scaled and shifted scaling functions. Every time you press draw, an appropriate polynomial is randomly generated and reconstructed.

Code

Updated: