fisheye-rectangles

100%

fisheye-rectangles

✓ Published0🌍 Public

Last edited Aug 21, 2016

Created on Jun 22, 2015

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.

AI-generated description

Fisheye homepage for http://roadtolarissa.com

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

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

80% match

Loading thumbnail…

Cartesian Distortion (Fisheye)

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.

AAjayyy

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

76% match

Loading thumbnail…

rect-spiral

An animated grid of squares repeatedly collapses to points and expands into colored rectangles against a dark background. Each cycle, a new set of squares appears, and the staggered delays create a cascading effect as they grow to full size. The code uses D3.js, lodash, and custom d3-starterkit helpers, appending `rect` elements to an SVG and animating their `width`, `height`, `x`, and `y` attributes via `transition()`. The grid positions are derived from dividing the viewport into a matrix, and each square’s fill color is randomly generated.

11wheel

71% match

Loading thumbnail…

rect-blinds

The visualization shows a sequence of vertical rectangles that continuously slide and expand across the screen, each with a random color, creating an ever-shifting mosaic. The code uses D3.js and lodash to generate a set of rectangles with random widths, then animates their width and horizontal position using `transition.attr` for smooth movement. The rectangles are drawn with SVG `rect` elements inside a full-window `<svg>`, with each cycle restarting every six seconds. The animation relies on custom timing delays and durations tied to rectangle width, while colors are randomly generated as RGB strings.

11wheel

71% match

Loading thumbnail…

Gist 00170d49e926de0c3a9a

A grid of small circles and hexagon-like arrangements of rounded orange rectangles animates in a staggered transition. The visualization generates a field of triangular tile motifs, where each tile contains three small circles and three rounded rectangles positioned at their edges. Initially, the rectangles and circles sit at the tile centers; after a delay, they rotate outward to the triangle’s midpoints. Using D3.js with SVG transitions, the code applies `translate` and `rotate` transforms to reposition elements, driven by trigonometric calculations for hexagon geometry. The rendering uses D3 selections and transitions, with data-bound groups and nested arrays to handle multiple coordinates.

11wheel

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

71% match