Matrix3 Manipulation

100%

Matrix3 Manipulation

✓ Published0🌍 Public

Last edited May 7, 2019

Created on May 7, 2019

A live interactive demo of 2D affine transformations implemented with a custom 3×3 matrix class. The page shows a gray box containing a dark square with a photo background and the label “F__Q”, which users can translate, scale, and rotate in real time using the dat.GUI control panel. The underlying JavaScript builds transformation matrices for translation, rotation, and scale, multiplies them in sequence, and converts the result to a CSS `matrix()` string applied to the element’s `transform` property.

AI-generated description

Recently, fascinating on Matrix.

mit Licensed

Similar vizzes

Loading thumbnail…

matrix component

This example demonstrates an interactive 3x3 matrix component for exploring linear algebra concepts, where each cell displays a numeric value. Built with D3.js, it uses custom `d3.layout.matrix` and `d3.svg.matrix` components to render the grid. Users can scrub (drag) any number to adjust its value, and the colored background cells—mapped via a separate array—highlight corresponding entries across the matrix. The SVG rendering includes draggable text elements, with cell colors derived from a categorical scale and linked to shared mapping keys.

AAdriU82

70% match

Loading thumbnail…

2D Matrix Decomposition

This example demonstrates how a 2D transformation matrix can be decomposed into its fundamental components: translation, rotation, scale, and skew. The visualization shows a small interface where users can manipulate a matrix, and the code, using the `transform.js` file and the D3.js library, computes and displays these decomposed values. It leverages SVG DOM APIs such as `createElementNS` to parse transformation strings, then applies linear algebra operations like dot products and normalization to extract the parameters. The implementation provides a custom `d3_transform` object with `translate`, `rotate`, `scale`, and `skew` properties, offering a clear breakdown of matrix decomposition.

Mmbostock

68% match

Loading thumbnail…

Transform Transitions

This visualization demonstrates smooth SVG transform transitions, where hovering over any square in a grid triggers an animated sequence that scales, rotates, and repositions it before fading it out. It uses D3 v3’s matrix decomposition to interpolate between arbitrary transform types, such as moving from a simple translate to a combined scale and rotate. The grid consists of 960 by 500 pixel area divided into 20-pixel cells, colored via HSL based on row and column position. Each cell listens for mouseover events, then chains transitions with delays to animate the transform and opacity changes.

CCBasis

66% match

Loading thumbnail…

Transform Transitions

A grid of colored squares animates in response to mouse hovers, demonstrating smooth interpolation between different 2D SVG transforms. Each rect transitions from its original translate to a combined translate, scale, and rotate, then shrinks and fades before being removed. The code uses d3.v3 transitions with `.attr("transform")` to leverage matrix decomposition, automatically decomposing transforms into canonical translate, rotate, scale, and skew components. The visualization is built with a data-joined SVG rect per grid cell, filled with HSL colors based on position, and rendered entirely through D3’s selection and transition APIs.

Mmbostock

64% match

Loading thumbnail…

affine transformations

Four small D3.js v5 canvases each demonstrate a single affine transformation applied to a star texture: rotation, translation, scaling, and fading. The code draws the same image repeatedly, using canvas 2D context methods such as `rotate`, `translate`, `scale`, and `globalAlpha`. Each transformation runs on its own interval, with state tracked per canvas to animate bouncing or reversing direction. The example isolates each operation so viewers can compare their visual effects directly.

EEE2dev

64% match

Loading thumbnail…

Fitting Affine Projection

This example demonstrates an affine transformation fitted to user-defined points. A grid of blue source lines is mapped to a set of black target lines based on the positions of three draggable circles. The code solves a least-squares problem using Gaussian elimination, and the resulting transformation matrix is displayed in a textarea. The visualization is built with D3 v3, using SVG for rendering and d3.behavior.drag for interactive manipulation of the control points.

Mmbostock

64% match

Loading thumbnail…

Perspective Transformation II

An interactive perspective projection of a grid is overlaid on a mosque photograph. Four draggable handles define corresponding point pairs, and the grid lines are redrawn in cyan to show the warped result. Clicking preset buttons animates the handles to new positions, smoothly transitioning the grid’s perspective. The transformation matrix is computed by solving linear equations via LU decomposition from numeric.js, with D3.js v3 handling SVG rendering, drag interactions, and tweening.

Mmbostock

63% match

Loading thumbnail…

Transform Transitions II

A grid of 1,200 small colored squares, each assigned a position via inline CSS `transform` and a hue from `d3.hsl`, reacts to mouseover by flying to the center of the viewport. The selected square scales up and rotates 180 degrees using D3’s `transition().style("transform")`, which interpolates the CSS transform string, then shrinks and removes itself. Built with d3.v4 and `d3.range`, the animation leverages D3’s transform interpolation to smoothly tween translate, scale, and rotate values, while `raise()` brings the active square to the front.

Mmbostock

62% match