Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

D3 Starter

Public visualization

Viewing a saved revision (read-only)

26e5e4b82a8f49f59a9f3bd383e827a7

D3 Starter

0 stars1🌍 Public
Llt_vandegrift@live.com
Last edited May 1, 2024
Created on May 1, 2024

This example demonstrates generating a grid of horizontal and vertical lines across the full browser window, masked by two circular cutouts. The alternating line orientations create a crosshatch pattern that appears only within the circular regions, leaving the rest of the canvas blank. The visualization uses D3's `select` and `range` functions to append SVG `rect` elements, with masks (`circle-mask` and `circle-mask-2`) defining the visible areas. The code highlights the declarative D3 API for data-driven element creation and SVG attribute manipulation.

AI-generated description

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

See also React Starter.