Convolution Visualizer

Live at Convolution Visualizer.

Made with the help of our fine friends at React and D3.js.

Things to do

Want to play around with the code? Clone this repository and run yarn start to start a development instance. The main code lives in src/index.js. This React manual may be of interest.

Here are some project ideas:

• Tweak the CSS so that the weight and output matrices are displayed to the right of the input if there is space.
• Add a slider for adjusting speed of the animation.
• Add a slider which specifies the animation timestep you are on; this way, you can run the animation forward and backward by dragging the slider.
• Add output size and output padding sliders. When these sliders are adjusted, you recompute the input size using the transposed convolution formula.
• Add an onClick handler, which pins your selection at the current mouse collection until another click occurs (disabling the hover behavior.)
• Add a mode which, when enabled, labels cells with variables and renders the mathematical formula to compute the output cell you are moused over.
• Render code for PyTorch (or your favorite framework) which performs the selected convolution.
• Add more exotic convolution types like circular convolution.
• Add a "true" convolution mode, where the weights are flipped before multiplication.
• Support bigger input sizes than 16 (decreasing the size of the squares when inputs are large), and optimize the code so that it still runs quickly in these cases.
• Support assymmetric inputs/kernels/strides/dilations.

Bigger projects:

• Create an in-browser canvas application, which convolves an input image against a displayed filter. Bonus points if your canvas supports painting capabilities.
• Design a visualization which demonstrates the principles of group convolution, allowing you to slide from standard to depthwise convolution.