lukasreber

@lukasreber·6 public vizzes

JavaScript Arrays

Animated circles move in sine-wave patterns across the screen, with their count oscillating as the wave amplitude changes. The visualization demonstrates dynamic data binding in D3 v6, using `selectAll` and the `join` method to update SVG circle elements each frame. A `setInterval` drives the animation, generating data arrays with `d3.range` and updating circle positions via `.attr`. The example highlights how D3 handles enter, update, and exit states through the join pattern, creating a fluid, generative animation.

Jun 27, 2022

Loading thumbnail…

Sol LeWitt extended with D3

This example generates an abstract, generative art composition in the browser, extending the style of Sol LeWitt. It displays a grid of horizontal and vertical lines that are partially hidden by two masks, creating a dynamic interplay of shapes. The visualization uses the D3.js library to build the SVG and apply its `symbol` API to draw various symbols within the masks, with the SVG `mask` element controlling visibility. The final image is a large, screen-filling pattern of lines and geometric icon shapes that appear to emerge from the underlying grid.

Jun 23, 2022

Loading thumbnail…

Sol LeWitt with D3

This example recreates a Sol LeWitt–inspired geometric drawing using D3.js. It displays 100 horizontal and 100 vertical rectangles that intersect within two circular masks, producing a crosshatched pattern confined to circular regions. The visualization uses D3’s `select`, `range`, and data joins to bind arrays of indices to SVG `rect` elements. Masking is implemented with two SVG `mask` definitions, each combining a full-canvas rectangle with a circle, to alternately reveal or hide the grid lines.

Jun 20, 2022

Loading thumbnail…

Sol LeWitt

This example generates an abstract geometric composition inspired by Sol LeWitt, where horizontal and vertical striped bands form a cross-like pattern across the full screen. Two SVG `<mask>` elements define circular cutouts—one with a black background and white circle, the other inverted—so that the stripes alternate visibility through the center. The code builds 100 horizontal and 100 vertical rectangles via plain JavaScript DOM manipulation, setting each rectangle’s `mask` attribute to either `url(#circle-mask)` or `url(#circle-mask2)`. No external libraries are used; the rendering relies entirely on native SVG and CSS, with dynamic window dimensions set through `window.innerWidth` and `window.innerHeight`.

Jun 17, 2022

Loading thumbnail…

SVG Fundamentals

This example demonstrates fundamental SVG shapes—a circle, a line, and text—as rendered on a 500x500 canvas. It shows how basic SVG elements are positioned and styled using attributes like `cx`, `cy`, `r`, `x`, `y`, `stroke`, and `fill`. The code uses plain HTML with embedded CSS and JavaScript, and the rendering approach relies entirely on native SVG markup. A Roboto font from Google Fonts styles the large 'A' text element, while the shapes are drawn with visible stroke widths and colors.

Jun 17, 2022

Loading thumbnail…

Fork of HTML Starter

This example displays the text "Hello HTML" at a large, centered font size, creating a minimalist static visualization. The page uses plain HTML with embedded CSS for styling and a JavaScript script tag that logs "Hello JavaScript!" to the browser console. The rendering approach relies entirely on the browser’s default text layout, with no external libraries or data sources. It demonstrates the basic structure of an HTML document with inline styles and a simple script execution.

Jan 5, 2021