Helip3

@Helip3·4 public vizzes

D3 Selection

Thirty circles positioned in a diagonal line across the screen animate by re-rendering every 20 milliseconds. The example demonstrates D3’s data join, using `selectAll`, `data`, and `join` to update circle positions, while `range` generates the dataset and `select` appends an SVG to the body. The animation increments a time variable but currently leaves the y-coordinate static, showing basic selection and binding without motion.

Nov 4, 2022

Loading thumbnail…

Fork of Sol LeWitt US Flag with d3.

This example shows the geometry of the US flag, constructed with rectangles and star-shaped symbols in SVG. The flag’s stripes and canton are rendered as masks that filter dashed diagonal and vertical line groups, based on Sol LeWitt’s conceptual art. It uses D3 selections and joins with `select`, `range`, and `symbol` to generate 50 white stars in a grid, with masks applying the flag’s color regions.

Nov 2, 2022

Loading thumbnail…

Sol LeWitt Reproduction with D3 Tests

This D3.js reproduction of a Sol LeWitt artwork generates an SVG pattern of horizontal and vertical stripes across the full browser window. It uses D3’s `select`, `append`, and `range` APIs to create 100 rect elements per orientation, with each stripe masked by a circle that either reveals or hides the stripes. Two masks are rendered with inverted black-and-white fills, creating a circular intersection of differently oriented line fields. The piece visualizes geometric abstraction through code, relying on SVG masks and D3’s data-driven element joins.

Nov 2, 2022

Loading thumbnail…

SVG Creation

This example generates an abstract, colorful spiral of concentric quadrilateral polygons directly on a blank black page. It creates an SVG namespace using `document.createElementNS`, sets its dimensions to the full window, and appends it to the body. A loop of 60 iterations positions and sizes each polygon, with its stroke color derived from a hue value that increments by 5 per step. The polygons are rendered with transparent fills and thin, brightly colored outlines.

Oct 29, 2022