Skip to main content
SimilarExport ZIP
100%

D3 Implementation

✓ Published10🌍 Public
SSubhamChhetri
Last edited Feb 10, 2023
Created on Feb 10, 2023
Forked from Hello VizHub

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.

AI-generated description
MIT Licensed

Similar vizzes

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
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 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…

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 Shapes SVG Fundamentals

This example demonstrates how D3 SVG masks can create geometric patterns from overlapping rectangular bands. Two sets of perpendicular stripes, each consisting of 100 horizontal and vertical rects, are filtered through circular mask shapes generated with the `symbol` API. The first mask uses a filled star symbol to hide the horizontal lines, while the second, inverted mask reveals the vertical lines through the same symbol shape. The code uses `d3.select`, `d3.range`, and `d3.symbols` with the `join` pattern to render the full-screen SVG grid.

Ssubratanp
85% match
Loading thumbnail…

some

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.

AAdityan Nainar
84% match
Loading thumbnail…

Different Shapes Using D3

This example demonstrates how SVG masks can create visual variety from simple repeated shapes. Two sets of horizontal and vertical rectangles, each positioned across the full canvas, use complementary circular masks to reveal their pattern. The first mask shows the horizontal bars through a white circle on a black background, while the second inverts this to display vertical bars through a black circle on white. Built with D3 v3 and the `select`, `append`, and `join` APIs, the code generates 100 rectangles per direction, producing a crosshatch effect that is dynamically clipped to form circular windows.

Ssharmamilan632.m@gmail.com
84% match
Loading thumbnail…

D3.js Practice Session 2 - Masks Circle and rectange

This example demonstrates the use of an SVG mask to selectively reveal horizontal stripes while concealing vertical ones. The visualization renders 100 horizontal and 100 vertical rectangle elements, each with distinct dimensions, onto an 800x600 canvas. The mask, defined with the ID `circle-mask`, consists of a full-size black rectangle and a central white circle with a radius of 200. Only the horizontal rectangles apply the mask, resulting in a visible circular pattern where they intersect, while the vertical rectangles remain unaffected. The code leverages raw SVG manipulation through `createElementNS` and attribute setters, without high-level D3.js abstractions, relying instead on direct DOM construction.

KKoneti Hemanth Raju
84% match