Working with D3

100%

Working with D3

✓ Published1🌍 Public

Last edited Apr 7, 2026

Created on Apr 6, 2026

This example creates a grid of horizontal and vertical stripes that are visible only through a circular aperture in the center of the canvas. Horizontal rectangles are masked by a circle of white on black, while vertical rectangles are masked by a black circle on white, revealing the underlying pattern. The code uses D3’s `select`, `range`, and `join` methods to generate the SVG rects and masks, setting widths to the full window and heights to 500 pixels.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

D3

Using D3’s select and range APIs, this example renders a grid of horizontal and vertical SVG rectangles. Two masking circles reveal a cross-shaped intersection in the center, combining white and black fills to create the visual effect. The SVG output is generated with chained join operations and attribute setters.

Vvstefanovic3@gatech.edu

86% match

Loading thumbnail…

D3 JS

An SVG grid of 100 horizontal and 100 vertical rectangles covers the full viewport. Two circular masks, defined via D3's `mask` element, create a lens-like effect: the first mask exposes a central white circle outlined by black-filled rectangles, while the second inverts the fill to produce a complementary pattern. Using D3 v7's `join` method, the code binds `d3.range` data to generate the rectangles, with each strip sized 10 pixels thick and spaced 20 pixels apart. The overlapping masks reveal alternating stripe orientations, forming a dynamic moiré-like crosshatch within the central circular region.

TTehran Mammadov

86% match

Loading thumbnail…

D3 beginning

This example shows a grid of thin horizontal and vertical rectangles that intersect to form a visible weave pattern, with a circular region in the center where the crossing lines appear to invert in contrast. The visualization uses D3 v6’s `select` and `range` functions to generate 100 rectangles in each direction, appended as SVG elements across the full window width and height. Two SVG masks, each containing a rectangle and a circle, selectively control which parts of the horizontal and vertical lines remain visible, creating the central circular effect against a dark background.

AAleOG

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

85% match

Loading thumbnail…

D3

This example shows a grid of alternating horizontal and vertical white rectangles on a black background, with two circular cutouts that create a cross-like overlapping pattern. It uses the Document Object Model (DOM) API to create SVG elements programmatically, including `document.createElementNS` for `svg`, `rect`, and `circle` nodes. Two SVG masks, `circle-mask` and `circle-mask2`, use contrasting fill colors to reveal or hide the rectangles. The code generates 100 horizontal rectangles and 100 vertical rectangles with fixed spacing, applying the masks to produce the final geometric composition.

Mmartina.dallamico.1@studenti.unipd.it

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

84% match

Loading thumbnail…

d3

A grid of alternating horizontal and vertical SVG rectangles is masked to reveal a circular window at the center of the viewport. The example demonstrates how to construct and apply multiple SVG masks using D3’s selection and data-join methods, specifically `selectAll` with `range` and `join('rect')`. Two masks (`circle-mask` and `circle-mask-2`) use black-and-white rectangles and circles to control visibility of the 50 strips in each direction.

Sserebryanaya.n@gmail.com

84% match

Loading thumbnail…

D3

This example demonstrates layered masking in SVG to create a grid of horizontal and vertical lines that intersect around a central circular opening. It uses D3’s `select` API alongside raw DOM manipulation to append two complementary masks, each defining a circular region of white or black fill. The code renders 100 horizontal and 100 vertical rectangles, applying one mask to each set so that lines are hidden or revealed in alternating patterns around the circle. The result is a moiré-like visual effect built purely from basic SVG shapes and mask definitions.

MMuhammad Dawood Rafique

84% match