Jan 11, 2019 tags: | visualisation | tool | js |
Vector Transformation Visualization Tool (vtvt) — an online demo
Features (v1.03 2019-04-22):
- displays custom vectors, lines and points;
- supports object dragging (mouse or touch gestures);
- supports custom vector mapping (i.e. you can make a vector update its coordinates and colour in every frame based on some inputs, e.g. coordinates of other vectors);
- built-in calculation and display of eigenvectors;
- can display an animated sequence of vectors (multiple vectors per frame are allowed);
- multi-platform support (tested with the following operating systems: MacOS Sierra, Windows 10, Ubuntu 16.04, iOS 12, Raspbian Stretch[rpi3]).
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 #1: addition of two vectors
- Demo #2: addition of three vectors
- Demo #3: plotting various objects
- Demo #4: power iteration algorithm for eigenvector estimation
- Demo #5: unit circle transformation
- Demo #6: linear regression
- Demo #7: principal component analysis
- Demo #8: a vector field
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.
Another illustration of vector addition
Besides vectors, it’s also possible to draw lines, points and custom objects originating from (0,0) or any other point.
Animation of the power iteration algorithm: blog post
Unit circle transformation
Interactive linear regression. Each point can be moved around.
Interactive principal component analysis: blog post
A vector field: blog post