Start d3

100%

✓ Published0🌍 Public

Last edited Dec 30, 2022

Created on Dec 26, 2022

The visualization creates a full-screen SVG pattern of horizontal and vertical lines, masked by shapes derived from the `d3.symbols` set. Each line is a rectangle positioned by data generated with `d3.range`, and the masks use `d3.symbol` to render glyph-shaped cutouts. The visualization shows the interplay between the line grid and the symbolic mask shapes, which alternate between inverted and non-inverted states. The code uses the `d3` library's `select`, `range`, `symbol`, and `symbols` APIs, along with SVG masks and paths.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

d3 start

This example creates a striped grid of horizontal and vertical rectangles, each masked so that the overlap reveals alternating symbol shapes. The visualization uses D3 v6’s `symbol` API to draw seven distinct shapes—circle, cross, diamond, square, star, triangle, and wye—as SVG paths inside two mask definitions. The masks are applied via the `mask` attribute to the rects, which are generated with `d3.range` and `join`. The page captures the full window dimensions, scaling the SVG and grid accordingly, and demonstrates a minimal React-free setup with D3 selections.

VVedran Škarica

85% match

Loading thumbnail…

Full Fork of D3 Starter

This example demonstrates how D3 SVG masks can create overlapping geometric patterns. It generates 100 horizontal and 100 vertical rectangles, then applies two distinct masks with inverted fill rules to reveal or hide different regions. The code uses D3’s `select`, `range`, `symbols`, and `symbol` APIs to draw predefined symbol shapes within each mask. The visualization fills the browser window, with symbol paths placed at regular intervals across the width, producing a dynamic interplay between the grid lines and masked shapes.

Llt_vandegrift@live.com

82% match

Loading thumbnail…

D3 Starter

This example builds a full-screen SVG visualization of 50 horizontal rectangles arranged in a vertical sequence, with their heights and spacing varying incrementally by index. A circular mask reveals only the central portion of the layered bars, creating a lens-like effect against a white background. The code uses D3 v7 selections and the `range()` generator to bind data, then appends rectangles via `join()`. A dedicated `<mask>` element contains a single white circle positioned at the center, demonstrating basic D3 masking and data-binding techniques.

Sscheenmi@gmail.com

81% match

Loading thumbnail…

Fork of D3 Starter

This example demonstrates how D3 v7 masks can create striking geometric patterns from overlapping shapes. It uses `d3.select`, `d3.range`, `d3.symbols`, and `d3.symbol` to render seven distinct SVG symbols (like crosses and diamonds) into two complementary masks, one inverted. Over these masks, it places grids of black horizontal and vertical rectangles via SVG `rect` elements, with `d3.join` managing data-bound elements. The resulting composition shows the symbols as cutouts or solid forms depending on mask polarity, producing a dynamic interplay of positive and negative space across the full browser window.

Eelisabet@pitch.io

81% match

Loading thumbnail…

D3 Starter

This example demonstrates a generative, grid-based visual composition using D3 version 7. It creates an SVG canvas that fills the browser window and draws 100 horizontal and vertical striped rectangles, each masked by a set of overlaid symbols. The code uses D3's `select`, `range`, `symbols`, and `symbol` APIs to generate the stripes and to render mask patterns that reveal or hide the underlying grid. The masks are created with SVG `<mask>` elements, and the two complementary masks produce an interlaced effect across the screen.

AAhsanNayaz

81% match

Loading thumbnail…

Starting with D3

This example creates a full-screen SVG pattern of horizontal and vertical stripes using D3’s `select`, `range`, and `join` methods. Two sets of 100 rectangles are generated, each masked to reveal or hide a circular region at the center. The code uses SVG `mask` elements with black-and-white circles to produce a cross-shaped visual intersection. The data is synthetic, generated via `range(n)`, and rendered entirely with D3 v6 and SVG attributes.

Pphilmae

81% match

Loading thumbnail…

D3 Starter

This example demonstrates generating a grid of horizontal and vertical lines across the full browser window, masked by two circular cutouts. The alternating line orientations create a crosshatch pattern that appears only within the circular regions, leaving the rest of the canvas blank. The visualization uses D3's `select` and `range` functions to append SVG `rect` elements, with masks (`circle-mask` and `circle-mask-2`) defining the visible areas. The code highlights the declarative D3 API for data-driven element creation and SVG attribute manipulation.

Llt_vandegrift@live.com

80% match

Loading thumbnail…

Sol D3

Two intersecting sets of thin horizontal and vertical lines form a grid across the full screen. D3 symbols (shapes) are used as masks to selectively reveal or hide sections of these lines, creating a pattern inspired by Sol LeWitt's wall drawings. The code uses `d3.select`, `d3.range`, `d3.symbol`, and `d3.symbols` to generate SVG rectangles and masked paths, with two mask layers applied in opposite color inversions.

Jjonathanh21

80% match