Fork of D3 Starter

100%

Fork of D3 Starter

✓ Published1🌍 Public

Jjesusgaitan2014@hotmail.com

Last edited Apr 23, 2024

Created on Apr 22, 2024

Two overlapping sets of purple stripes, one horizontal and one vertical, form a decorative lattice pattern on an SVG canvas. The visualization applies two distinct masks to reveal alternating sections, with each mask containing a sequence of symbols from D3’s `symbols` array, such as circles and crosses, placed at regular intervals. Built with D3 v7, the code uses `select`, `range`, `symbol`, and `symbols` to generate paths and rectangles, while `join` handles enter and update selections. The result demonstrates reusable mask generation for creating complex visual effects from simple geometric shapes.

AI-generated description

A demonstration of how to start using D3 version 6.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Full Fork of D3 Starter

This example demonstrates a generative pattern of horizontal and vertical bars overlaid with SVG masks that reveal circular shapes derived from D3 symbols. The visualization renders 100 thin rectangular strips in each direction, sized to the viewport, and applies a mask containing a symbol path. Using D3 v6 with the `select`, `range`, `symbols`, and `symbol` APIs, the code constructs SVG elements dynamically, with the mask’s fill toggled by an `inverted` boolean to alternate visible regions. It functions as a starter template emphasizing minimal layout and mask-based clipping.

Llt_vandegrift@live.com

89% match

Loading thumbnail…

Fork of D3 Starter

This example demonstrates how D3 v7 masks can create striking geometric patterns from overlapping shapes. It uses `d3.select`, `d3.range`, `d3.symbols`, and `d3.symbol` to render seven distinct SVG symbols (like crosses and diamonds) into two complementary masks, one inverted. Over these masks, it places grids of black horizontal and vertical rectangles via SVG `rect` elements, with `d3.join` managing data-bound elements. The resulting composition shows the symbols as cutouts or solid forms depending on mask polarity, producing a dynamic interplay of positive and negative space across the full browser window.

Eelisabet@pitch.io

89% match

Loading thumbnail…

Fork of D3 Starter

This example demonstrates a generative grid of horizontal and vertical striped bars rendered as an SVG, overlaid with circular mask effects that reveal or conceal portions of the pattern. The code uses D3 v3’s selection, selection, range, symbols, and symbol APIs, appending rectangles to an SVG canvas sized to the window. Two masks are created via the renderMask function, each with a path drawn from the symbol API’s circle shape, applying inverted fill logic to produce contrasting visibility. The visualization is purely procedural, with no external data source.

EErika Tomakic

88% match

Loading thumbnail…

Fork of Fork of D3 Starter

This example creates a black-on-white striped pattern using 100 horizontal and vertical rectangles, with the stripes clipped by two D3 SVG masks. The masks are defined with a central symbol glyph (drawn via `d3.symbol`) surrounded by concentric ring symbols, where one mask uses a white glyph on a black background and the other inverts the colors. The clipped stripe grid reveals the layered symbol composition and demonstrates D3’s `selectAll`, `join`, and `range` API for generating repeated elements.

HHaritscode

88% match

Loading thumbnail…

Fork of D3 Starter

This example generates a grid of horizontal and vertical stripes that intersect to create a geometric pattern. It uses SVG masks with circles to reveal or hide different sections of the stripes, producing a composition reminiscent of Sol LeWitt’s wall drawings. The code leverages D3 v7 selection methods, including `select`, `append`, and `join`, along with `range` to create 100 rectangles for each direction. The visualization is fully responsive, sized to the browser window, and includes hover effects that change the fill color to magenta.

YYiorgos Bagakis

87% match

Loading thumbnail…

Fork of D3 Starter

This example demonstrates how to create a geometric pattern using D3 version 7 with SVG masks, combining horizontal and vertical striped rectangles that intersect to form a cross-shaped design. The visualization uses `d3.range` to generate 100 rectangles in each direction, applying two complementary SVG masks with circles to reveal or hide portions of the stripes. Additionally, the page displays a small dataset of names and numbers as text elements positioned along the top of the viewport, using D3's data join pattern with `selectAll` and `join`. The code imports `select` and `range` from the D3 library.

Ccm

87% match

Loading thumbnail…

Fork of D3 Starter

This example shows how D3 version 7 can create layered geometric patterns by combining SVG masks with repeated rectangles. The visualization produces four distinct regions: a striped horizontal pattern with a cut-out square, a vertical stripe pattern, and two sections where horizontal or vertical bars are masked by a circle and square. The code constructs SVG elements directly using the DOM API, building masks (mask1 through mask4) that define which parts of the rectangles are visible. The approach relies on creating rectangles of varying widths and heights, applying masks that contain contrasting black and white shapes, and iterating 30 or 60 times to generate the repeating bar patterns across the screen.

HHaritscode

87% match

Loading thumbnail…

Full Fork of D3 Starter

This example demonstrates how D3 SVG masks can create overlapping geometric patterns. It generates 100 horizontal and 100 vertical rectangles, then applies two distinct masks with inverted fill rules to reveal or hide different regions. The code uses D3’s `select`, `range`, `symbols`, and `symbol` APIs to draw predefined symbol shapes within each mask. The visualization fills the browser window, with symbol paths placed at regular intervals across the width, producing a dynamic interplay between the grid lines and masked shapes.

Llt_vandegrift@live.com

86% match