Fork of D3 Implementation

100%

Fork of D3 Implementation

✓ Published0🌍 Public

Last edited Jan 13, 2025

Created on Jan 13, 2025

This fork of a D3 implementation generates a grid-like pattern of horizontal and vertical bars across the full screen, masked by two overlapping circles to create an intersecting visual effect. The first mask reveals the bars only within a central white circle on a black background, while the second mask inverts this, hiding a circular section of the vertical strips. Built with D3 v7 and rendered as SVG, the code uses `d3.select`, `d3.range`, and chained `.join('rect')` operations to append and position 100 rectangles in each direction, dynamically sized to the browser window’s width and height.

AI-generated description

MIT Licensed

Similar vizzes

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

92% match

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

91% match

Loading thumbnail…

Fork of D3 Implementation

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.

PPonrawoot Khamkhanongngam

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

87% match

Loading thumbnail…

Fork of Fork of Fork of SVG Fundamentals - D3

This example demonstrates a full-screen grid of horizontal and vertical bars revealed through two circular masks. The visualization uses D3’s `select`, `range`, and data joins to generate 100 rectangles in each orientation, with CSS masks defining a central circular viewport. Two SVG masks—one with a black background and white circle, another inverted—control which bar segments remain visible, creating a crosshatch pattern that fades at the edges. The rendering relies on the SVG `<mask>` element and D3’s `join` API.

SSidney Oluoch

87% match

Loading thumbnail…

Fork of Circles with D3

This visualization creates a striking striped pattern using 100 horizontal rectangles of varying heights, each rendered in SVG. The code uses a D3 mask with a circular cutout to reveal the colored bars through a black overlay, producing a lens-like effect. Built with D3 v7, it employs `select`, `range`, and `join` to bind data to rect elements, while the mask is constructed with custom SVG elements.

Ggold.g@northeastern.edu

86% match

Loading thumbnail…

Fork of Fork of Fork of Fork of SVG Fundamentals - D3 (group)

This example demonstrates a grid-based pattern created by overlaying horizontal and vertical rectangles, each clipped by a circular mask to reveal a central window. The visualization uses D3’s `select`, `range`, `append`, and `join` APIs to generate 100 vertical and 100 horizontal bars, which are grouped in separate `<g>` elements. Two SVG masks (`circle-mask` and `circle-mask-2`) apply inverse coloring to the bars, producing a crosshatched effect that is visible only within the circular region. The code runs in React and renders fully with SVG, drawing on D3 version 7.6.1.

SSidney Oluoch

86% match