Skip to main content
Log in
L

lukasilg.sol@gmail.com

@LeCaptainLama·15 public vizzes

Loading thumbnail…

Fork of HTML Starter

This example demonstrates a minimal HTML page that combines CSS styling with JavaScript logic, displaying a large “Hello HTML!” message. The code imports a named export (`something`) from a local module and logs it alongside the `d3.select` function, showing how to integrate D3.js v7 in a browser environment. The page loads D3 from a CDN and uses basic DOM manipulation via `d3.select`, illustrating a simple entry point for mixing vanilla JavaScript with D3’s selection API. It does not include any data visualization or complex interactions.

Jun 3, 2024
Loading thumbnail…

Rework of Flickering sin()

Animated sine waves drive the motion of circles and a connecting line, with the number of circles changing over time as the wave's frequency shifts. Each circle and the line are redrawn every frame using D3's data join and a d3.line generator, while the circle count and positions update based on a continuously incrementing time variable. The SVG animation runs at 60 frames per second via setInterval, and circle colors are randomly generated per frame with the d3.range helper.

Jun 3, 2024
Loading thumbnail…

Fork of enter, update, exit

This example shows animated circles and a connecting line whose positions, radii, and colors update continuously over time. The visualization demonstrates dynamic data updates with enter, update, and exit transitions, where the number of circles fluctuates based on a sine wave. Using D3.js, the code leverages `selectAll`, `.data()`, and `.join()` to bind data to SVG shapes, while `d3.line` generates the path connecting the circle centers. Data is procedurally generated with random RGB values and updated at 60 frames per second via `setInterval`. The animation runs in a full-window SVG canvas.

Jun 3, 2024
Loading thumbnail…

Fork of HTML Starter

A dynamic array of circles undulates across the canvas, with each circle's vertical position and the total count oscillating sinusoidally over time. The animation is built using D3.js's `select`, `range`, and chained `join` operations to update the SVG elements. The code runs a 60 FPS interval, recalculating data from a sine function and merging new circles with `selectAll('circle').data(data).join('circle')`, while styling each with a fixed radius of 20 pixels. The rendering relies on SVG attributes (`cx`, `cy`, `r`) updated per frame.

Jun 3, 2024
Loading thumbnail…

Refactoring of Sol LeWitt with functions in d3

This example reproduces a Sol LeWitt art piece using D3 v6. It creates a grid of horizontal and vertical rectangles that are selectively revealed through two SVG masks. The masks use D3’s `symbol` and `symbols` APIs to generate geometric shapes, which act as windows showing either the horizontal or vertical lines. Rectangles are generated with `range`, `selectAll`, and `join`, while `renderMask` is called via `svg.call` to apply the two mask layers.

May 27, 2024
Loading thumbnail…

Other Sol LeWitt Reproductions

This example reproduces a Sol LeWitt drawing as an interactive SVG artwork. It shows a grid of thin horizontal and vertical lines that remain fully visible except within two circular masks, which appear as a black circle and a white circle, creating a layered cutout effect. The piece uses the D3 library, specifically its `select`, `range`, `symbols`, and `symbol` functions, to generate 100 horizontal and vertical rectangles. Two masks are rendered via the `renderMask` function, which employs D3’s SVG path rendering for the circle shapes, with one mask inverted to produce the contrasting visual result.

May 27, 2024
Loading thumbnail…

Grouping Rect by <g>

A single-page web drawing reproduces a Sol LeWitt piece by layering two sets of parallel lines: horizontal stripes on even rows and vertical stripes on uneven columns. It uses D3.js functions `select`, `range`, and the `.join` method to append 100 `<rect>` elements to each of two `<g>` groups. Two SVG masks, each containing a circle with a contrasting fill, selectively reveal the stripes in a circular window at the center, while the surrounding area remains hidden. The entire canvas adapts to the browser's inner width and height.

May 27, 2024
Loading thumbnail…

Grouping Rect by <g>

This example reproduces a Sol LeWitt art piece, layering horizontal and vertical stripes that intersect to create a grid across the entire screen. The jagged, circular pattern emerges by using two SVG masks: one shows vertical lines through a white circle, while the other reveals horizontal lines outside a black circle, and their combined effect produces curved edges. Built with D3.js (version 6.6.1), the code uses `select`, `range`, and `.join()` to generate 100 rectangles in each direction, with masks defined via `append('mask')` and styled through fill colors. The stripes use fixed pixel offsets and dimensions, creating repeating, mathematically organized visuals.

