Alp

@alptezbasaran·3 public vizzes

JavaScript arrays

A grid of thin horizontal and vertical stripes is overlaid with a mask containing five distinct geometric symbols—such as circles and crosses—rendered using D3’s `symbol` generator. The masks, created with `d3.select` and `append`, alternate between inverting the stripes’ visibility, revealing the symbol shapes as cutouts. Horizontal stripes use one mask, vertical stripes another, producing intersecting patterns across the full window. The example uses D3 v6.6.1, SVG rendering, and 100 iterations each of `range(n)` to generate the stripe data.

Oct 18, 2023

Loading thumbnail…

Full Sol Lewitt with D3

This example generates a full-screen SVG pattern of alternating horizontal and vertical stripes, with Sol Lewitt-inspired geometric symbols appearing through mask cutouts. Two separate mask layers—each containing a row of D3 symbol shapes—reveal or hide the stripe groups to create layered, interlocking compositions. The visualization uses D3 v6 APIs including `select`, `range`, `symbol`, and `symbols`, with masks defined via `append('mask')` and filled using `rect` and `path` elements. Data is procedurally generated with `range(n)` rather than loaded from an external source.

Apr 17, 2023

Loading thumbnail…

Always Ayak

Two intersecting sets of thin SVG rectangles form a dense horizontal-and-vertical grid across the full browser window. A circular mask reveals only a central disk of this pattern, creating a moiré-like focal point against a plain background. The visualization is built with D3 v6, using `select`, `range`, and `data` joins to generate one hundred rectangles in each direction. The second mask inverts its fill to reverse the visible region, all rendered dynamically to the viewport's dimensions via `window.innerWidth` and `innerHeight`.

Apr 17, 2023