Reproduction with D3

100%

Reproduction with D3

✓ Published1🌍 Public

Last edited Jul 22, 2022

Created on Jul 19, 2022

The visualization draws a grid of overlapping horizontal and vertical bars across the entire viewport. Two sets of 100 rectangles each are created using D3's selection and join operations, with dimensions tied to the window size. Masking via SVG circle masks creates a central circular window that reveals alternating black and white stripes. The code uses `d3.select`, `d3.range`, and chained SVG attribute setters within a React-free HTML page.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

Similar vizzes

Loading thumbnail…

Different Shape Reproduction with D3

Different Shape Reproduction with D3 demonstrates how SVG masks can be combined to create complex visual compositions. The visualization layers horizontal and vertical striped rectangles, each masked by a distinct pattern of D3 symbols. Using d3.select, d3.range, d3.symbol, and d3.symbols, the code generates 100 repeating bars in both directions, with a mask revealing symbol shapes in inverted and non-inverted forms. The React-framework example renders entirely in SVG, with masks applied via the renderMask function to produce the final overlapping effect.

Aahora

86% match

Loading thumbnail…

d3 tutorial

This example demonstrates a simple SVG visualization where 100 horizontal rectangles are drawn across the full window width, with a circular mask revealing only the central portion of the stacked bars. The code uses d3.select, d3.range, and the .join() method to bind data to rectangle elements, then appends an SVG mask containing a black background rect and a white circle to create the viewport effect. Rendering is handled entirely through SVG attributes, with the visualization sized dynamically to the browser window.

JJesper Martinsson

85% match

Loading thumbnail…

D3 first steps

This example generates a full-screen grid of 100 vertical and horizontal bars using D3 selections and joins, then applies two circular SVG masks to create a striking cross-hatch pattern. Built with a React-wrapped D3 v6 setup, the code uses `select`, `range`, and `join` to bind data to rectangles, while the masks—one with a white circle on black, the other inverted—reveal and hide intersecting lines around a central focal point.

Ccyriltoneatto965

84% match

Loading thumbnail…

Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt-inspired drawing using D3.js within a React framework. It displays a grid of thin, evenly spaced horizontal and vertical bars rendered as SVG rectangles. Two circular masks are applied to these rectangle groups, causing the horizontal bars to fade out in the center and the vertical bars to fade out in a ring pattern, creating a subtle visual interplay. The code leverages D3's selection and range APIs to generate the marks efficiently.

EEzhil-Kalai

84% match

Loading thumbnail…

d3

This example demonstrates masked striped patterns overlaid on top of each other. It creates 100 horizontal rectangles and 100 vertical rectangles, each with a height or width of 10 pixels, spaced 20 pixels apart. The rectangles are masked using SVG masks with circular cutouts, creating a crosshatch effect with a circular reveal. The visualization uses D3 v6 with `select`, `selectAll`, and `data` joins to bind the mark arrays to the SVG elements, rendering the output as SVG in a React-styled HTML page.

Eelgato_1994

83% match

Loading thumbnail…

D3 beginning

This example shows a grid of thin horizontal and vertical rectangles that intersect to form a visible weave pattern, with a circular region in the center where the crossing lines appear to invert in contrast. The visualization uses D3 v6’s `select` and `range` functions to generate 100 rectangles in each direction, appended as SVG elements across the full window width and height. Two SVG masks, each containing a rectangle and a circle, selectively control which parts of the horizontal and vertical lines remain visible, creating the central circular effect against a dark background.

AAleOG

83% match

Loading thumbnail…

d3d3d3

This example shows a full-screen pattern of intersecting horizontal and vertical bars, each rendered as a set of thin SVG rectangles. The bars are generated using `d3.range` and joined to `rect` elements, but only the central circular area is visible due to two SVG masks. The first mask reveals the horizontal bars through a white circle on a black background, while the second mask hides the vertical bars in the same region using a black circle on white. The result is a cross-hatched grid with a circular cutout, built with React and D3 v7.

GGusnaRWX

82% match

Loading thumbnail…

Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt-inspired drawing using D3 selections and SVG masks. It renders 100 horizontal rectangles across the full window width, each masked by a circular cutout centered on the screen, creating a striped pattern with a visible circle. The code uses D3’s `select`, `selectAll`, `data`, and `join` methods to bind array data to SVG `<rect>` elements, and defines the mask via a hardcoded SVG `<mask>` element with a black background and white circle. The visualization runs in a React framework with a minimal HTML setup, relying on D3 v6.6.1 for DOM manipulation and SVG rendering.

MMonWas

82% match