Skip to main content
Log in
A

Amauri Ribeiro

@Ribeirosk8·9 public vizzes

Loading thumbnail…

Full Sol Le Witt Reproduction with D3

This example reproduces a Sol LeWitt-inspired drawing using D3 and SVG masks. It displays a grid of horizontal and vertical bars, with a central circular region where the two sets of bars visually intersect and invert their colors. The code uses D3 selections with `range` and `join` to generate 100 rectangles in each orientation, and defines two SVG masks with `circle` elements to control which bars are visible. The final image resembles a minimalist bar chart filtered through a circular aperture.

Oct 27, 2024
Loading thumbnail…

Fork of Sol Le Witt Reproduction Original

This example generates a geometric composition inspired by Sol LeWitt, displaying a grid of alternating horizontal and vertical black stripes that intersect within a central circular cutout. The artwork uses two SVG masks—one to reveal the horizontal bars through a white circle on a black background, and another to apply the vertical bars through an inverted mask. Built with D3.js, the code constructs 100 rectangles for each orientation and sets their dimensions relative to the viewport, creating a striped pattern that highlights the circular negative space.

Oct 27, 2024
Loading thumbnail…

Sol Le Witt Reproduction Original

This example reproduces a Sol LeWitt-inspired drawing using an SVG bar chart approximation. It shows a grid of thin, evenly spaced horizontal and vertical bars that intersect within a central circular region, creating a woven geometric pattern against a plain background. The visualization uses two SVG masks (`circle-mask` and `circle-mask-2`) to clip alternating sets of 100 rectangles—horizontal bars masked by a white circle, and vertical bars masked by a black circle—so only the overlapping area reveals the full crosshatch effect. The bars are generated procedurally via raw DOM manipulation with `createElementNS` and positioned based on the window dimensions.

Oct 25, 2024
Loading thumbnail…

Sol LeWitt Reproduction

This example reproduces a Sol LeWitt-inspired drawing as a series of vertical black rectangles distributed across the full height of the browser window. The visualization shows a minimalist grid-like pattern of evenly spaced bars, resembling a simple bar chart without data. The code uses plain SVG via `document.createElementNS` to generate one hundred `rect` elements, each positioned along the x-axis with a fixed width and spacing, covering the entire viewport height. No external libraries are used, and the rendering is purely geometric and deterministic.

Oct 20, 2024
Loading thumbnail…

Pseudo Bar Chart

Four vertical rectangles of varying heights sit on a blank SVG canvas, approximating a bar chart without any axes or labels. The longest bar spans nearly the full height, while the shortest occupies only the bottom quarter. The example uses raw SVG `rect` elements with explicit `x`, `y`, `width`, and `height` attributes, all defined directly in the HTML. No JavaScript libraries or data-binding frameworks are present; the chart is a static, hand-coded approximation of a categorical comparison using only the SVG specification.

Oct 19, 2024
Loading thumbnail…

Pseudo Scatter Plot

A pseudo scatter plot displays six evenly sized circles arranged diagonally across a white SVG canvas, suggesting a trend from lower-left to upper-right without underlying data points. The visualization is built with plain JavaScript and SVG, using `<circle>` elements with explicit `cx`, `cy`, and fixed `r` attributes for positioning. No D3 or external libraries are employed; instead, hardcoded coordinates create the approximate scatter effect. The rendering relies solely on SVG's native shape primitives within an HTML document, with a `rect` serving as the background.

Oct 19, 2024
Loading thumbnail…

Sol LeWitt Reproduction

Four plain rectangles of decreasing height stand in a row, approximating a bar chart through minimal geometric forms. The code uses raw SVG `rect` elements within an HTML document, with no data-binding or charting library. Each rectangle is manually positioned using fixed `x`, `y`, `width`, and `height` attributes, creating a static, composition-like visualization that echoes Sol LeWitt's instructional art. The page sets the body margin to zero and hides overflow, while the SVG canvas is sized at 960 by 500 pixels.

Oct 19, 2024
Loading thumbnail…

Sol LeWitt Reproduction

Four plain rectangles of decreasing height stand in a row, approximating a bar chart through minimal geometric forms. The code uses raw SVG `rect` elements within an HTML document, with no data-binding or charting library. Each rectangle is manually positioned using fixed `x`, `y`, `width`, and `height` attributes, creating a static, composition-like visualization that echoes Sol LeWitt's instructional art. The page sets the body margin to zero and hides overflow, while the SVG canvas is sized at 960 by 500 pixels.

Oct 19, 2024
Loading thumbnail…

SVG Fundamentals

This example demonstrates the fundamental SVG shapes and how they render in a browser. It shows overlapping circles, a line, and two path elements, with basic attributes like position, size, fill color, stroke, and stroke width. The SVG markup is written directly in the HTML file, using the `circle`, `line`, and `path` elements. A commented-out `rect` element remains in the code, hinting at additional shape exploration without being displayed. The rendering is static and does not involve any external JavaScript libraries or data processing.

Oct 16, 2024