Skip to main content
SimilarExport ZIP
100%

linked-hover-phyllotaxis

✓ Published0🌍 Public
11wheel
Last edited Feb 26, 2020
Created on Oct 29, 2019

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.

AI-generated description

Small multiple linked hover.

My svelte version.

Rich's solution: "i'd do it this way — having a draw function that gets called with the current points value. that way it will disregard everything else, including hoveredPointIndex etc.""

Similar vizzes

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
76% 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
76% 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
76% 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
75% match
Loading thumbnail…

linked-hover

Linked-hover displays two line charts drawn side by side from randomly generated data, each with 100 points. Hovering over a circle in either chart emphasizes the corresponding point in both charts by enlarging it and adding a blue stroke, while also updating the URL hash to reflect the selected index. The visualization uses D3.js v3 for SVG rendering and axes, with lodash helpers for data manipulation. The linked selection is driven by mouseover events and a shared setHover function that applies transitions to all circles, ensuring synchronized highlighting across charts.

11wheel
74% match
Loading thumbnail…

181202_04_ Nice hoevering effect

A grid of colored shapes on a large SVG canvas demonstrates a hovering effect, with white rectangles and concentric circles in steel blue, blue, dark blue, yellow, and light green arranged across vertical and horizontal green and red lines. The visualization divides the viewport into a parameterized grid using D3 v5's selection API, appending paths and circles via `append`, while styling lines through CSS classes. It uses `d3.zoom` to enable interactive panning and zooming, which updates the group's transform attribute based on the zoom event.

LLudovicGouverneur
72% match
Loading thumbnail…

Pan & Zoom III

This example shows a dense phyllotaxis spiral of 2,000 points that can be panned and zoomed interactively. The points are generated on the fly from a mathematical formula, with each point placed at a radius and angle derived from the golden angle, creating a uniform spiral distribution across the SVG canvas. A transparent overlay rect captures all pointer input and applies a d3.zoom behavior, which clamps the scale between 0.5x and 4x and updates a group element’s transform attribute on every zoom event. The code uses d3.zoom and d3.select to bind the behavior, while the SVG circles remain static and are transformed collectively.

PPhilippe Rivière
71% match
Loading thumbnail…

mouseover-moire

This example demonstrates a mouseover-driven moiré pattern, where moving the cursor over the SVG canvas dynamically rotates and rebuilds two layered line grids. The visualization shows how intersecting line families create shifting interference patterns that respond to pointer position. The code uses D3 v3 to append line elements to two separate groups within an SVG, with the mousemove event triggering a function that regenerates both grids and applies a rotation transform based on cursor coordinates. The line count and spacing are controlled by a linear scale, and the grids are drawn from source data derived from the cursor’s vertical position.

11wheel
71% match