Eric Rodenbeck

@ericrodenbeck·5 public vizzes

Eric's Fork of A Visual History of Stamen Open Source

This streamgraph shows the commit history of Stamen’s D3-related repositories across time, with each repository as a colored layer whose thickness represents weekly commit counts after smoothing via `array-blur`. Layer order reflects when each repo was first introduced, revealing the monolithic `d3` repository phase (2010–2014) followed by a burst of packages around the 4.0 release and later focused work on `d3-delaunay`. Built with React and D3, it uses `d3.stack` with `stackOffsetWiggle`, `d3.areaLabel` for labels, and SVG paths rendered from JSON data on commit activity.

Apr 26, 2021

Loading thumbnail…

Circular Geometric Patterns

A grid of circular geometric patterns fills the screen, each composed of a blue polygonal path nested within a set of gray rings. The visualization uses React to render SVG elements, with each individual pattern generated by a `Star` component that computes node positions using trigonometric functions, drawing concentric circles and a connecting line via D3’s `line` and `curveLinearClosed`. The grid layout varies parameters like node count and skip factor across rows and columns, producing a systematic exploration of star-like forms.

Nov 22, 2019

Loading thumbnail…

Circular Geometric Patterns

This example renders a geometric pattern of eight circles arranged in a circular layout, with a blue polyline connecting their centers. Using React and D3 v5, the code computes circle positions from trigonometric functions, sizes each circle by the segment length between adjacent points, and draws the connecting path via `d3.line` with `curveLinearClosed`. The static SVG visualization is centered on a 960×960 canvas, with circles stroked in light gray and the polyline highlighted in blue.

Nov 21, 2019

Loading thumbnail…

Circular Geometric Patterns

A grid of circular geometric patterns demonstrates how varying two parameters creates diverse stellate forms. Each cell renders a star-like SVG constructed by plotting points along a circular path, connected by a d3 `curveLinearClosed` line, with circles centered at each point having a radius equal to the segment length. The React component uses d3’s `range` and `line` APIs within an SVG canvas, iterating through node numbers and skip factors to produce tessellated variations. The resulting composition shows systematic repetition and structural variation across the 960 by 960 pixel space.

Nov 19, 2019

Loading thumbnail…

Circular Geometric Patterns

This animated example generates circular geometric patterns by placing points along a circle and drawing both the connecting polygon and overlapping circles around each point. As the animation runs, a continuously increasing skip factor and node count alter the points’ positions, producing evolving abstract shapes. The visualization uses React for state management and rendering, with D3’s `line` and `curveLinearClosed` to create the polygon path, while each circle’s radius is calculated from the distance between the first two points. The scene is rendered as SVG, with a blue semi-transparent outline tracing the polygon and gray strokes for the circles.

Nov 19, 2019