The Vibratory Effect of Texture

100%

The Vibratory Effect of Texture

✓ Published0🌍 Public

Last edited Feb 15, 2017

Created on Feb 15, 2017

This visualization reproduces figure 1 from Jacques Bertin’s *Semiology of Graphics*, demonstrating the vibratory optical effect created by alternating black and white vertical stripes. The SVG renders 80 rectangles, each half the width of the column spacing, using D3 v4’s `selectAll` and `enter` methods to bind data from `d3.range`. The code sets each rectangle’s position proportionally across a 960×500 canvas, producing a dense striped pattern that evokes the uncomfortable visual sensation Bertin describes.

AI-generated description

A D3 replica of figure 1 on page 80 of "Semiology of Graphics".

The Vibratory Effect of Texture <br> Black and white combined in a certain way over areas can create the uncomfortable sensation produced by figure 1. This visual effect constitutes a remarkable selective possibility when it is properly utilized. -- Jacques Bertin

Built with blockbuilder.org

mit Licensed

Similar vizzes

Loading thumbnail…

The Vibratory Effect of Texture

This visualization replicates figure 1 from Jacques Bertin's *Semiology of Graphics*, demonstrating the vibratory effect created by alternating black and white vertical stripes. The SVG rendering uses 80 rectangles of equal width, each half the width of a stripe, to produce the optical illusion of vibration. Built with D3 v6, the code selects body elements, appends an SVG canvas sized to the window, and binds data via `selectAll('rect')` and `.enter()`. The result is a minimalist exercise in perceptual psychology through geometric texture.

CCurran Kelleher

97% match

Loading thumbnail…

Visualization

This visualization creates a striped pattern of horizontal and vertical bars that are selectively revealed through two SVG masks. The masks use alternating black-and-white rectangles and D3 symbols to alternate visibility of the grid lines, producing an overlapping geometric composition. Built with D3 v7, the code uses `select`, `range`, `scaleBand`, and `symbol` to generate the shapes, while `append('mask')` and `attr('mask', ...)` control the clipping. The rectangles are sized based on `window.innerWidth` and `window.innerHeight`, with the pattern repeated 120 times across the screen.

DDaniel R Handoko

72% match

Loading thumbnail…

Sol LeWitt Reproduction in D3

This example reproduces a Sol LeWITT-style drawing in D3, showing a grid of horizontal and vertical stripes that intersect to form a ring-like pattern. The visualization uses two sets of 100 SVG rectangles, each masked to reveal or hide specific areas, creating a dynamic optical effect. Built with D3.js version 7, it leverages `select`, `range`, and chained `.attr()` calls to generate the geometry, while SVG mask elements define the circular cutouts that expose the alternating stripe layers. The code renders directly to the browser window using the SVG rendering approach.

BBrady Atomos

69% match

Loading thumbnail…

D3 Version Sol LeWitt Reproduction

This visualization reproduces a Sol LeWitt art piece using D3 v6 to generate dense horizontal and vertical striped patterns across the full viewport. Through two circular SVG masks, the code selectively reveals horizontal lines in one circular region and vertical lines in an overlapping area, creating a striking crosshatch effect. The rendering employs D3 selections with `range(n)` to generate 100 rectangular bars per axis, applying masks via `attr('mask', 'url(#circle-mask)')`. The piece demonstrates minimalist geometric abstraction through programmatic SVG construction.

EEdgar Cortez

69% match

Loading thumbnail…

some

This example generates a geometric pattern of horizontal and vertical stripes across the full browser window, using D3.js version 7.9.0 to create SVG rectangles. Two circular masks reveal the stripes: the first mask shows horizontal lines within a white circle on black, while the second displays vertical lines in the inverse, creating an intersecting visual effect. The code uses D3's `select`, `range`, and `.join` API to efficiently append and position 100 rectangles in each direction, with the masks defined as separate SVG elements.

AAdityan Nainar

69% match

Loading thumbnail…

Untitled

This visualization creates a circular aperture effect on a full-screen grid of horizontal and vertical black bars. Using D3 selections and data joins, the code generates 30 horizontal and 80 vertical rectangular strips, then applies two SVG masks with white and black circles at the center to selectively reveal or hide intersections. The result resembles a moiré pattern or camera viewfinder, where overlapping bars form a circular optical illusion against the white background. The implementation uses D3’s `select`, `data`, and `enter` APIs along with SVG mask elements to achieve the layered visual effect.

Ssubratanp

68% match

Loading thumbnail…

Distribution Scatter 2

A grid of 700 narrow vertical rectangles spans the full height of the visualization, each sampled from a Pareto distribution using `d3.randomPareto` and scaled by 25. Every five seconds, the entire composition shifts color as the background rectangle and all foreground rectangles smoothly transition between one of six predefined color palettes, alternating between dark and light themes. The animation uses `transition().duration(1000)` on both the background and foreground elements, cycling randomly through palettes with contrasting pairs like teals, blues, or violets. Rendered as SVG with semi-transparent rectangles (0.02 opacity), the overlapping shapes create a dense, layered texture across the 960×500 canvas.

WWaseem Medhat

68% match

Loading thumbnail…

Gist 67b47524ed8ed829d021

This animated SVG visualization, rendered with D3.js, explores how geometric forms can be generated through code. The page loads a script called `circle-lattice.js` that draws a grid of small, semitransparent red rectangles, each with a faint stroke trail that animates to show their movement or placement over time. The layout is minimal—a single heading "Scripts" above the canvas—and the emphasis is on the lattice of shapes as they are built and possibly repositioned, revealing structural patterns through the animation. The visualization uses D3's data-binding and SVG rendering to create a dynamic, generative composition.

11wheel

68% match