danperkins

@danperkins·3 public vizzes

D3 Selections

This example demonstrates a dynamic line chart created with D3, where 15 points oscillate vertically over time based on a sine function. The visualization uses D3's `select` and `range` APIs to build an SVG canvas and animate both circles and a connected path. Using D3's `.join()` method, the code efficiently updates element attributes on each frame, with a `setInterval` timer driving the animation at 20ms intervals. The implementation uses the React framework and renders purely through SVG elements, with the data generated procedurally from a mathematical function rather than external sources.

Jan 14, 2023

Loading thumbnail…

Animate rotations

The visualization animates rotating geometric shapes (from `d3.symbols`) that slide across the screen, acting as masks to selectively reveal or hide vertical and horizontal stripes. Two overlapping mask layers, one inverse, alternate shapes every five seconds with a two-second slide transition. Built with React and D3, it uses `d3.select`, `d3.transition`, and SVG `<mask>` elements to animate the shape paths and dynamically update the stripe rectangles. The result is an endlessly changing, layered pattern of stripes and symbols.

Jan 9, 2023

Loading thumbnail…

Svg Fun

This example generates an abstract animation using SVG masks and morphing symbols. It displays a grid of rectangular bars that appears to slice through the canvas, with the pattern dynamically changing as the mask content transitions between geometric shapes. The visualization employs d3 selections and transitions to animate the masks sliding in and out over a nine-second duration, while the underlying data cycles through d3 symbols. React manages the rendering, and the SVG elements use inline animation and CSS styling to create the visual effect.

Jan 8, 2023