Episode 4

100%

✓ Published1🌍 Public

Last edited Apr 9, 2021

Created on Apr 8, 2021

Two sets of 100 thin rectangles form horizontal and vertical stripes across the full screen, intersecting to create a dense grid. Two SVG masks cut the pattern into distinct shapes: a large centered diamond symbol and a circular window. Built with React and D3 v6, the code uses `range`, `select`, `append`, and `join` to bind data and generate SVG elements dynamically.

AI-generated description

Coding along Episode 4

MIT Licensed

Similar vizzes

Loading thumbnail…

Episode 4 _ 2 - no duplicated logic

A grid of ninety-nine thin horizontal and vertical rectangles, clipped by two mask shapes, creates an overlapping lattice pattern. The visualization uses D3 v6 selections and data joins to append SVG rectangles and paths. A reusable `renderMask` function builds two masks, each containing a centered symbol from `d3.symbol` and `d3.range`. One mask inverts its fill to reveal the vertical bars, while the other hides them, producing alternating visible segments across the full browser viewport. The SVG renders at high resolution with rectangle thickness and spacing determined by array indices.

Aaschue

86% match

Loading thumbnail…

Epis 4

This example creates a full-screen SVG pattern of 100 alternating horizontal and vertical stripes, with both sets masked to reveal a circular focal point in the center. Using D3’s `select` and `range` utilities, it generates rectangles that are constrained by two custom masks—one that hides everything outside the circle and another that hides the circle itself—producing a grid-like intersection effect. The rendered output is purely geometric, relying on SVG masks rather than data.

SSGPPellow

85% match

Loading thumbnail…

Epis 4 Select

A grid of thin horizontal and vertical bars appears to overlap, but masks create alternating shapes from the Unicode symbols embedded in the code. The visualization renders 100 rows and 100 columns, with each bar masked by one of eight symbols (like stars or hearts) repeated across the canvas. Built with React and D3.js (specifically `select`, `range`, `symbols`, and `symbol`), it uses SVG masks with inverted fills to produce the interplay. The source code relies on D3 v7.6.1, rendering to an SVG element that fills the browser window.

SSGPPellow

80% match

Loading thumbnail…

Fork of d3-get-it-right-04

This example creates a hundred horizontal and vertical striped rectangles overlaid to form a grid, with a symbol-shaped hole cut through the pattern. The code uses d3.select, d3.range, and d3.join to bind data to SVG rect elements. Two SVG masks, one inverted and one normal, are built with d3.symbol and a d3.symbols[0] path (a circle) to punch a central circular reveal. The result shows layered d3.mask and d3.symbol APIs combined on a full-window SVG canvas.

Tthymdi

80% match

Loading thumbnail…

d3-get-it-right-04

This example uses React with D3 v6 to generate an SVG visualization of intersecting horizontal and vertical stripes. The code creates 100 rectangular bands in each direction, then applies two SVG masks: a diamond-shaped mask formed with a `d3.symbol` path, and a circular mask created with a basic SVG circle. The masks reveal the underlying stripes in geometric patterns, demonstrating how D3's `select`, `range`, and `join` methods can construct layered SVG elements with custom clipping. The visualization dynamically fills the browser window using `window.innerWidth` and `window.innerHeight`.

Tthymdi

80% match

Loading thumbnail…

Fork of Epis 4

This example creates a full-screen interactive grid of horizontal and vertical bars overlaid with circular masks. The visualization uses D3’s `select` and `range` to generate 100 thin rectangles along each axis, producing a crosshatch pattern. Two SVG masks hide all but a central circular area, revealing the intersecting lines within the circle against a blank background. The code relies on D3’s data join (`join('rect')`) to bind array values to SVG elements, demonstrating a declarative approach to building static geometric compositions.

SSGPPellow

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

79% match

Loading thumbnail…

episode 5 js arrays

This example creates a grid-based generative drawing by rendering 100 horizontal and vertical black stripes overlaid with two SVG masks. The masks use large symbols from D3’s `symbols` API to carve circular and other geometric patterns into the stripes, producing a Sol Lewitt–inspired composition. The code uses `d3.select`, `range`, and the `.join` method to build the stripes, while the `renderMask` function dynamically appends `mask` elements and paths. The result is a layered, monochrome visual that combines repetitive linework with symbolic cutouts.

Ppoppy

79% match