Skip to main content
SimilarExport ZIP
100%

basic-setup

✓ Published1🌍 Public
Aalexis
Last edited Aug 5, 2024
Created on Aug 5, 2024
Forked from Exercise v1

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.

AI-generated description

A reproduction of a Sol LeWitt art piece.

MIT Licensed

Similar vizzes

Loading thumbnail…

Exercise v1

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.

Aalexis
80% match
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
80% 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
80% match
Loading thumbnail…

Sol Lewitt D3

This example reproduces a Sol LeWitt-inspired drawing using D3.js to render SVG rectangles in a browser. It shows a grid of alternating vertical and horizontal bars that are masked to create a circular focal point, with bars inside the circle appearing inverted relative to those outside. The code uses D3’s `select` and `range` APIs to generate and join the rectangles, while custom SVG masks (`circle-mask` and `circle-cutout-mask`) control visibility. The visualization resizes to the full window and uses only the built-in D3 library (v6.6.1).

Ppirani.sabah@gmail.com
79% match
Loading thumbnail…

advance-setup-1

This example shows a scatter plot reproduction of a Sol LeWitt art piece, with blue data points on a gray inner rectangular area surrounded by a light blue background. The visualization includes labeled X and Y axes with titles, using a fixed data array from `data.js`. The code builds an SVG container with D3 v7, using `scaleLinear` for coordinate mapping, `axisBottom`, `axisLeft`, and modular functions for axis labels. The plot is rendered through a setup that manages margins, dimensions, and joins for SVG elements.

Aalexis
79% match
Loading thumbnail…

Circles with D3

This example uses D3 to draw a static set of colorful circles on a white background. The `select` function creates an SVG container, and the code binds an array of data objects to `circle` elements, setting each circle’s position, radius, and fill color via attributes. The circles vary in size and color, with an opacity of 0.708, arranged in a scattered pattern across the canvas. The implementation relies on D3’s data join method to render the shapes.

MM Hema
79% match
Loading thumbnail…

Sol Lewitt Reproduction with D3

This example reproduces a Sol LeWitt-style drawing using D3.js to generate SVG shapes. It displays a grid of horizontal and vertical rectangles that are partially masked by overlapping circular regions, creating geometric intersections. The code constructs an SVG canvas sized to the browser window, then uses D3’s `select`, `append`, and `attr` methods to add and position the rectangles. Although the data array is currently empty, the logic prepares to map a sequence of marks with varying y-offsets and mask references, demonstrating how D3 can drive generative art through declarative joins and SVG masks.

Ssirenajbpearl@gmail.com
78% match
Loading thumbnail…

advance-setup-2

This example reproduces a Sol LeWitt art piece as an interactive SVG scatterplot. Points with x and y coordinates are plotted on light blue and gray axes, each point rendered with a fixed radius and opacity. The visualization uses d3.scaleLinear for scaling and d3.axisBottom and d3.axisLeft for axis generation, with data from a static JavaScript array. The container is responsive via a ResizeObserver that updates plot dimensions.

Aalexis
78% match