2. D3

100%

✓ Published0🌍 Public

Last edited Feb 10, 2023

Created on Feb 10, 2023

A large SVG displays horizontal and vertical stripes created from 100 rectangles each, layered with two circular masks. The overlapping masked striping produces a radial, sunburst-like pattern centered on the canvas. Built with D3.js, the code uses `range`, `selectAll`, and `join` to generate the bars, while `symbol` and `symbols` define the circular mask paths. The viewport is sized dynamically to the browser window.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

D3 Implementation

This example demonstrates how D3’s selection and data-join methods can create intersecting horizontal and vertical stripes across the full viewport. Two groups of rectangles, each bound to an array of 100 values via `d3.range`, are drawn with alternating orientations—one set spanning the width, the other the height. Using SVG `mask` elements, two circular masks are applied: one reveals the horizontal stripes inside a white circle on a black background, while the other does the reverse for vertical stripes. The result is a cross-hatched pattern visible only within the defined circular regions.

SSubhamChhetri

83% match

Loading thumbnail…

D3 JS

An SVG grid of 100 horizontal and 100 vertical rectangles covers the full viewport. Two circular masks, defined via D3's `mask` element, create a lens-like effect: the first mask exposes a central white circle outlined by black-filled rectangles, while the second inverts the fill to produce a complementary pattern. Using D3 v7's `join` method, the code binds `d3.range` data to generate the rectangles, with each strip sized 10 pixels thick and spaced 20 pixels apart. The overlapping masks reveal alternating stripe orientations, forming a dynamic moiré-like crosshatch within the central circular region.

TTehran Mammadov

83% match

Loading thumbnail…

D3_Sol

This example overlays two sets of alternating horizontal and vertical stripes, each masked by a pattern of D3 symbols (such as circles, crosses, and diamonds) centered on the canvas. The first mask uses solid shapes on a white background, while the second inverts the fill, creating a contrasting lattice. Built with React and D3 v7, it uses `select`, `range`, `symbols`, and `symbol` to generate SVG elements, with `mask` applied to each stripe group to reveal the symbol shapes through the grid.

PPolydexter

83% match

Loading thumbnail…

First D3 Viz

This example creates a full-screen SVG pattern of intersecting horizontal and vertical bars, separated into two masked groups. D3’s `select` and `range` generate 100 rectangles per axis, while `symbol` and `symbols[7]` draw the star-shaped mask, and a circle forms the second mask. The masks reveal or hide parts of the grid, producing a geometric composition against a black-and-white backdrop. The visualization runs in a React framework using raw JavaScript and D3 v7, with no external data source.

Vvmistry94@gmail.com

83% match

Loading thumbnail…

d3 tutorial 4

This example uses D3 to render a full-window SVG image. It draws 100 horizontal bars, each with a height of 10 pixels and stacked vertically, to create a striped pattern across the canvas. A clipping mask, defined with the `<mask>` element, applies a white star-shaped path over the stripes, so only the area inside the star remains visible against a black background. The code uses D3's `select`, `range`, `symbol`, and `symbols` APIs to generate the star path and SVG elements.

JJesper Martinsson

83% match

Loading thumbnail…

d3 simbols

A grid of horizontal and vertical stripes alternates through two SVG masks to reveal a large star-shaped symbol at the center. The example demonstrates D3’s `symbol` and `symbols` API to generate the star path, combined with `mask` elements to create intersecting stripe patterns. Fifty rectangles are drawn in each direction using `d3.range` and `join`, with the horizontal set masked by an inverted white-on-black layer and the vertical set by its opposite. The result shows how layered masks can produce dynamic visual interferences.

Sserebryanaya.n@gmail.com

82% match

Loading thumbnail…

Visualization

This visualization creates a striped pattern of horizontal and vertical bars that are selectively revealed through two SVG masks. The masks use alternating black-and-white rectangles and D3 symbols to alternate visibility of the grid lines, producing an overlapping geometric composition. Built with D3 v7, the code uses `select`, `range`, `scaleBand`, and `symbol` to generate the shapes, while `append('mask')` and `attr('mask', ...)` control the clipping. The rectangles are sized based on `window.innerWidth` and `window.innerHeight`, with the pattern repeated 120 times across the screen.

DDaniel R Handoko

82% match

Loading thumbnail…

d3d3d3 3

This example generates a grid of 100 horizontal and vertical stripes, each using a mask to reveal differently-shaped symbol outlines at the center of the screen. The horizontal bars are masked by shapes like circles and crosses, while the vertical bars are masked by their inverses, creating a striking geometric interplay between foreground and background. Built with React and D3, the code uses `d3.range`, `d3.symbol`, and `d3.symbols` to construct paths, with masks defined via SVG and applied using the `mask` attribute. The visualization renders entirely through SVG, with a flickering effect caused by the contrasting masked regions.

GGusnaRWX

82% match