jmetzg11alpine

@jmetzg11alpine·8 public vizzes

Animated Reusable D3 Scatter Plot

This animated scatter plot cycles through four measurements from the Iris Dataset, alternately mapping petal width, sepal width, petal length, and sepal length to the x-axis while keeping sepal length on the y-axis. Built with a reusable D3 module, it uses `scaleLinear`, `axisBottom`, and `axisLeft` to render SVG circles and axes, updating every four seconds via `setInterval`. The animation relies on D3’s data join (`selection.join`) to smoothly reposition points as the axes rescale.

May 8, 2023

Loading thumbnail…

Reusable D3 Scatter Plot Idempotence

A reusable D3 scatter plot displays the Iris Dataset, initially mapping petal length to the x-axis and sepal length to the y-axis. Every four seconds, it cycles the x-axis through the dataset's remaining numeric columns—petal width, sepal width, and sepal length—demonstrating idempotence by repeatedly invoking the same plotting function with different data accessors. The implementation uses D3's `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` methods, rendered as an SVG with animated updates via `setInterval` and JavaScript's `join` API.

May 8, 2023

Loading thumbnail…

Reusable D3 Scatter Plot

This example presents a reusable D3.js scatter plot visualizing the Iris Dataset, with petal length mapped to the x-axis and sepal length to the y-axis. The implementation uses D3's `scaleLinear` for coordinate scaling, `extent` for domain calculation, and `axisLeft`/`axisBottom` for labeled axes. The code demonstrates a custom `scatterPlot` function that accepts configurable parameters like dimensions, margins, data, and value accessors, enabling flexible reuse across different datasets. The plot renders as an SVG with circles sized by a configurable radius parameter, and the dataset is loaded via D3's `csv` function from a remote source.

May 7, 2023

Loading thumbnail…

scatter plot

This scatter plot visualizes the Iris dataset, plotting petal length on the x-axis against sepal length on the y-axis. It uses d3.csv to load the data, d3.scaleLinear for scaling, and d3.axisLeft and d3.axisBottom for tick marks. The SVG circles are rendered pink, matching the chart’s background, with margins sized proportionally to the viewport. The code reads window dimensions and appends the chart directly to the body.

May 1, 2023

Loading thumbnail…

javascript arrays

This example animates a sequence of 15 circles whose vertical positions and radii oscillate over time, creating a fluid wave-like motion. The circles are generated procedurally using sine functions, with each frame updating their `cx`, `cy`, and `r` attributes. The visualization uses D3.js v6 and its `select`, `range`, and `join` APIs to render the dynamic scene as an SVG, with an animation loop driven by `setInterval`. The data is recalculated in `makeData` and passed to `vizData` via the `svg.call` method.

Apr 23, 2023

Loading thumbnail…

Full of Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt-style geometric composition using D3.js, rendering a full-screen SVG grid of overlapping horizontal and vertical bars. Two distinct masks, created with inverted black-and-white shapes from D3’s `symbol` API, selectively reveal or hide portions of the grid, producing layered, intersecting patterns. The code uses D3’s `select`, `range`, and `join` methods to efficiently generate and update the 100 rectangles per orientation, while the `mask` elements dynamically apply the symbolic clipping paths. The final visualization is a clean, generative art piece driven entirely by SVG and D3’s declarative API.

Apr 22, 2023

Loading thumbnail…

Sol LeWitt Reproduction with D3

This D3.js reproduction of a Sol LeWitt artwork generates a grid of 100 horizontal and 100 vertical SVG rectangles, each 10 pixels thick, which are masked by two opposing circular shapes. Using the `select` and `range` APIs from d3, the code appends SVG elements and utilizes two masks—one hidden by a black rectangle with a white circle, the other with inverted colors—to create an intersecting ring pattern. The final visualization, sized to the full browser window, forms a crosshatched composition with circular cutouts, demonstrating D3's declarative `.join` method for efficient element creation.

Apr 16, 2023

Loading thumbnail…

SVG Fundamentals

This example demonstrates fundamental SVG shapes in a single static graphic, including a circle, a red-filled circle, an outlined blue rectangle, a thick black line, and a polyline path. It shows how the basic geometric elements—circle, rect, line, and path—are defined with coordinates and styling attributes such as fill, stroke, and stroke-width. The rendering uses inline SVG within an HTML document, with no external libraries or data sources. The code illustrates manual layout by specifying each element’s position, size, and appearance directly in the markup.

Apr 9, 2023