Fisheye Grid

100%

✓ Published0🌍 Public

Last edited Feb 9, 2016

Created on Jun 20, 2012

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.

AI-generated description

The above grid shows the effect of fisheye distortion. Move the mouse to change the focal point.

gpl-3.0 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

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

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

82% match

Loading thumbnail…

Axis Grid

This example showcases a static, abstract axis grid rendered as an SVG. The central visual features a series of grid lines with deliberate, small gaps at their intersections, creating a dotted or segmented pattern that echoes the look of analog signal interference. The code constructs the grid using D3.js scaling and axes, specifically `d3.scaleLinear`, `d3.axisBottom`, and `d3.axisLeft`, with tick sizes set to span the full chart width and height. It further annotates the grid with small clusters of black dashes and two alternating rows of dots, all generated procedurally within the script.

KKelvinZCH

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

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

71% match

Loading thumbnail…

D3 JS

An SVG grid of 100 horizontal and 100 vertical rectangles covers the full viewport. Two circular masks, defined via D3's `mask` element, create a lens-like effect: the first mask exposes a central white circle outlined by black-filled rectangles, while the second inverts the fill to produce a complementary pattern. Using D3 v7's `join` method, the code binds `d3.range` data to generate the rectangles, with each strip sized 10 pixels thick and spaced 20 pixels apart. The overlapping masks reveal alternating stripe orientations, forming a dynamic moiré-like crosshatch within the central circular region.

TTehran Mammadov

70% match

Loading thumbnail…

HTML Starter

This example renders a lightweight grid visualization inside an SVG element, with horizontal and vertical lines spaced every 20 pixels across a 960-by-500 canvas. The static grid serves as a simple geometric backdrop, demonstrating basic SVG construction without any interactive or data-driven elements. The code uses the d3.select and d3.append APIs to build the grid lines, applying a gray stroke via CSS classes. The dataset is generated programmatically from the SVG’s dimensions, and the rendering relies solely on vector shapes defined in pure SVG, with no external data source or animations involved.

SScott Page USMC

69% match