Matthew Bixby

@mattbixby123·3 public vizzes

Fork of D3 Selection Exploration

This interactive example explores D3’s selection and data-join APIs. An SVG canvas fills the viewport, and a `d3.select` selection appends a root `<svg>` element. A function generates circles on a sine wave, updating their `cx`, `cy`, and `r` attributes through `selection.selectAll('circle').data(data).join('circle')`. The animation loop is commented out, so the visualization appears static; the code shows how to bind data to shapes and apply attribute updates via D3’s join operator.

Aug 25, 2024

Loading thumbnail…

Fork of Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt-inspired geometric composition using D3’s selection and data-join methods. It displays a grid of alternating horizontal and vertical black striped bars filtered through two circular masks, creating a central ring-like pattern on a white background. The visualization renders to SVG, with width and height set to the window dimensions. The code uses `d3.select`, `d3.range`, and the `.join()` pattern to generate the rect elements, while `svg.append("mask")` defines the circular cutouts that shape the final artwork.

Jul 21, 2024

Loading thumbnail…

SVG Fundamentals

A pair of gray and red circles demonstrates fundamental SVG shape definitions. The example uses the raw SVG API, with `<circle>` elements specifying center coordinates and radii via `cx`, `cy`, and `r` attributes. The markup appears directly in an HTML document, with the first circle using default black fill and the second explicitly filled red. This minimal illustration focuses on how basic SVG rendering works without any additional libraries or external data sources.

Jul 19, 2024