Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

D3 Implementation

Public visualization

D3 Implementation

1 star10🌍 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

Comments

Sign in to join the discussion.

MIT Licensed