Jan 11, 2019       tags: | visualisation | tool | js |

Vector Transformation Visualization Tool (vtvt) — an online demo

Updated: 2019-04-22

I’ve created vtvt, an interactive tool for visualising vectors and their transformations in R2. It’s written in plain JavaScript (ECMAScript 2015) and utilizes html5 <canvas>.

Features (v1.03 2019-04-22):

Source, demos and reference are available from the github repository. The code is distributed under the terms of the MIT license. Thanks to u/senocular and u/theogjpeezy from reddit for answering a few questions I had about js while working on vtvt.

Demo shortcuts:

Demo #1

Vector v3 is mapped to v1 and v2 so it’s updated automatically every time you drag either of them. A copy of v2 is created and shifted over to the end of v1.

Demo #2

Another illustration of vector addition

Demo #3

Besides vectors, it’s also possible to draw lines, points and custom objects originating from (0,0) or any other point.

Demo #4

Animation of the power iteration algorithm: blog post

Demo #5

Unit circle transformation

Demo #6

Interactive linear regression. Each point can be moved around.

Demo #7

Interactive principal component analysis: blog post

Demo #8

A vector field: blog post