Vel's Fork of Sol LeWitt US Flag with d3.

100%

Vel's Fork of Sol LeWitt US Flag with d3.

✓ Published1🌍 Public

Last edited Sep 9, 2022

Created on Sep 9, 2022

This example recreates Sol LeWitt’s US Flag using D3 v3 within a React framework, rendering entirely as SVG. It shows the flag constructed from repeating horizontal and vertical striped rectangles, with masks controlling the red and blue color regions and D3’s `symbol()` generator drawing the white stars. The code uses `d3.select`, `range`, and `join` to build the repetitive geometric elements, while dimensions are derived from proportional constants. The visualization fills the browser window dynamically using `window.innerHeight` and `window.innerWidth`.

AI-generated description

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

Similar vizzes

Loading thumbnail…

Fork of Vel's Fork of Sol LeWitt US Flag with d3.

This example renders a Sol LeWitt-inspired US flag using D3 v6, constructing the image through layered SVG shapes and mask filtering. The code computes flag dimensions from a base unit and applies red and blue masks to overlapping horizontal and vertical rectangles, generating the striped field and canton. Alternatively spaced star symbols, created with `d3.symbol` and `symbols[4]`, are positioned across the canton to complete the composition.

SSantiago Toso

93% match

Loading thumbnail…

Fork of Sol LeWitt US Flag with d3.

This example shows the geometry of the US flag, constructed with rectangles and star-shaped symbols in SVG. The flag’s stripes and canton are rendered as masks that filter dashed diagonal and vertical line groups, based on Sol LeWitt’s conceptual art. It uses D3 selections and joins with `select`, `range`, and `symbol` to generate 50 white stars in a grid, with masks applying the flag’s color regions.

HHelip3

90% match

Loading thumbnail…

Fork of Sol LeWitt US Flag with d3 -.

This example recreates Sol LeWitt’s geometric interpretation of the US flag using D3.js. It renders a full-screen SVG with horizontal and vertical stripes defined by mask elements, producing the flag’s red and blue regions through layered rectangles. Fifty white star symbols are positioned in a grid within the canton area, using D3’s symbol generator. The piece demonstrates how algorithmic composition and masking techniques can construct a recognizable national flag from basic geometric primitives.

FFrancesco Di Filippo

89% match

Loading thumbnail…

Sol LeWitt US Flag with d3.

This example recreates Sol LeWitt’s geometric interpretation of the US flag using D3.js and SVG. It draws the flag’s red and white stripes and blue canton through overlapping horizontal and vertical bands, each masked by a rectangular region that reveals the alternating pattern. White stars are placed in a grid across the canton, with a path symbolizing a five-pointed star. The code uses D3’s `select`, `range`, `symbol`, and `symbols` APIs to generate the SVG elements and masks.

Wwgloss

88% match

Loading thumbnail…

Sol LeWitt US Flag with d3.

This visualization reproduces Sol LeWitt’s geometric interpretation of the US flag using only SVG shapes and masks. It displays a field of red and blue stripes composed of thin, overlapping rectangles, with a canton containing white five-pointed stars. The code uses d3’s `select`, `range`, and `symbol` APIs to generate the pattern procedurally. It builds two masks (`redMask` and `blueMask`) to clip the horizontal and vertical stripe groups, then places stars via repeated `path` elements with `symbol(symbols[4], …)`. The rendering is pure SVG, with dimensions and spacing derived from the variables `aa`, `bb`, and `ll`.

TToly

84% match

Loading thumbnail…

US Flag with d3.

This example uses D3.js to render the US flag as an SVG. The code calculates the flag’s proportions from an arbitrary base length, drawing the 13 red and white stripes with `rect` elements and the blue canton with a filled rectangle. Fifty white stars are created using D3’s `symbol` and `symbols` for a five-pointed star path, placed in alternating rows of six and five across the canton. The visualization is built entirely with D3’s low-level selection and joining APIs, scaling to fill the browser window.

Wwgloss

82% match

Loading thumbnail…

Fork of Full Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt-inspired geometric composition using D3 to generate overlapping striped rectangles and symbol-based masks. The visualization shows a grid of horizontal and vertical bars filtered through two inverted mask layers, each containing a row of D3’s built-in symbol shapes (circles, crosses, diamonds, squares, stars, triangles, and wye). The code uses `d3.select`, `d3.range`, `d3.symbol`, and `d3.symbols` to construct SVG elements dynamically, rendering directly into the browser window with no external data source.

Ccardoza-IPH

79% match

Loading thumbnail…

Fork of Full Sol Lewitt Reproduction with D3

This visualization creates a grid of horizontal and vertical bars across the full browser window, using SVG masks to reveal d3 symbols (shapes) from the d3-shape module. It uses the `select`, `range`, `symbols`, and `symbol` functions from D3 v6 to generate a striped pattern with four distinct symbol types as mask cutouts. The code renders 100 rectangles in each orientation, with two masks applied to alternate between light and dark shading on the revealed shapes. The rendering adapts to the window’s dimensions and uses `join` to bind data to SVG elements.

Mmaximus2581

79% match