Dyor69

@Dyor69·3 public vizzes

Fork of Sol LeWitt Reproduction with D3

This visualization reproduces a Sol LeWitt art piece using D3 v6, rendering 100 horizontal and 100 vertical rectangles as SVG elements. The rectangles are masked to reveal only a circular region at the center of the canvas, creating an overlapping grid pattern reminiscent of the original work. The code uses D3’s `select`, `range`, and `join` methods to bind data and generate the SVG shapes, with two `mask` definitions controlling the visibility of the crossing bars.

Feb 27, 2023

Loading thumbnail…

Fork of Sol LeWitt Reproduction D3

This visualization reproduces Sol LeWitt’s geometric art by rendering 100 horizontal bars of varying heights, arranged to form an abstract pattern. The bars are drawn as SVG rectangles, each with a fixed width and height, positioned vertically based on an index from `d3.range`. A circular `mask` clips the rectangles, creating a rounded composition. The code uses D3 v7’s `select` and `range` to bind data and join elements, with a minimal black-on-white aesthetic. The rendering is static, driven purely by the data values from the range, without interaction or animation.

Feb 27, 2023

Loading thumbnail…

Sol LeWitt Reproduction

This example reproduces Sol LeWitt’s wall drawing using raw SVG elements, creating a visual grid of rectangles. It begins with a single rect drawn to the page, while commented-out code outlines a more complex masked pattern of horizontal and vertical stripes. The code uses no D3 API calls for rendering, instead relying on the standard DOM methods `document.createElementNS`, `setAttribute`, and `appendChild` to build the SVG structure. The file references D3 version 7 in its JavaScript, but the active implementation is pure vanilla SVG manipulation.

Feb 24, 2023