Skip to main content
SimilarExport ZIP
100%

advance-setup-2

✓ Published1🌍 Public
Aalexis
Last edited Aug 6, 2024
Created on Aug 6, 2024
Forked from advance-setup-1

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.

AI-generated description

A reproduction of a Sol LeWitt art piece.

MIT Licensed

Similar vizzes

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
93% 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
78% match
Loading thumbnail…

GiRiBnW_Ep10-resuable_animated-scatterplot

This example shows an animated scatterplot that reproduces a Sol LeWitt art piece. It uses D3 v6 to render SVG circles whose positions are derived from data, with a transition that animates the radius of newly entering points from zero to a set size. The code builds reusable plotting components—scales, axes, and container groups—and uses the `d3.transition()` API, which is visible as `t = d3.transition().duration(1000)` and applied to enter/update/exit joins. The x and y axes are linear scales from the data’s extent, and the chart updates in place, though no external data source is specified.

JJimMaltby
77% 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
76% match
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
75% match
Loading thumbnail…

Sol Lewitt Repro

This example reproduces a Sol LeWitt art piece by generating a series of vertical rectangles across the full screen. It creates 100 SVG rectangles, each 10 pixels wide, positioned at increasing x-coordinates, using plain JavaScript DOM manipulation to construct the SVG elements. The visualization uses D3 v7 only to load the library, while all rendering is done through native SVG APIs like `createElementNS` and `setAttribute`. The artwork fills the browser window dynamically using `window.innerWidth` and `window.innerHeight`.

Jjustinenns@hotmail.com
75% match
Loading thumbnail…

Fork of Sol LeWitt Reproduction Vert

This example reproduces a Sol LeWitt-style artwork as an interactive chart, combining a bar chart and scatter plot to explore categorical and quantitative data. It shows how geometric abstraction can be generated from data, with hovering over bars highlighting them in orange. The code loads CSV data via D3 v6’s `d3.csv` method, converting string values to numbers, then passes the dataset to custom `renderBarChart` and `renderScatterPlot` functions that set up SVG, scales, and axes. While the drawing logic is stubbed out, the structure relies on D3’s data-binding and selection APIs to map values to visual elements.

SSai Hemanth Babu Sunkari
75% 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
75% match