stasiatop@gmail.com

@stanislavatopchii·9 public vizzes

Flower pattern with D3 symbols

This example generates a repeating floral pattern across the browser window using D3.js. It renders nine columns and five rows of blue elliptical petals arranged around yellow circular centers, with each flower composed of ten rotated petals. The visualization uses D3's `select`, `append`, and `selectAll` APIs to build SVG elements, leveraging the `range` function to create the petal indices and applying rotation transforms based on calculated angles. The code demonstrates both commented-out explicit data object usage and active range-based iterator approaches for SVG element generation.

Jan 13, 2026

Loading thumbnail…

Flower animation with D3

A generative flower animation rotates twenty blue ellipses around the center of the screen, with each ellipse’s radius and position smoothly expanding and contracting over time. The animation uses D3 v7’s `select`, `range`, and data joins to update SVG ellipse attributes, while a `setInterval` callback advances a time variable that drives a `Math.tanh`-based bloom cycle. The ellipses are rotated incrementally by equal angles to form a radially symmetric pattern.

Jan 13, 2026

Loading thumbnail…

Flower with D3

A flower-like shape emerges from 20 blue ellipses that are each rotated around the center of the SVG canvas. The D3.js `select` API builds the SVG structure, while the `.data()` and `.join()` methods bind the array of mark objects to the generated ellipse elements. The code sets each ellipse's position, size, and rotation transform, and the result is rendered as static SVG. The rendering uses D3 7.9.0 with an SVG output, though commented-out code suggests an alternative requestAnimationFrame-based animation approach.

Jan 13, 2026

Loading thumbnail…

Leaning D3 Selections

A grid of black circles connected by a single animated path undulates across the screen as a sine wave updates over time. The visualization demonstrates D3 selections and data joins using `d3.select`, `selectAll`, `data`, and `join` to efficiently update SVG elements each frame. The `d3.line` generator computes the path from the circular points, while the animation is driven by a `setInterval` that shifts time and regenerates the dataset.

Jan 13, 2026

Loading thumbnail…

Flower pattern with D3 + symbols

A grid of flowers is rendered across the canvas, each flower built from five rotated blue ellipses arranged in a circular pattern around a central yellow symbol. The example uses D3 7.9.0 with `select`, `range`, `symbol`, and `symbols` APIs, where each flower’s center symbol is drawn via a `path` using the `symbol(symbols[ind], 500)` function, with the ellipse rotation controlled by a custom transform. The pattern is generated through nested loops, creating a repeating 9-by-5 arrangement, all output as SVG elements.

Jan 10, 2026

Loading thumbnail…

Flower pattern with D3 symbols

A D3.js-generated flower pattern is rendered on an SVG canvas, composed of seven rotated instances of a single symbol (symbols[1]) positioned around a central point. Using `d3.select`, `d3.range`, `d3.symbols`, and `d3.symbol`, the code appends a path per group with a blue fill and applies a translation and rotation transform to create a symmetric radial arrangement. The SVG output is sized to the full browser window and rendered directly in the browser.

Jan 10, 2026

Loading thumbnail…

Flower pattern with D3

A grid of blue flower shapes, each composed of rotated ellipses around a yellow center, fills the browser window. The pattern demonstrates generating repeated SVG elements with D3’s `select`, `range`, and data joins. Each flower is drawn by appending a group and binding a range of ten numbers to create ellipses at specified angles, while circles mark the centers. The rendering uses SVG; the code explicitly sets attributes for position, size, rotation, and fill.

Jan 10, 2026

Loading thumbnail…

Flower pattern with D3 no .push()

A flower-like grid pattern renders in SVG across the full browser window, with 45 blue elliptical petals and yellow circular centers arranged in a 9x5 layout. The visualization uses D3 v7’s `select` and `join` methods to bind data arrays of angles and center points, applying `rotate` transforms to position each petal around its flower center. No `.push()` mutation occurs; instead, the code computes angle values on the fly and draws circles from a pre-populated array, creating a repeating geometric pattern.

Jan 10, 2026

Loading thumbnail…

Flower SVG

A flower composed of 36 ellipses appears on screen, each petal rotating around a central point to form a full circular bloom. A linear gradient fills the petals, transitioning from red at one end to blue at the other, with black outlines defining each shape. The animation sequentially adds one petal at a time using `requestAnimationFrame`, rendering SVG elements created via the DOM API with `createElementNS` and applying rotation transforms. The visualization runs in a browser, using purely JavaScript-generated SVG without any external data source.

Dec 29, 2025