Skip to main content
SimilarExport ZIP
100%

Sol LeWitt Reproduction D3

✓ Published1🌍 Public
Llili463e
Last edited May 22, 2023
Created on May 17, 2023

This visualization reproduces a Sol LeWitt-inspired parallel coordinates plot, displaying football player data across numerous attributes. Each line represents a player, colored by their first attribute value, and users can brush along any axis to filter the dataset. The implementation uses D3 v6 APIs including `d3.scalePoint`, `d3.scaleLinear`, `d3.brushY`, `d3.drag`, and `d3.line`, with data loaded from a local JSON file and rendered as SVG.

AI-generated description

A reproductionof a Sol LeWitt art piece.

MIT Licensed

Similar vizzes

Loading thumbnail…

Sol LeWitt Reproduction with D3 Homework

This dataviz shows a colorful, generative reproduction of a Sol LeWitt wall drawing as a series of 60 concentric, star-shaped polygons. Each stroke is randomly assigned an RGB color and scaled outward, creating a layered, geometric pattern that fills the browser window. The piece is rendered as an SVG using D3’s `select`, `range`, and `symbol` API to generate the polygon paths. It uses D3 `7.8.2` and dynamically sizes the canvas based on the viewport’s `window.innerWidth` and `window.innerHeight`.

Aajoua
75% match
Loading thumbnail…

Parallel Coordinate Chart

This parallel coordinate chart visualizes player performance metrics across eight dimensions, including distance, sprinting time, and work-to-rest ratio, with each polyline representing an individual player. The D3 v4 code uses `d3.scalePoint` for horizontal axis placement, `d3.scaleLinear` for each vertical dimension, and `d3.brushY` to enable interactive filtering by dragging along any axis. Inactive lines render in light gray while selected regions highlight active paths in blue via CSS classes, with data displayed as static SVG elements.

JJanchorizo
74% match
Loading thumbnail…

SoLewitt

This visualization recreates a Sol LeWitt-inspired drawing by generating 24 random points on a square SVG canvas. It displays the points as small green circles, with the instruction set implying that half are connected by straight lines and half by wavy lines. Built with D3 version 7, the code uses `d3.range` to create the data and `d3.scaleLinear` to map coordinates, while `d3.axisBottom` and `d3.axisLeft` render the axes. The rendering approach is purely SVG-based, appended directly to the HTML body.

AAinsley Francis
74% match
Loading thumbnail…

Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt wall drawing using D3.js. It renders a grid of horizontal and vertical stripes that are visible only within two circular masks, creating an interlocking pattern. The code uses D3’s `select`, `append`, and `join` APIs to construct SVG elements, and `range` to generate the stripe positions based on the window size. The visualization dynamically adapts to the browser viewport dimensions.

Ccardoza-IPH
74% match
Loading thumbnail…

Sol LeWitt Reproduction D3

This visualization reproduces a Sol LeWitt drawing using D3.js, displaying a grid of alternating horizontal and vertical black lines that form a circular pattern. It uses SVG masks with two complementary circular cutouts to create the intersecting line effect. The code leverages D3’s `select`, `range`, and `join` APIs to generate and bind 48 rectangles in each orientation, with each set masked to reveal only the portion inside or outside the circle.

Ttverdone
74% match
Loading thumbnail…

Full Sol LeWitt Reproduction with D3

This visualization reproduces a Sol LeWitt wall drawing using D3.js, rendering a grid of horizontal and vertical lines that intersect to form a subtle pattern across the full browser viewport. The piece relies on two SVG masks—one circular and one rectangular—to selectively reveal or hide portions of the line arrays. Specifically, a path generated via `symbol(symbols[1],100000)` creates a large circular mask over the vertical lines, while a black circle mask obscures the horizontal lines in a contrasting region. The code uses D3’s `select`, `range`, and `join` APIs to efficiently append hundreds of SVG rect elements, with all rendering performed client-side in SVG format.

Gguts
74% match
Loading thumbnail…

Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt art piece using D3 v6. It displays a grid of vertical and horizontal striped rectangles overlaid with two circular masks, creating intersecting line patterns. The visualization uses `d3.select`, `d3.range`, and the `join` pattern to generate 100 SVG rectangle elements in each direction. Two SVG masks, each containing a black or white circle, selectively reveal or hide portions of the stripes, producing the geometric contrast characteristic of LeWitt’s work. The SVG fills the entire browser window.

AAndre J Denais
74% match
Loading thumbnail…

Full Sol Lewitt Reproduction with D3

This visualization reproduces a Sol LeWitt wall drawing using D3.js, rendering a grid of horizontal and vertical lines that are selectively masked by circular paths. The piece uses D3’s `select`, `range`, and `symbol` APIs to create 100 rectangles in each orientation, with the masks defined via SVG `mask` elements and D3’s path symbols. The full-viewport SVG canvas adapts to the browser window, and the `join` operation efficiently appends the graphical primitives.

Mmaximus2581
74% match