Fork of D3 Implementation

100%

Fork of D3 Implementation

✓ Published0🌍 Public

Last edited Feb 15, 2023

Created on Feb 15, 2023

A grid of thin horizontal and vertical rectangles covers the screen, but two circular masks reveal only the central region: one mask shows the horizontal lines, the other shows the vertical lines, creating a crosshatch pattern inside an overlapping circle. The example uses D3 v7’s `select`, `range`, and `join` to generate 100 SVG `<rect>` elements per direction, with `mask` elements and black/white filled circles controlling visibility. The full-screen SVG renders in the browser with no external data.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of D3 Implementation

Two sets of 100 striped rectangles overlay each other at right angles, revealing a circular window at the center through SVG masks. Built with d3.select and d3.range, the code generates horizontal and vertical bars filled with alternating colors. Each set applies a mask combining a full-screen rect with a 200-pixel-radius circle, one using a white circle on black and the other inverting the colors. The result forms a crosshatched grid visible only inside the overlapping circular region, rendered as vector SVG graphics scaled to the full browser viewport.

AArnulfotos

90% match

Loading thumbnail…

Fork of D3 Implementation

This example shows a grid of horizontal and vertical bars covering the full screen, with two circular masks revealing the intersection of the bars. Each bar is a separate SVG `<rect>` element, generated using `d3.range` and `selectAll().join()`. The first mask uses a black background with a white circle to show the horizontal bars, while the second inverts the colors to show the vertical bars. The code relies on D3 v7’s `select` and `range` functions to construct the elements and masks dynamically.

VVikil Lakkavatri

90% match

Loading thumbnail…

Fork of D3 Implementation first day

This example demonstrates a minimal, full-screen grid of horizontal and vertical stripes that become visible only through two circular windows. Built with D3.js version 7, it uses the `select` API to append SVG elements, `range` to generate 100 coordinates, and iterative `join` operations to create and position the rects. Two SVG masks—one with a central white circle on a black field, the other inverted—define the circular reveal for the horizontal and vertical stripe layers, respectively.

NNyashaBradleymhepo

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

87% match

Loading thumbnail…

Fork of D3 Implementation jepp

A grid of horizontal stripes fills the screen, each row visible only through a circular cutout at the center. The visualization uses an SVG mask with a white circle over a black rectangle to reveal the stripes beneath. Built with D3 v7, the code uses `select`, `range`, and `join` to create 500 axis-aligned rectangles, each 10 pixels tall, with a fixed 200-pixel radius mask applied to every element.

JJeppeOEM

87% match

Loading thumbnail…

Fork of 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`.

DDONAR144-release

86% match

Loading thumbnail…

Fork of D3 beginning

This example displays an abstract geometric pattern of thin horizontal and vertical lines across the full browser viewport. The lines are selectively revealed or hidden through two SVG masks, each populated with D3 symbols (such as circles and crosses) arranged in a row. Using D3’s selection join, the code creates 100 rectangles per axis and applies the masks via `svg.call`. The rendering is done entirely with SVG elements in React, leveraging d3’s `symbol` and `range` APIs.

AAleOG

85% match

Loading thumbnail…

Fork of Full Sol LeWitt Reproduction with D3

This example generates a full-screen grid of thin horizontal and vertical stripes, using SVG masks to create a circular cutout at the center revealing a solid white disk. The stripes are rendered as individual SVG `rect` elements within two groups, with each group masked by a radial shape. The code uses the D3.js library’s `select`, `range`, and `symbol` functions, along with symbol paths to produce the mask geometry. The layout is derived from the browser’s viewport dimensions, making the visualization responsive to the window size.

Lliu yang

85% match