thenlpstudent

@thenlpstudent·5 public vizzes

Scatter plot with controls

This scatter plot cycles through all possible pairs of the Iris dataset’s four numeric attributes every second, animating the circles and axes between projections. Each point is colored by iris variety (red, blue, or green) using `d3.scaleOrdinal`. The visualization uses `d3.csv` for data loading, `d3.scaleLinear`, `d3.axisLeft` and `d3.axisBottom` for scales, and `transition()` to update the SVG circle positions and axes smoothly.

May 29, 2023

Loading thumbnail…

Scatter Plot

The scatter plot animates the classic Iris dataset, cycling through all pairs of four measured attributes every second. Each circle represents a flower, colored by species (red, blue, green). A D3 transition smoothly moves points between axis scales while simultaneously updating the left and bottom axes. The visualization uses `d3.csv` for data loading, `d3.scaleLinear` for positioning, `d3.scaleOrdinal` for color mapping, and `d3.axisLeft`/`d3.axisBottom` for rendering the axes.

May 29, 2023

Loading thumbnail…

Basic Shapes in SVG

A black-and-white animation of concentric circles expands and contracts around a central point, with the radius cycling through increasing values. The SVG is manipulated entirely through basic JavaScript, creating and appending circle elements in a loop of alternating colors. The animation uses `setInterval` to update the state every millisecond, while `document.createElementNS` and `setAttributeNS` build each circle with the SVG namespace. The code defines a custom `computeState` function to progress the radius and delta, with the loop resetting when the radius exceeds 400.

May 28, 2023

Loading thumbnail…

Epsoide 3

A full-screen D3 art piece displays two sets of randomly colored horizontal and vertical bars. A circular mask reveals the horizontal stripes in the center, while an inverted mask applies the vertical stripes to the surrounding area, creating an intersecting grid pattern. The code uses `d3.select` and `d3.range` to generate rectangle data, then applies SVG `<mask>` elements with circles to achieve the effect.

May 21, 2023

Loading thumbnail…

Sol Lewitt Circle Animated

An animated SVG composition recreates Sol Lewitt’s circle drawings by layering two sets of thin, colored lines. Vertical lines and horizontal lines are drawn as rectangles, each clipped by a circular mask that alternately reveals or hides the center. The line thickness and spacing incrementally increase each frame, cycling from fine grids to bold strokes. The animation uses raw `document.createElementNS` for SVG elements, `window.requestAnimationFrame` for looping, and masks defined with `url(#mask-id)`.

May 12, 2023