d3 — VizHub

100%

d3

✓ Published1🌍 Public

Last edited Feb 13, 2023

Created on Feb 10, 2023

Forked from svg mask

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.

AI-generated description

An example including some commonly used features of SVG.

MIT Licensed

Similar vizzes

Loading thumbnail…

D3.js fundamental

This example demonstrates how SVG masks can be used to create geometric cutouts in layered grid patterns. It renders 100 horizontal and vertical rectangles across the full viewport, each masked by a circle that reveals or hides portions of the grid. The code uses D3.js v7 with the `select`, `selectAll`, and `range` APIs to generate the shapes, while two separate `<mask>` elements with contrasting fill colors control visibility. A white-filled mask with a black circle creates the first cutout, and an inverted mask creates the second, producing two distinct circular viewing windows.

Ddeebanks77

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

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

87% match

Loading thumbnail…

D3 Implementation

This example demonstrates how D3’s selection and data-join methods can create intersecting horizontal and vertical stripes across the full viewport. Two groups of rectangles, each bound to an array of 100 values via `d3.range`, are drawn with alternating orientations—one set spanning the width, the other the height. Using SVG `mask` elements, two circular masks are applied: one reveals the horizontal stripes inside a white circle on a black background, while the other does the reverse for vertical stripes. The result is a cross-hatched pattern visible only within the defined circular regions.

SSubhamChhetri

87% match

Loading thumbnail…

svg fund

A grid of 100 thin horizontal rectangles spans the full width of the viewport, but a circular mask reveals only the central portion of this striped pattern. The visualization demonstrates how SVG masks work by layering a white circle on a black background to selectively hide or show the underlying marks. Built with D3’s `select`, `range`, and `join` methods, the code appends rectangles with a shared `mask` attribute, then constructs the mask using SVG `mask` and `circle` elements. The data is a simple sequential range, and the circle is centered at half the window’s dimensions.

LLamaab02

86% match

Loading thumbnail…

d3 tutorial

This example demonstrates a simple SVG visualization where 100 horizontal rectangles are drawn across the full window width, with a circular mask revealing only the central portion of the stacked bars. The code uses d3.select, d3.range, and the .join() method to bind data to rectangle elements, then appends an SVG mask containing a black background rect and a white circle to create the viewport effect. Rendering is handled entirely through SVG attributes, with the visualization sized dynamically to the browser window.

JJesper Martinsson

85% match

Loading thumbnail…

MaskTest

This example demonstrates how SVG masks can create intersecting geometric patterns. Two sets of thin, full-length rectangles—horizontal and vertical—are drawn across the entire viewport using d3.range and d3.selectAll. Each set applies a different circular mask: one reveals a white circle against a black background, while the other inverts the mask, hiding the circle. The result is a crosshatched grid with a central circular region where the two masked layers visibly interact. The code uses D3 v6 selections and the SVG `<mask>` element.

Zzhansihua

85% match

Loading thumbnail…

D3 mask all shapes

This example demonstrates how D3.js mask elements can selectively hide or reveal overlapping shapes, creating a geometric grid pattern of 100 horizontal and vertical rectangles. The visualization uses two SVG masks with inverted color schemes—one black with white symbols and one white with black symbols—to control visibility across the layers. It employs `d3.select`, `d3.range`, `d3.symbol`, and `d3.symbols` to generate and position the mask paths, while SVG rects and mask attributes handle the rendering. The code adapts automatically to the browser viewport dimensions.

JJetlinZ

85% match