T

tomasnihlen

@tomasnihlen·18 public vizzes

Loading thumbnail…

JS is HTML

This example shows a bare-bones HTML page displaying a large, centered “Hello HTML!” message styled entirely with CSS and JavaScript. The page uses a `<style>` block for typography and layout, and a `<script>` tag to load `script.js`, which logs “Hello!” to the console. It demonstrates the minimal integration of HTML, CSS, and JavaScript without any external libraries, serving as a foundational contrast to a React-based starter project. The rendering approach is plain DOM content with static styling, and the message is the only visible output.

Loading thumbnail…

JavaScript Arrays 1

This example demonstrates fundamental JavaScript array operations using D3’s `ascending` comparator within a React project. It shows a custom `range` function that generates sequential numbers, then maps and reduces an array of key-value entries into an object, and finally sorts the entries alphabetically by their keys. The code logs results to the console, illustrating how to manipulate and transform arrays with native methods like `forEach`, `map`, `reduce`, and `sort`, all within a minimal HTML page.

Loading thumbnail…

D3 Selection Exploration 3

Animated SVG circles move in a sinusoidal wave pattern across the browser window, with their vertical positions and radii oscillating over time while a connected line traces their path. Using D3.js v7 selections and the `join` pattern, it updates existing circle and path elements each frame rather than recreating them. The animation runs at 60fps via `setInterval`, and data is generated procedurally with `d3.range` before being passed to separate visualization functions for rendering.

Loading thumbnail…

D3 Selection Exploration 2

A reactive swarm of animated circles demonstrates D3’s data join, updating 60 times per second via `setInterval`. Each circle’s x-position, y-position, and radius are recomputed from a sine wave, with the count oscillating between 5 and 15. The code uses `d3.select` to append an SVG, `d3.range` for data generation, and `selection.join('circle')` to create or update elements in place. The animation runs seamlessly in a React project, showing how D3’s selection methods handle dynamic data without explicit enter or exit handling.

Loading thumbnail…

D3 Selection Exploration 1

Fifteen animated circles bounce vertically across the screen, their radii oscillating in a wave-like pattern. The visualization uses D3.js selection and join operations within a React framework to update SVG circle positions at 60 frames per second. Data is procedurally generated using sine functions of time and index, rendered directly to an SVG canvas.

Loading thumbnail…

D3 - LeWitt Full 5

This example generates a generative art composition in the style of Sol LeWitt, using an SVG canvas and D3.js. Horizontal and vertical striped bars are combined with two masks containing scaled D3 symbols, creating an intersecting interplay between the bar grid and the shapes. The code uses `d3.select`, `d3.range`, `d3.symbols`, and `d3.symbol` with `d3.symbol()` to render the masked paths. The output is a purely procedural, abstract visualization driven by layout and masking logic, with no external data source.

Loading thumbnail…

D3 - LeWitt Full 4

An algorithmic drawing of interlocking geometric bands fills the entire viewport. It uses two perpendicular sets of thin, rectangular strips that are selectively masked by a large, rotated shape. The masks define overlapping silhouettes across the bars, creating a dynamic visual interplay reminiscent of Sol LeWitt’s wall drawings. The piece is rendered in SVG using D3’s `select`, `range`, `symbols`, and `symbol` APIs, applying `mask` elements to produce the composite result.

Loading thumbnail…

D3 - LeWitt Full 3

This visualization uses D3.js to generate a layered composition of horizontal and vertical bands that interact through custom SVG masks. The code creates 100 alternating stripes across the canvas, with horizontal bars masked against circular symbols and vertical bars masked against their inverse, producing an intricate geometric interplay inspired by Sol LeWitt's wall drawings. Using D3's `select`, `range`, and `symbol` APIs, the example constructs two overlapping line grids whose visibility is modulated by the mask patterns, creating a dynamic Moiré-like effect. The piece is rendered entirely as SVG, with the mask system built through reusable functions that toggle between positive and negative space.

Loading thumbnail…

D3 - LeWitt Full 2

This generative art piece creates a grid-based composition of horizontal and vertical bars overlaid with a star-shaped mask. The artwork is built using D3.js, with the `select`, `range`, `symbols`, and `symbol` APIs. Two sets of rect elements are positioned and sized based on calculated indices, then masked by two separate mask definitions, each containing a star path from D3's symbol set. The rendering is an SVG output, filling the entire browser viewport and resulting in a dynamic interplay between the striped background and the cutout star shapes.

