Exercise v1

100%

✓ Published2🌍 Public

Last edited Jul 3, 2024

Created on Jul 3, 2024

This visualization reproduces a Sol LeWitt art piece by rendering four semi-transparent circles of varying radii and colors onto an SVG canvas. Built with D3.js, the code uses the `select` and `join` APIs to manage the SVG container and circle elements, positioning them via `cx`, `cy`, and `r` attributes. The circles overlap with a fixed opacity value, creating layered intersections that mimic the geometric style of the original artwork. The composition is static, with no interaction or animation, and the data is hardcoded in an array of objects within the `index.js` file.

AI-generated description

A reproduction of a Sol LeWitt art piece.

MIT Licensed

Similar vizzes

Loading thumbnail…

Exercise v3

A reproduction of a Sol LeWitt art piece shows a black background with five colored circles that animate into place. Using D3.js, the code binds an array of circle objects to SVG elements, entering circles with a slow transition that delays each one and expands its radius from zero. Updates apply a fast linear transition to reposition existing circles, while exits shrink back to zero before removal. The rendering uses D3 transitions with `easeLinear` and explicit key functions for stable data binding.

Aalexis

88% match

Loading thumbnail…

Exercise v2

This example animates five circles on a black background, each starting at radius 0 and expanding to its target size while updating its position. The circles use distinct colors and opacity, with staggered entrance delays and a faster linear transition for position updates. Built with D3 v7, it employs `transition`, `easeLinear`, and data joins via `selection.join()` to handle enter, update, and exit states. The visualization is a reproduction of a Sol LeWitt art piece, with the code defining explicit x, y, and radius values for each circle and rendering them as an animated SVG.

Aalexis

83% match

Loading thumbnail…

Exercise Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt art piece using D3.js, generating a grid of overlaid horizontal and vertical rectangles that are masked to create a geometric, abstract composition. The visualization uses `d3.select`, `d3.range`, and `d3.symbols` to create SVG elements, with `d3.symbol` generating custom shapes within masks. The code dynamically assigns x and y positions to the rectangles, alternating between horizontal and vertical orientations, and applies inverted and non-inverted masks to achieve the layered visual effect. The result is a generative, screen-filling artwork that mimics the minimal, rule-based style of LeWitt's wall drawings.

Rrwata97

81% match

Loading thumbnail…

Fork of Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt art piece using D3, rendering nine circles in a sine-wave pattern across an SVG canvas sized to the browser window. The visualization shows how simple geometric elements can create an organic, rhythmic composition. It uses D3's `select` API to append an SVG element to the body and `selectAll('circle').data(data).enter()` to generate the circles, with positions calculated using the `Math.sin` function for the vertical offset. All drawing is done via SVG vector graphics.

DDutch Hansen

81% match

Loading thumbnail…

basic-setup

This example reproduces a Sol LeWitt-inspired drawing using D3.js. It renders a series of blue circles on a cyan background, plotting each point according to x and y coordinates from a static data array. The code uses the `select` function to manage SVG elements and binds circle positions with chained `.attr` calls to set `cx`, `cy`, `r`, and `fill` properties. The opacity is fixed at 0.7 to show overlapping points. The dataset includes both scaled coordinate pairs and precomputed pixel values.

Aalexis

80% match

Loading thumbnail…

Lesson4:Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt art piece as an interactive SVG visualization. It renders a grid of horizontal and vertical bands that are masked by circular shapes, creating a dynamic geometric pattern. The code uses D3's `select` and `append` methods to build the SVG element and its components. It leverages the `mask` attribute with defined `circle-mask` and `circle-mask-2` elements to selectively reveal or hide the lines. The visualization is generated entirely through procedural code, with no external data source, and displays its pattern across the full browser window.

Nnubhatia

80% match

Loading thumbnail…

Sol LeWitt Reproduction with D3

This D3.js reproduction of a Sol LeWitt artwork generates a grid of 100 horizontal and 100 vertical SVG rectangles, each 10 pixels thick, which are masked by two opposing circular shapes. Using the `select` and `range` APIs from d3, the code appends SVG elements and utilizes two masks—one hidden by a black rectangle with a white circle, the other with inverted colors—to create an intersecting ring pattern. The final visualization, sized to the full browser window, forms a crosshatched composition with circular cutouts, demonstrating D3's declarative `.join` method for efficient element creation.

Jjmetzg11alpine

79% match

Loading thumbnail…

Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt art piece using D3.js, showing intersecting horizontal and vertical line patterns constrained by two circular masks. It demonstrates how SVG mask elements can create layered visual effects with geometric precision. The code uses D3 selections with `join('rect')` to bind 100 data points from `range(n)`, while two distinct mask groups apply inverted black-and-white circles to reveal the gridlines. The visualization renders as an SVG using dynamic width and height based on the window size.

OOleg Zhernovoy

79% match