Fork of D3 Starter

100%

Fork of D3 Starter

✓ Published0🌍 Public

Last edited Jul 18, 2023

Created on Jul 18, 2023

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.

AI-generated description

A demonstration of how to start using D3 version 6.

MIT Licensed

Similar vizzes

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

90% 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

90% match

Loading thumbnail…

Fork of D3 Starter

This example demonstrates a geometric masking effect by layering vertical and horizontal rectangles on an SVG canvas. Using D3 v7, it creates 100 vertical bars and 100 horizontal bars across the viewport, applying two SVG masks to reveal intersecting shapes. The first mask uses a white background with a black circle, while the second inverts the pattern, producing a cross-shaped visual interaction. The code relies on D3 selections, the `range()` generator, and SVG `mask` elements to achieve the composition.

HHaritscode

89% 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

89% match

Loading thumbnail…

Fork of D3 Starter

This example demonstrates a striped mask effect by layering two sets of rectangles with intersecting patterns. The SVG output shows vertical black bars overlaid with horizontal black bars, where both layers use SVG masks to reveal or hide portions of the rectangles. The code uses D3 v7’s `select`, `range`, and `data` joins to generate 100 rectangles per axis across the full viewport. The first mask exposes a rectangular region while the second mask inverts it, creating a dynamic checkerboard-like visual from the overlapping shapes.

HHaritscode

89% match

Loading thumbnail…

Fork of D3 Starter

This example shows a grid of horizontal and vertical stripes across the full viewport, with a circular region at the center appearing brighter against the surrounding dark mask. The code uses D3 v7 selections to append two groups of rectangles, each generated from a `range(100)` data array, and assigns SVG masks to each group. The first mask contains a black rect with a white circle, while the second uses inverse colors, creating the overlapping visual effect.

HHaritscode

88% match

Loading thumbnail…

Fork of HTML Starter

This example showcases a geometric pattern created by layering two sets of parallel stripes overlaid with circular masks. It uses the D3.js library to build SVG elements and generate the mask paths, drawing on the `range`, `select`, `append`, `attr`, and `symbol` APIs from D3. The code creates a 100×100 grid pattern where overlapping translucent stripes form a subtle checkerboard effect within a central circle, demonstrating the use of reusable SVG masks and declarative data-driven rendering.

Bbhattrahul007

86% match

Loading thumbnail…

Fork of D3 Starter

This fork demonstrates how to structure a D3.js v7 project with a simple SVG animation. It uses `d3.select`, `selectAll`, `data`, and `join` to generate two sets of thin rectangles—one set horizontal and the other vertical—that tile across the full window dimensions. The code applies SVG masks created with `mask.append('rect')` and `symbol()` paths, including an inverted mask, to alternately hide and reveal the rectangles and produce a dynamic, cross-hatched visual pattern. The example is driven entirely by code in `index.js`, with no external data source.

SSatorumi

85% match