Chapter 3 - D3

100%

Chapter 3 - D3

✓ Published1🌍 Public

Last edited Sep 3, 2025

Created on Sep 3, 2025

A full-screen compositional drawing uses horizontal bands with an SVG mask to reveal a circular window into the stripes. The code generates 100 rectangles via `d3.range` and data joins, then applies a mask defined with a circle element to clip the view. Built with D3 v6 and Vue, the SVG is rendered directly to the browser window, demonstrating simple geometric pattern-making through data-driven shape generation.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Chapter 3 - D3 - opcion range

A wall of alternating horizontal and vertical striped rectangles is clipped by two circular masks, creating an interplay of opaque and transparent regions. Rendered as an SVG using Vue and D3 v6, the visualization uses `d3.range` to generate 100 equally spaced values for positioning the bars. Two masks are defined: one with a black background and white circle to show the bars only inside the circle, and another with the inverse to hide them there. The code leverages D3's `select` and `append` methods to construct the SVG and mask elements.

SSergio

87% match

Loading thumbnail…

Fork of Chapter 3 - D3 - uso clases

This example creates an abstract Sol LeWitt-inspired drawing using SVG masks. It renders a grid of alternating horizontal and vertical rectangles that are partially revealed through two circular masks, producing an interplay of visible and hidden stripes. The code uses D3's `select`, `range`, and `join` API to generate the rectangles and construct the masks. The visualization is built with a Vue-based D3 version (v3), rendering to SVG, with the masks defined as `mask` elements containing `rect` and `circle` shapes.

SSergio

85% match

Loading thumbnail…

Fork of Fork of Chapter 3 - D3 - uso de group

This example generates a Sol Lewitt-inspired geometric composition using D3 v6 and SVG. It draws 100 horizontal and vertical rectangles across the full viewport, then applies two complementary circle masks to cut out circular voids and reveal the grid within. The code uses D3 selections, `range`, and `join` to create the rect elements, while `append('mask')` constructs custom mask definitions that alternate black and white fills to control visibility.

SSergio

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

80% match

Loading thumbnail…

Starting with D3

This example creates a full-screen SVG pattern of horizontal and vertical stripes using D3’s `select`, `range`, and `join` methods. Two sets of 100 rectangles are generated, each masked to reveal or hide a circular region at the center. The code uses SVG `mask` elements with black-and-white circles to produce a cross-shaped visual intersection. The data is synthetic, generated via `range(n)`, and rendered entirely with D3 v6 and SVG attributes.

Pphilmae

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

80% match

Loading thumbnail…

Working with D3

This example creates a grid of horizontal and vertical stripes that are visible only through a circular aperture in the center of the canvas. Horizontal rectangles are masked by a circle of white on black, while vertical rectangles are masked by a black circle on white, revealing the underlying pattern. The code uses D3’s `select`, `range`, and `join` methods to generate the SVG rects and masks, setting widths to the full window and heights to 500 pixels.

Aalexis.delacotte@gmail.com

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