The Vibratory Effect of Texture

100%

The Vibratory Effect of Texture

✓ Published0🌍 Public

Last edited Jan 16, 2021

Created on Jan 15, 2021

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.

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

MIT Licensed

Similar vizzes

Loading thumbnail…

The Vibratory Effect of Texture

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.

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

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

68% match

Loading thumbnail…

stroke-width

This example demonstrates the visual impact of varying stroke widths on a simple pattern. It presents five white squares, each filled with vertical line textures of increasing thickness, from one to nine pixels, while the squares’ own black outlines also grow in width. The visualization is built using D3.js (v5) and the `textures` library, specifically calling `textures.lines().orientation().strokeWidth()` to generate each pattern within an SVG canvas. The code directly manipulates SVG `rect` and texture attributes to create a clear comparative scale.

Zzoniyac

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

67% match

Loading thumbnail…

dot-density

Five square panels each display a distinct dot-density texture, ranging from a sparse chevron pattern to progressively denser grids of circles. The visualization demonstrates how varying dot sizes and spacing create different visual densities and surface textures. It uses the textures library to generate SVG pattern fills, with each rectangle importing a different texture via the `.url()` method. The code calls `textures.paths()` for the chevron design and `textures.circles()` at four different sizes to populate the remaining panels.

Zzoniyac

67% match

Loading thumbnail…

Texture Test

This example demonstrates how to combine color and texture scales independently for categorical data, using a 12×12 grid of circles where each circle’s fill encodes a (color, texture) pair. The code pairs three color values with three texture generators from textures.js, then builds a nested ordinal scale to create unique SVG defs for every combination, since textures cannot change color per mark. Circles transition their radius randomly over one-second intervals. The visualization uses d3.scaleOrdinal, textures.lines, textures.circles, textures.paths, and d3.transition to animate the marks.

CCurran Kelleher

67% match

Loading thumbnail…

dot-density

Five square SVG rectangles display a graduated sequence of dot-density textures using the textures.js library for D3 v5. Each rectangle uses a `textures.circles()` pattern with progressively smaller circle sizes, from large to tiny dots, and applies the texture via `style("fill", t.url())`. The example demonstrates how varying pattern scale creates visual differentiation across identical shapes.

Zzoniyac

67% match