Petrescu Alexandru

@alantpetrescu·8 public vizzes

D3 selection exploration

This example demonstrates how D3’s data join and selection mechanism dynamically updates an SVG scene in real time. An animated set of circles shifts vertically based on a sine wave, with their count oscillating between five and fifteen as time progresses. The code uses `d3.select`, `d3.range`, and `.join('circle')` to bind incoming data to SVG elements, updating positions each frame via `setInterval`. Data is generated procedurally from a mathematical function rather than an external dataset.

Sep 2, 2023

Loading thumbnail…

JavaScript Arrays

This example demonstrates the creation of a JavaScript array using a custom `range` function defined with a `const` arrow function. The function initializes an empty array, calls `push` to add the value `0`, and then returns the array. The code invokes `range(5)` and logs the resulting array to the browser console via `console.log`. It relies solely on native JavaScript ECMAScript syntax and the `Array.prototype.push` method, with no external libraries or data sources. The visualization is strictly a code execution output shown in the console.

Sep 2, 2023

Loading thumbnail…

D3 starter

This example uses the D3.js library (v7.8.5) to generate a grid of rectangles. The visualization shows two sets of alternating horizontal and vertical bars overlaying the canvas, with the vertical set applied through an SVG mask. The mask is created dynamically by rendering all available D3 symbol paths (stars, triangles, etc.) as fill regions. The horizontal bars are drawn first, then masked by the symbol shapes, while the vertical bars remain unmasked, creating an intersecting pattern across the full window dimensions.

Sep 2, 2023

Loading thumbnail…

Sol LeWitt representation using multiple symbols in D3

This example visualizes a Sol LeWitt-inspired geometric composition using an array of 120 unique symbols. It renders 120 horizontal and vertical rectangular strips that use two different masks to reveal or hide portions of the symbol paths, creating an intricate crosshatch pattern. Built with D3 v7, the code leverages `d3.select`, `d3.range`, and `d3.symbol` APIs to generate and position paths. The SVG output uses mask elements with inverted black-and-white fills to control layer visibility across the full-window canvas.

Sep 2, 2023

Loading thumbnail…

Full Sol LeWitt reproduction with D3

This example reproduces a Sol LeWitt-style drawing using two sets of overlapping rectangular grids, each masked to reveal a circular region at the center of the screen. Vertical and horizontal stripes alternate visibility through complementary black-and-white circle masks, creating an intersecting pattern. The visualization uses D3 v7 with `select`, `range`, and SVG masks. It generates 100 rectangles per axis, sized relative to the viewport, and appends them dynamically without binding external data.

Sep 2, 2023

Loading thumbnail…

Sol LeWitt Reproduction with D3 and groups

This example reproduces a Sol LeWitt-style drawing using overlapping horizontal and vertical striped rectangles, with a central circular region revealed through two complementary SVG masks. The code uses D3’s `select`, `range`, and `.join` API to generate 100 rects in each direction, setting their positions and dimensions from the window size. A `mask` element with a black background and white circle creates a circular window for the horizontal bars, while a second mask with inverted colors applies to the vertical bars, producing a contrasting intersection at the center.

Sep 1, 2023

Loading thumbnail…

Sol LeWitt Reproduction with D3

This example recreates a Sol LeWitt-style drawing using intersecting striped rectangles and circular masks. It renders two sets of perpendicular lines—horizontal and vertical—each composed of 100 thin `rect` elements, with overlapping regions revealed through the use of SVG `mask` elements and circles. The visualization uses D3 v7’s `select`, `range`, and `join` methods to generate and bind data, drawing directly to an SVG canvas sized to the browser window. The complementary masks create a striking negative-space circle in the center.

Sep 1, 2023

Loading thumbnail…

Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt-inspired geometric composition using D3 v7. It renders a grid of alternating horizontal and vertical SVG rectangles that are masked to reveal a circular viewing window at the center of the page. The code uses `d3.select` and `d3.range` to generate 100 rect elements per direction, with two distinct SVG masks (`circle-mask` and `circle-mask2`) that control visibility by combining black and white fill shapes. The visualization is entirely procedural, with no external data source, and adapts to the full browser viewport.

Sep 1, 2023