Skip to main content
SimilarExport ZIP
100%

some

✓ Published0🌍 Public
AAdityan Nainar
Last edited Aug 25, 2024
Created on Aug 24, 2024

This example generates a geometric pattern of horizontal and vertical stripes across the full browser window, using D3.js version 7.9.0 to create SVG rectangles. Two circular masks reveal the stripes: the first mask shows horizontal lines within a white circle on black, while the second displays vertical lines in the inverse, creating an intersecting visual effect. The code uses D3's `select`, `range`, and `.join` API to efficiently append and position 100 rectangles in each direction, with the masks defined as separate SVG elements.

AI-generated description
MIT Licensed

Similar vizzes

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 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
85% 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
84% match
Loading thumbnail…

Visualization

This visualization creates a striped pattern of horizontal and vertical bars that are selectively revealed through two SVG masks. The masks use alternating black-and-white rectangles and D3 symbols to alternate visibility of the grid lines, producing an overlapping geometric composition. Built with D3 v7, the code uses `select`, `range`, `scaleBand`, and `symbol` to generate the shapes, while `append('mask')` and `attr('mask', ...)` control the clipping. The rectangles are sized based on `window.innerWidth` and `window.innerHeight`, with the pattern repeated 120 times across the screen.

DDaniel R Handoko
84% match
Loading thumbnail…

d3

This example demonstrates masked striped patterns overlaid on top of each other. It creates 100 horizontal rectangles and 100 vertical rectangles, each with a height or width of 10 pixels, spaced 20 pixels apart. The rectangles are masked using SVG masks with circular cutouts, creating a crosshatch effect with a circular reveal. The visualization uses D3 v6 with `select`, `selectAll`, and `data` joins to bind the mark arrays to the SVG elements, rendering the output as SVG in a React-styled HTML page.

Eelgato_1994
84% match
Loading thumbnail…

my first d3

This example generates a full-screen SVG composition of 100 horizontal and 100 vertical rectangles, each 10 pixels thick and spaced 20 pixels apart. Two SVG masks with 200-pixel-radius circles in the center determine visibility: the first mask (white circle on black) reveals horizontal strips, while the second (black circle on white) hides vertical strips. Using d3.select, d3.range, and the .join() pattern, the rectangles are created and styled, with the masks applied via the url(#…) attribute. The result is a striped grid where horizontal and vertical bars cross, creating a contrasting pattern inside and outside the circular regions. Data is procedurally generated from the range of 100.

NNeeraj Kumar
84% match
Loading thumbnail…

Fork of MaskTest 1

This example creates a geometric grid pattern using D3 v6, rendering horizontal and vertical stripes across the full browser viewport. Two SVG masks reveal the stripes through circular windows in the center of the screen. The first mask shows vertical lines inside a white circle on a black background, while the second mask inverts this effect. The code uses D3’s `select`, `range`, and `join` methods to generate the rectangles, with SVG `mask` elements and `circle` shapes determining the visible regions.

Zzhansihua
83% match
Loading thumbnail…

SVG Fundamentals

This example demonstrates how D3.js can generate and manipulate SVG elements to create a visual pattern. It creates 100 horizontal rectangles that span the full width of the browser window, with each rectangle positioned at increasing vertical intervals. The code uses D3’s `select` and `range` functions, along with a data join (`join('rect')`) to bind data to SVG `<rect>` elements. A mask with the ID `circle-mask` is referenced, though its definition is commented out, leaving the rectangles fully visible in the rendered output.

OOluro Olaoluwa
82% match