Phyllotaxis

100%

✓ Published0🌍 Public

Last edited Apr 28, 2016

Created on May 1, 2014

A sunflower-like phyllotaxis pattern spirals outward from the center as colored dots are added incrementally on a dark canvas. The entire canvas slowly rotates while the speed of new point generation increases over time. Built with D3 v4, it uses `d3.timer` for animation, a Canvas 2D context for drawing arcs, and a `d3.scaleRainbow` color scale mapped to each point’s angle and radius, with spacing and golden-angle rotation determining the layout.

AI-generated description

Based on Jason Davies’ earlier Sunflower Phyllotaxis.

gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

Phyllotaxis II

This example shows a Voronoi diagram generated from a phyllotaxis arrangement, a spiral pattern of points based on the golden angle. The code uses the `d3-voronoi.v0` library to compute Voronoi cells from these sites, then draws the polygon boundaries and point sites onto a Canvas 2D context. Hovering a cell fills it orange via CSS `path:hover`, though the canvas rendering itself only strokes the polygons without interactive fill logic visible.

Mmbostock

75% match

Loading thumbnail…

Svelte + D3: Phyllotaxis layout

A phyllotaxis layout arranges 1000 circles in a golden-angle spiral, with each circle colored by its index using a D3 sequential scale and the warm interpolator. An animated sweep highlights circles one by one, fading the active circle’s fill via a `setInterval` that updates a reactive Svelte variable. The layout is computed by a custom utility function using the golden ratio, while rendering uses SVG circles with CSS transitions for smooth opacity changes. The example combines Svelte’s reactivity and D3’s color scales for a simple, rhythmic visualization.

MMatthias Stahl

74% match

Loading thumbnail…

Svelte + D3: Phyllotaxis layout (irrational 2)

A generative arrangement of 1000 circles follows a phyllotaxis spiral, offset by an irrational angle derived from 1+√2. Each circle is colored with a warm sequential scale from D3, and the innermost circle briefly turns transparent in sequence via a timed activeCircle index, creating a wave-like fade. Rendered as SVG within a Svelte component, the layout is computed by a custom `layoutPhyllotaxis` function using D3’s `scaleSequential` and `interpolateWarm` for color mapping, with smooth CSS transitions animating the opacity changes.

MMatthias Stahl

73% match

Loading thumbnail…

Svelte + D3: Generation of a phyllotaxis layout

A spiral of 1,000 circles is rendered sequentially, each positioned by a phyllotaxis layout using the golden ratio. The animation progressively reveals circles while drawing a connecting spiral path through their centers. Circle colors come from D3’s `scaleSequential` with `interpolateWarm`, and the layout is generated by a custom `layoutPhyllotaxis` function. The SVG and animation are built with Svelte’s reactive `$:` blocks and `each` loops, updating at set intervals.

MMatthias Stahl

73% match

Loading thumbnail…

Rainbow Pack

A colorful swarm of circles arranges itself into a dense, rainbow-hued cluster. Each circle originates from a point along the outer edge of the canvas, then animates inward to its final position, with the color of each circle determined by its angle from the center. This creates a vibrant, radially organized pattern where hues progress around the circle. Built with d3.v4, the example uses `d3.packSiblings` for circle packing and `d3.scaleRainbow` for coloring, animating positions via a transition with `d3.easeCubicOut` and staggered delays based on distance.

Mmbostock

73% match

Loading thumbnail…

Svelte + D3: Phyllotaxis layout (irrational 3)

This example shows a phyllotaxis layout of 1000 circles, arranged in a spiral pattern and colored with a warm sequential scale. An animated circle cycles through the layout, temporarily becoming transparent. The Svelte component uses D3’s `scaleSequential` and `interpolateWarm` for coloring, while a custom `layoutPhyllotaxis` utility calculates positions using the irrational number (9 + √221)/10 for angle spacing. Circles render as SVG elements with a CSS transition on opacity, creating a pulsing highlight effect.

MMatthias Stahl

71% match

Loading thumbnail…

linked-hover-phyllotaxis

A grid of small multiple canvases displays phyllotaxis spirals at different angular offsets, each built from 600 points rendered as 2-pixel rectangles. Hovering over any canvas triggers a mouse-distance scan to find the nearest point index, then a magenta SVG circle in every panel translates to that same index. The linked hover reveals how the spiral’s geometry shifts across offsets, Svelte manages state, and the data is generated procedurally via a phyllotaxis formula.

11wheel

71% match

Loading thumbnail…

Circular Layout

The example shows a circular pattern of 180 radial spokes, each containing ten small circles that recede and shift in color outward from the center, producing a sunburst-like mandala effect. It uses D3 v3 to generate the SVG structure, with each spoke rotated incrementally via `transform` attributes. Circle positions and fills are mapped linearly through `d3.scale.linear`, transitioning from brown to steelblue along a radius of 180 to 240 pixels. All shapes have black strokes, and the rendering relies on SVG elements created through data joins on `d3.range` values.

Mmbostock

70% match