May 27, 2024
Loading thumbnail…

Fork of Sol LeWitt Reproduction

This visualization reproduces a Sol LeWitt art piece using D3.js, displaying a grid of horizontal and vertical thin rectangular bars across the full viewport. The bars are partially revealed through two circular masks, creating a geometric pattern of intersecting lines within a central circular region. Using d3.select and range, the code generates 100 rect elements in each orientation, applying SVG mask elements with contrasting black-and-white fills to selectively show vertical bars inside one circle and horizontal bars inside another. The rendering is entirely SVG-based, with the artwork adapting to the browser window dimensions.

May 27, 2024
Loading thumbnail…

Fork of Sol LeWitt Reproduction

This visualization reproduces a Sol LeWitt art piece by rendering intersecting horizontal and vertical lines on an SVG canvas. A central circle is isolated through two SVG masks, creating a geometric interplay where line patterns alternate between appearing within and outside the circular boundary. The code uses vanilla JavaScript with the SVG DOM API, generating 100 rectangle elements per axis and applying masks (`circle-mask` and `circle-mask-2`) to control visibility. The result mirrors LeWitt’s systematic, rule-based aesthetic without external libraries.

May 23, 2024
Loading thumbnail…

Fork of Sol LeWitt Reproduction

This visualization reproduces a Sol LeWitt art piece by rendering intersecting horizontal and vertical lines on an SVG canvas. A central circle is isolated through two SVG masks, creating a geometric interplay where line patterns alternate between appearing within and outside the circular boundary. The code uses vanilla JavaScript with the SVG DOM API, generating 100 rectangle elements per axis and applying masks (`circle-mask` and `circle-mask-2`) to control visibility. The result mirrors LeWitt’s systematic, rule-based aesthetic without external libraries.

May 23, 2024
Loading thumbnail…

Fork Sol LeWitt Exercise

This example generates an abstract geometric composition inspired by Sol LeWitt, showing a grid of horizontal and vertical stripes that intersect. Two SVG masks define an elliptical region at the center; the first mask reveals the horizontal stripes within the ellipse, while the second inverts the effect for the vertical stripes. The code uses the raw Document Object Model (DOM) API with `createElementNS` to build SVG elements, setting attributes like `mask` and `fill` directly. It draws 100 rectangles in each direction, producing a layered, monochromatic pattern where the ellipse creates a focal point of contrasting stripe orientations.

Apr 30, 2024
Loading thumbnail…

Fork Sol LeWitt Exercise

This example generates an abstract geometric composition inspired by Sol LeWitt, showing a grid of horizontal and vertical stripes that intersect. Two SVG masks define an elliptical region at the center; the first mask reveals the horizontal stripes within the ellipse, while the second inverts the effect for the vertical stripes. The code uses the raw Document Object Model (DOM) API with `createElementNS` to build SVG elements, setting attributes like `mask` and `fill` directly. It draws 100 rectangles in each direction, producing a layered, monochromatic pattern where the ellipse creates a focal point of contrasting stripe orientations.

Apr 30, 2024
Loading thumbnail…

Fork of HTML Starter

This example demonstrates a generative visual pattern using SVG masking: a set of horizontal and vertical striped rectangles is clipped by two circular masks, producing a crosshatched effect with overlapping rings. The page window dimensions determine the SVG size, and all elements are created dynamically via the native DOM API (`document.createElementNS`). Two masks—one with a white circle on black, the other with a black circle on white—alternately reveal and hide the stripes, creating contrasting circular regions in the center of the viewport. This is a minimal, dependency-free HTML/CSS/JavaScript visualization that highlights basic SVG compositing techniques.

Apr 30, 2024
Loading thumbnail…

Fork of Sol LeWitt Reproduction

This visualization reproduces a Sol LeWitt art piece by rendering intersecting horizontal and vertical lines on an SVG canvas. A central circle is isolated through two SVG masks, creating a geometric interplay where line patterns alternate between appearing within and outside the circular boundary. The code uses vanilla JavaScript with the SVG DOM API, generating 100 rectangle elements per axis and applying masks (`circle-mask` and `circle-mask-2`) to control visibility. The result mirrors LeWitt’s systematic, rule-based aesthetic without external libraries.

Apr 30, 2024