Loading thumbnail…

D3 - LeWitt Full

This example uses D3 (version 7) to generate an abstract geometric composition inspired by Sol LeWitt. Horizontal and vertical striped rectangles are layered and masked by a central diamond shape, created with the `symbol` API. Two SVG masks—one inverted—control which stripes appear inside versus outside the diamond, producing a cross-hatched visual effect. The rendering is purely computational, using `range`, `join`, and SVG elements without any external data source.

Loading thumbnail…

D3 - LeWitt Horisontal

This example creates a generative grid of horizontal and vertical bars using D3.js, with a circular mask that reveals the intersection of the patterns. The visualization uses `select`, `range`, `append`, `attr`, and `join` to build SVG `rect` elements dynamically, while two masks (`circle-mask` and `circle-mask-2`) invert the visibility of the bars within a central circle. The result is a crosshatch of lines forming a negative-space circle at the center of the canvas, rendered in pure SVG without external data.

Loading thumbnail…

LeWitt Horisontal

This example generates a full-screen composition of horizontal bars, using D3.js to create SVG rectangles that tile the viewport. The visualization relies on D3’s `select` and `append` API to build the SVG structure dynamically. The pattern resembles Sol LeWitt’s wall drawings, with a straightforward, systematic placement of bars. The code includes commented-out mask and circle elements, though these are not active in the final render. The result is a clean, generative graphic that adapts to the browser window size.

Loading thumbnail…

LeWitt D3

This example creates a full-screen generative drawing inspired by Sol LeWitt’s minimalist wall drawings, using raw SVG rectangles rather than the D3 library (which is listed as a dependency but unused in the code). It calculates the number of bars based on the browser window’s width and height, rendering evenly spaced vertical black bars that alternate with gaps of equal size. The rendering approach directly manipulates the SVG namespace via `document.createElementNS`, setting each rectangle’s position and dimensions dynamically to fill the viewport. The result is a simple, procedural grid pattern that responds to the window size.

Loading thumbnail…

LeWitt Vertical

This example creates a generative, grid-based composition inspired by Sol LeWitt’s wall drawings. It renders a series of black vertical bars evenly spaced across the full width and height of the browser window. The visualization is built entirely with raw SVG elements created via the Document Object Model API, using `document.createElementNS` and `setAttribute` to add rectangle shapes directly to an SVG container. No external libraries are used, and the bar width and spacing are calculated dynamically from the viewport dimensions. The result is a simple, minimalist pattern that fills the screen.

Loading thumbnail…

Fork of LeWitt Forsts

A minimal generative drawing uses the DOM API to create rectangular SVG bars across the full viewport. Horizontal bars are placed at evenly spaced intervals, with each bar’s height fixed and its width spanning the entire screen. The sketch calculates bar positions based on window dimensions and a constant bar width, rendering a striped pattern. It relies on raw JavaScript and SVG element creation, without any external visualization libraries, and does not include interaction or data-driven input.

Loading thumbnail…

LeWitt

This example generates a minimalist geometric composition inspired by Sol LeWitt, using raw JavaScript and the SVG DOM API. It creates a grid of vertical and horizontal bars by appending `rect` elements to an SVG canvas that fills the entire browser window. The vertical bars are positioned on the left half, while horizontal bars extend from the center to the right, with spacing based on a fixed bar width and the window dimensions. No external libraries are used; the code relies on `document.createElementNS` and manual attribute setting.

Loading thumbnail…

Pseudo Scatter Plot

A pseudo scatter plot displays a series of vertical bars evenly spaced across the full width of the browser window. The visualization creates an optical illusion of scattered points through the deliberate placement of these bars. The code uses plain JavaScript with the SVG DOM API, creating `rect` elements via `document.createElementNS` and appending them to an SVG canvas that spans the entire viewport. The bars are positioned mathematically using the `barWidth` variable and loop counters, though no actual scatter plot data or points are rendered.

Loading thumbnail…

Test SVG Fundamentals

This example demonstrates a single polyline path rendered in an SVG canvas. It shows a blue, thick-stroked line that follows a series of relative coordinates, creating a stepped diagonal pattern across the 900 by 500 pixel drawing area. The visualization relies on the SVG `<path>` element and its `d` attribute, using relative `l` commands to define each segment. A CSS class, `.path-format`, sets the stroke properties, including the absence of fill and a 20-pixel width. The code uses raw SVG syntax without any external JavaScript libraries.