D3 — VizHub

100%

D3

✓ Published0🌍 Public

Last edited Jan 11, 2024

Created on Jan 11, 2024

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.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

Similar vizzes

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

89% match

Loading thumbnail…

Learn D3

This example demonstrates how SVG masks can create a striking visual composition using only rectangles and circles. It renders 100 horizontal and 100 vertical thin rect elements across the full viewport, with each set masked by a circular aperture defined via native SVG `mask` elements. The first mask uses a white circle on a black background, while the second inverts the colors to alternate visibility between the two rectangle sets. No D3 library calls appear in the code; instead, it relies on `document.createElementNS` and `setAttribute` for all SVG construction, making it a pure vanilla JavaScript and SVG demonstration.

MMark Christian

89% match

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

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

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

87% match

Loading thumbnail…

D3 first steps

This example generates a full-screen grid of 100 vertical and horizontal bars using D3 selections and joins, then applies two circular SVG masks to create a striking cross-hatch pattern. Built with a React-wrapped D3 v6 setup, the code uses `select`, `range`, and `join` to bind data to rectangles, while the masks—one with a white circle on black, the other inverted—reveal and hide intersecting lines around a central focal point.

Ccyriltoneatto965

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

87% match

Loading thumbnail…

SVG Fundamentals

This example demonstrates SVG masking with intersecting grid lines. Horizontal and vertical rectangles form a crosshatch pattern across a 960×500 canvas. Two circular masks reveal different portions: the first shows the grid inside a centered circle, while the second displays the grid outside it, creating complementary visual regions. The code uses D3 v6 selection methods like `select`, `append`, `selectAll`, and `join` to generate 100 rects in each direction. React handles page setup, while SVG `mask` elements with black and white fill shapes define the visibility areas.

AAditya Joshi

86% match