BaptPoi

@Batpoi·6 public vizzes

Fork of D3 Starter

Fifteen circles animate in a horizontal line, bobbing up and down in a smooth sinusoidal wave pattern that shifts over time. Using D3 v7's `select`, `range`, and data joins, the code updates each circle's `cx` and `cy` attributes every 200 milliseconds via `setInterval`. The SVG elements are appended to the body, with positions calculated from a sine function of index and time.

Aug 16, 2022

Loading thumbnail…

Fork of HTML Starter

A minimal web page visualizes an empty SVG canvas that fills the entire browser window. The code uses D3's `select` method to append an SVG element to the body, setting its width and height to the viewport dimensions. No data is loaded or drawn; the example simply demonstrates the basic structure for starting a React-free visualization project with D3, serving as a foundation for adding custom graphics.

Aug 12, 2022

Loading thumbnail…

Pouet

A minimal React example that renders an empty HTML page with no visible visualization. The code uses a bare HTML document structure with no JavaScript libraries or rendering logic beyond a blank body. It demonstrates the simplest possible setup for a React starter template, with no data sources, SVG elements, or interactive behaviors implemented. The example serves as a baseline scaffold for building more complex visualizations in the React framework.

Aug 12, 2022

Loading thumbnail…

Full Sol Lewitt

Two alternating sets of horizontal and vertical black-and-white stripes create a full-screen moiré grid. Two SVG masks, generated with D3’s `symbol` and `symbols` APIs, punch contrasting shapes into each stripe layer using inverted fills. The stripes are drawn as nested rectangles via `selectAll` and `join`, with masks applied via `attr('mask', 'url(#mask-1)')`. The result is a generative geometric composition referencing Sol LeWitt’s wall drawings.

Aug 12, 2022

Loading thumbnail…

Sol Lewitt vertical

The visualization displays a grid of horizontal and vertical striped bars, layered to form a woven pattern that is revealed only within a central circular window against a dark background. Using D3.js selections and joins, it generates 100 horizontal rectangles and 100 vertical rectangles, each with a distinct mask. The first mask exposes the vertical stripes inside a white circle, while the second mask hides the horizontal stripes in the same area, creating a contrast between the masked and unmasked regions. The SVG rendering is fully responsive to the browser window size.

Aug 12, 2022

Loading thumbnail…

Sol Lewitt

This example renders a full-screen SVG composed of one hundred vertical rectangles, each ten pixels wide, spaced twenty pixels apart. The rectangles are created programmatically using the native Document Object Model API, with `document.createElementNS` and `setAttribute` to construct each SVG `rect` element. The `window.innerWidth` and `window.innerHeight` properties define the canvas dimensions, while the fixed loop count determines the layout. The result is a minimalist, grid-like pattern inspired by Sol LeWitt’s geometric wall drawings, though no data source or interaction drives the composition.

Aug 11, 2022