Rectilinear Grid

100%

Rectilinear Grid

✓ Published0🌍 Public

Last edited Feb 9, 2016

Created on Jun 20, 2012

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.

AI-generated description

The above grid shows the effect of rectilinear distortion. Move the mouse to change the focal point. I wouldn't recommend this technique; see my post on fisheye distortion for a better example of Cartesian distortion.

gpl-3.0 Licensed

Similar vizzes

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

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

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

80% match

Loading thumbnail…

Rounded Rectangles

A grid of 25 rounded rectangles animates toward the mouse position while continuously rotating, with each rectangle’s fill color drawn from a categorical scale. Driven by a d3.timer, each tick updates the rectangles’ center coordinates and rotation angle based on their distance to the cursor. The SVG shapes use `rx` and `ry` attributes, and the code leverages D3’s data binding, `d3.scale.category20c`, and a `mousemove` event to track the pointer. This example adapts a Paper.js demo into D3 with animated transforms.

Mmbostock

73% 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…

vertical jittered line (grids)

This example renders a grid of vertical jittered lines, where each line is drawn within a brick-shaped cell and perturbed by random offsets in both x and y directions. It uses d3.gridding to arrange 3,050 data points into a brick layout, then d3.line with curveBasis to draw each path from five sequentially spaced points. The random jitter is applied via Math.random() within the line generator, producing a scribbled, hand-drawn aesthetic. The visualization is built with D3 v4 and rendered as SVG paths.

FFrissAnalytics

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

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

71% match