Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Fork of D3 Starter

Public visualization

Fork of D3 Starter

0 stars0🌍 Public
DDONAR144-release
Last edited Aug 21, 2022
Created on Aug 21, 2022
Forked from D3 Starter

This example layers two sets of thin rectangles—horizontal and vertical—across the full screen, creating a grid of lines. Masking with circles reveals a central circular region where the lines intersect, while the surrounding area shows only the horizontal lines. The code uses D3 v7’s `select`, `range`, and `join` methods to generate the rects, and SVG `mask` elements with `rect` and `circle` shapes to control visibility. The visualization dynamically sizes to the browser window using `window.innerWidth` and `window.innerHeight`.

AI-generated description

A demonstration of how to start using D3 version 6.

Comments

Sign in to join the discussion.

MIT Licensed