Skip to main content
SimilarExport ZIP
100%

Fitting Affine Projection

✓ Published0🌍 Public
Mmbostock
Last edited Feb 9, 2016
Created on Sep 17, 2013

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.

AI-generated description

Based on Jarno Elonen’s Fit an affine transformation to given points.

gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

linecross labels

This example shows how to connect labeled points to a series of evenly spaced endpoints using angled and straight line segments. Colored circles on the left link to larger target circles on the right through two distinct line types, with the bend point shifting between a shared midpoint and a point based on the source x-coordinate depending on the item’s index. The visualization renders three SVG charts side-by-side at different widths, using d3.scaleLinear for vertical positioning and d3-selection-multi’s attrs method to set line and circle properties. The dataset is a hardcoded array of seven objects with x, y, and color values.

PPatrick Wojda
67% match
Loading thumbnail…

Fisheye Grid

A collection of SVG grid lines demonstrates fisheye distortion, where lines warp and magnify around a focal point that follows the mouse cursor. Heavy grid lines from d3.range for x- and y-axis positions are redrawn with path elements, and a d3.fisheye filter transforms each point on the lighter continuous lines based on its distance to the moving center. The example shows raw SVG paths updating dynamically with mouse movement, emphasizing the distortion effect.

Mmbostock
66% match
Loading thumbnail…

Aitoff Graticule

This visualization displays a global graticule—the network of latitude and longitude lines—projected using the Aitoff map projection. The black graticule lines are drawn as SVG paths, with a thicker outline marking the projection’s outer boundary. The code uses the D3.js v3 library, specifically `d3.geo.aitoff()`, `d3.geo.path()`, and `d3.geo.graticule()`, to generate the geographic coordinates and render them as vector graphics.

Mmbostock
66% 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
66% match
Loading thumbnail…

Grid Multi Foci Force Layout

This example shows a grid multi-foci force layout that clusters circles representing project statuses and owners. Each node is colored by a categorical scale and positioned near one of several fixed focal points arranged in a grid, with node radius encoding a numeric value. The visualization uses D3 v3’s force layout to simulate attraction toward these foci, with an ordinal x-scale mapping statuses to columns. Data is drawn from an inline JavaScript array, and rendering is done via SVG circles with jQuery used for window sizing.

FFrissAnalytics
65% 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
65% match
Loading thumbnail…

Magnifying Effect

This visualization demonstrates a magnifying effect on a grid of lines using a fisheye distortion. The display initially shows a uniform grid of vertical and horizontal paths rendered as SVG. When the mouse moves over the canvas, the code updates the fisheye’s center point and recomputes each path’s coordinates by mapping the original points through the `d3.fisheye` function. The distortion magnifies the area around the cursor, bending the lines outward while preserving the overall structure. The example uses D3 v3 with SVG rendering and custom mouse-event handlers to drive the interactive effect.

MManinder Singh
65% match
Loading thumbnail…

Rectilinear Grid

A mouse-driven rectilinear distortion grid demonstrates a fisheye effect on a Cartesian coordinate system. D3 v3 and SVG render vertical and horizontal paths spaced every 20 pixels, with finer 6-pixel segments preserving curve continuity. As the mouse moves, `d3.fisheye` recalculates the focal point, and the `line` generator maps each point through the fisheye function to update path attributes, creating a localized magnification that bends the grid around the cursor.

Mmbostock
64% match