Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

d3 start

Public visualization

d3 start

0 stars0🌍 Public
VVedran Škarica
Last edited Oct 18, 2023
Created on Oct 16, 2023
Forked from HTML Starter

This example creates a striped grid of horizontal and vertical rectangles, each masked so that the overlap reveals alternating symbol shapes. The visualization uses D3 v6’s `symbol` API to draw seven distinct shapes—circle, cross, diamond, square, star, triangle, and wye—as SVG paths inside two mask definitions. The masks are applied via the `mask` attribute to the rects, which are generated with `d3.range` and `join`. The page captures the full window dimensions, scaling the SVG and grid accordingly, and demonstrates a minimal React-free setup with D3 selections.

AI-generated description

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

See also React Starter.

Comments

Sign in to join the discussion.

MIT Licensed