Cartesian Distortion (Fisheye)

100%

Cartesian Distortion (Fisheye)

✓ Published0🌍 Public

Last edited Jun 19, 2018

Created on Jun 19, 2018

A fisheye distortion effect warps a Cartesian grid of vertical lines, magnifying the area around the mouse cursor. The grid spans a 960 by 180 pixel SVG canvas with lines spaced every 16 pixels. The implementation uses a custom `d3.fisheye` extension that provides both a `scale` transformation and a `circular` function, although only the linear x-axis fisheye scale is applied. As the mouse moves, the `focus` of the `xFisheye` scale updates, smoothly redrawing the vertical lines with a magnifying lens effect around the cursor.

AI-generated description

Built with blockbuilder.org

mit Licensed

Similar vizzes

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

87% 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

85% 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

85% match

Loading thumbnail…

fisheye-rectangles

A fisheye grid of 32 rectangles distorts in response to mouse movement, magnifying the hovered cell and shrinking its neighbors. Each colored cell shows a random name and date in its corner, with the distorted border thickness and text size reflecting proximity to the cursor. Built with D3.js and lodash, the visualization uses SVG clip paths and mouse event handlers to dynamically scale each rectangle’s geometry, creating a lens-like effect across the fixed 4x8 layout.

11wheel

78% match

Loading thumbnail…

Equirectangular Fisheye

An interactive world map applies fisheye distortion to an equirectangular projection, magnifying countries and graticules near the cursor while compressing them elsewhere. The distortion follows mouse or touch movement, recentering the projection on the pointer. The example uses D3 v3’s `d3.geo.path` and `d3.geo.projectionMutator` with custom `fisheye` functions, rendering to a Canvas 2D context with `clearRect`. It loads TopoJSON land and boundary data from the world-110m dataset, drawing land, country borders, and a graticule with distinct stroke styles and alpha values.

Mmbostock

72% match

Loading thumbnail…

SVG Geometric Zooming

A scatterplot of 2,000 normally distributed points demonstrates geometric zooming in SVG. The visualization shows how the entire coordinate system scales uniformly, with all circle radii increasing proportionally as the view magnifies. Built with D3 v4, the example uses `d3.zoom` attached to a background rectangle, applying the current transform directly to a group element containing all points. The code generates random positions via `d3.randomNormal` and renders each point as a circle with a `translate` transform, allowing the zoom handler to scale and pan the whole scene without recalculating individual positions.

Mmbostock

65% match

Loading thumbnail…

Fork of D3 Zoom

This example demonstrates interactive zooming and panning on an SVG canvas. A group of circles connected by lines, generated from trigonometric functions in `utils.js`, responds to mouse wheel and drag gestures through the `d3.zoom` API. The zoom behavior applies a scale transform to the container group, respecting a scale extent between 0.5x and 4x. The SVG output is created with the `select` and `append` methods from the `d3` v7 library.

KKhanin Sisaengsuwanchai

65% match

Loading thumbnail…

181202_04_ Nice hoevering effect

A grid of colored shapes on a large SVG canvas demonstrates a hovering effect, with white rectangles and concentric circles in steel blue, blue, dark blue, yellow, and light green arranged across vertical and horizontal green and red lines. The visualization divides the viewport into a parameterized grid using D3 v5's selection API, appending paths and circles via `append`, while styling lines through CSS classes. It uses `d3.zoom` to enable interactive panning and zooming, which updates the group's transform attribute based on the zoom event.

LLudovicGouverneur

65% match