DFirstSteps

100%

✓ Published0🌍 Public

Last edited May 25, 2022

Created on May 25, 2022

A minimal SVG canvas fills the browser window with 100 thin horizontal rectangles, all clipped by a circular mask that leaves only the ring of the circle visible. The page uses D3's `select` and `range` to generate and append rectangles with programmatic `y` offsets and a full-width `width`, while an SVG `<mask>` element paints black to hide the interior. This results in a simple black-on-transparent ring effect centered on the viewport.

AI-generated description

A bare minimum HTML page.

MIT Licensed

Similar vizzes

Loading thumbnail…

SVG Foundamentals

This example demonstrates how SVG masks and primitive shapes combine to create a striking visual effect. It displays 100 horizontal rectangles filling the viewport, with a circular mask revealing only the area inside a 200-pixel-radius circle centered on the screen. Using D3.js version 7.6.1, the code binds data via `d3.range` and `selectAll` to generate the rectangles, then appends a `mask` element containing a black background rectangle and a white circle to control visibility. The rendering approach relies entirely on SVG elements and DOM manipulation through `d3.select`.

SSteven Hua

79% match

Loading thumbnail…

First D3 Thing

A full-screen SVG composition layers 100 horizontal and 100 vertical strips, each masked by a central circle. Two SVG masks (`circle-mask` and `circle-mask-2`) define the visible regions: the first reveals a black circle on a white background, while the second inverts it. The strips alternate orientation, with horizontal bands shown through the first mask and vertical bands through the second, creating a cross-hatched grid with a circular cutout in the center. The code uses D3's `selection` API to build the scene by appending elements to the SVG container, with dimensions tied to the browser window size.

MMichael Bell

79% match

Loading thumbnail…

D3 Starter

This example builds a full-screen SVG visualization of 50 horizontal rectangles arranged in a vertical sequence, with their heights and spacing varying incrementally by index. A circular mask reveals only the central portion of the layered bars, creating a lens-like effect against a white background. The code uses D3 v7 selections and the `range()` generator to bind data, then appends rectangles via `join()`. A dedicated `<mask>` element contains a single white circle positioned at the center, demonstrating basic D3 masking and data-binding techniques.

Sscheenmi@gmail.com

79% match

Loading thumbnail…

my first d3

This example generates a full-screen SVG composition of 100 horizontal and 100 vertical rectangles, each 10 pixels thick and spaced 20 pixels apart. Two SVG masks with 200-pixel-radius circles in the center determine visibility: the first mask (white circle on black) reveals horizontal strips, while the second (black circle on white) hides vertical strips. Using d3.select, d3.range, and the .join() pattern, the rectangles are created and styled, with the masks applied via the url(#…) attribute. The result is a striped grid where horizontal and vertical bars cross, creating a contrasting pattern inside and outside the circular regions. Data is procedurally generated from the range of 100.

NNeeraj Kumar

79% match

Loading thumbnail…

D3_First_Exercise

A full-screen SVG grid of thin black horizontal and vertical lines is masked to reveal two offset circular cutouts in the center of the canvas. The piece is a direct reproduction of a Sol LeWitt art concept, rendered using D3 v6. The code builds the lines by binding `d3.range(n)` data arrays to `rect` elements via `.join()`, while two layered SVG `<mask>` elements (one black rect with white circle, one white rect with black circle) define the visible apertures.

WWeeeLi

78% match

Loading thumbnail…

D3.js fundamental

This example demonstrates how SVG masks can be used to create geometric cutouts in layered grid patterns. It renders 100 horizontal and vertical rectangles across the full viewport, each masked by a circle that reveals or hides portions of the grid. The code uses D3.js v7 with the `select`, `selectAll`, and `range` APIs to generate the shapes, while two separate `<mask>` elements with contrasting fill colors control visibility. A white-filled mask with a black circle creates the first cutout, and an inverted mask creates the second, producing two distinct circular viewing windows.

Ddeebanks77

77% match

Loading thumbnail…

Fork of SVG Fundamentals

This example uses the D3.js `select`, `range`, and `append` APIs to draw one hundred semi-transparent horizontal rectangles across a full-screen SVG canvas. The rectangles are clipped through an SVG `mask` containing a white circle over a black background, revealing the striped pattern only within a centered circular region on top of the page’s background. The animation and interactivity come solely from the static mask and rect layout, with no data source beyond the generated numeric range.

AAlexanderShaw

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

77% match