Vibrational effect

100%

Vibrational effect

✓ Published0🌍 Public

Last edited Dec 31, 2016

Created on Dec 31, 2016

This matrix of 100 circles demonstrates a vibrational effect, a visual phenomenon where certain patterns appear to shimmer or pulse, based on Jaques Bertin’s *Semiology of Graphics*. The display shows a grid of symbols with varying value (black area ratio) and texture (number of rings), revealing that the strongest vibration occurs when the black area is roughly 50–60% of the whole. Each cell is constructed using three concentric SVG circles (`circle`) whose radii are derived from the value and texture properties via `propertiesToRadii`, which maps these inputs to areas and then to radii. The data is generated by `makeData`, which combines two arrays from `d3.range` for values and textures, and is positioned using `d3.scale.linear`. The SVG is appended to the body directly, with styling for outer, inner, and background circles defined in CSS.

AI-generated description

A recreation of a figure from Jaques Bertin's Semiology of Graphics illustrating the visual vibration achieved with certain textures and values. The effect typically appears when the proportion of the black area in the symbol ranges from 50 to 60% (ie. in the middle of this picture). Whilst this can be unpleasant Bertin identifies it as a key tool for information designers because of its powerful ability to draw a readers attention.

Here's the original...

bertins original image

forked from <a href='http://bl.ocks.org/tomgp/'>tomgp</a>'s block: <a href='http://bl.ocks.org/tomgp/dc6c6301e68b8934e2fd'>Vibrational effect 1</a>

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

82% match

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

82% match

Loading thumbnail…

Creative Coding — Circles Abhyudai Thakur

Four hundred twenty semi-transparent circles animate between grid, Phyllotaxis spiral, and parametric heart layouts, with color themes cycling through Turbo, Sinebow, Cool, and Warm interpolators. The D3 v7 SVG visualization responds to keyboard shortcuts for layout and theme changes, while hover and click interactions trigger radius transitions and elastic pulse effects via `transition.attr` and `easeElastic`. Circle radii incorporate deterministic jitter, and the responsive design recalculates positions on window resize.

Aabhyudaithakur7@gmail.com

74% match

Loading thumbnail…

D3-Arrays

Fifteen black circles undulate in a vertical sine-wave pattern across a full-screen SVG. Each circle updates its vertical position based on a time-incremented angular offset, creating a smooth, animated wave. The example uses D3 v7's `select`, `range`, and `symbol` APIs, with a JavaScript `setInterval` driving the animation loop. Data is generated on the fly as an array of position objects, bound to circle elements via D3's data join, while SVG attributes are updated each tick.

Gg1g10

74% match

Loading thumbnail…

Circles

A field of 1,000 small circles drifts randomly across an SVG canvas, wrapping around the edges when they exit the viewport. A text label in the corner displays a live frames-per-second counter. The animation uses `d3.timer` to update each circle's `cx` and `cy` attributes every frame, with positions stored in a data array generated from `d3.range(1000)` and `Math.random`. The code runs on D3 v3 and renders purely with SVG elements.

Mmbostock

73% match

Loading thumbnail…

Creative Circles by Charan

Four hundred twenty rainbow-colored circles spiral outward from the center of an SVG canvas, positioned using the golden angle and square-root scaling to form a galaxy-like pattern. Each circle expands from a radius of zero in a staggered transition, then gently pulses in size through a recursive `pulse()` function using `d3.easeSinInOut`. The visualization uses D3 v7’s selection, data join, and transition APIs, with colors generated via `d3.interpolateRainbow` on a light green background.

Ccsabavath@wpi.edu

73% match

Loading thumbnail…

Creative Circles by Charan

Ccsabavath@wpi.edu

73% match

Loading thumbnail…

canvas circles

The visualization displays a grid of randomly colored circles that continuously appear and expand across the screen. It shows a generative animation where each frame introduces new circles at shuffled grid positions, growing from zero to full size before fading away. The code uses D3.js with SVG elements, leveraging transitions to animate circle radius and removal. Rendering depends on the d3-starterkit and d3-jetpack libraries for concise element creation and data binding. Colors are randomly generated RGB values applied to fill and stroke. The animation runs indefinitely via recursive setTimeout calls, creating an evolving, ever-changing mosaic of overlapping rings on a dark background.

11wheel

73% match