Skip to main content
SimilarExport ZIP
100%

Cardioïdes

✓ Published0🌍 Public
KKcnarf
Last edited Feb 7, 2018
Created on Feb 5, 2018

The visualization shows animated cardioïdes formed by connecting 120 numbered pins arranged in circles, with chords drawn between each pin and another pin based on a multiplier. The shape morphs every 3.5 seconds as the radii and width-to-height ratios of the pin arrangements are randomly shuffled. Using D3.js v4, the code computes pin positions with trigonometric functions and renders SVG elements, including light grey pin paths and light green chord lines, with an automatic interval driving the transformations.

AI-generated description

This block is a recreation based on times tables modulo (cf. https://www.youtube.com/watch?v=qhbuKbxJsk8).

Acknowledgments to :

gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

Cardioïdes

This interactive D3.js (v.4) visualization generates cardioid-like curves by connecting points around a circle based on modular multiplication. It maps numbered pins on the perimeter to their products modulo the pin count, drawing hot pink chords between them to gradually reveal intricate patterns and flowers. Users can adjust the pin count and multiplier to see how these parameters morph the resulting geometric shapes. The SVG rendering, controlled by blockbuilder.org, animates the chord-drawing process.

KKcnarf
91% match
Loading thumbnail…

cord-links

Three concentric arcs of labeled rectangles represent events, people, and places, with chord links drawn between them. The visualization shows how a single event connects to the people and places associated with it. Hovering over an event highlights its connections with animated bezier curves, while hovering over a person or place highlights their associated events. The example is rendered as an SVG with D3.js and uses procedural data generation to create the node groups and their links.

11wheel
69% match
Loading thumbnail…

Circle Wave

Three concentric, overlapping circles in cyan, magenta, and yellow continuously deform into a shifting wave pattern on a dark background. A slider labeled “Frequency” adjusts the speed of the oscillation, while the shapes are drawn as closed radial-line paths that update every frame. The code uses D3 v4’s `d3.radialLine`, `d3.curveLinearClosed`, and `d3.timer`, with the stroke colors blended via CSS `mix-blend-mode: darken`. The radius of each point is computed from a cosine function and a time-based term, creating the rhythmic, breathing motion.

AAlainRo
68% match
Loading thumbnail…

animating data modul

Two sets of twenty circles oscillate horizontally in sine waves, with each set connected by a smooth line and accompanied by horizontal and vertical connector lines, creating a dynamic, layered network. Built with D3 v7, the visualization uses `select`, `range`, `line`, and the `.join` method to update SVG circles and paths every frame, animating via two `setInterval` timers that shift the data’s phase and time offset. The rendering uses SVG elements with explicit `cx`, `cy`, and `r` attributes, and the data is generated procedurally in the `makeData` function, which computes x positions from sine functions of an incrementing time variable.

KKerim
68% match
Loading thumbnail…

Animated Arcs

Four concentric animated arcs rotate continuously around a central point, each with a distinct color and its own random start and end angles. The arcs periodically change their sweep length and position, creating a dynamic, looping visual rhythm. Built with D3 v4, the example uses SVG paths and `d3.interval` to trigger transitions, while `transition.attrTween` and `d3.interpolate` smoothly animate each arc’s angles. The code generates random data for four arcs with varying radii and colors, drawing them with the `d3.arc` shape generator.

FFrissAnalytics
68% match
Loading thumbnail…

Untitled

This example shows a chord diagram visualizing flows between four groups, with colored ribbons representing connections and arcs along the outer ring marking each group's total. The code uses d3.chord() to compute group and chord angles from a hardcoded 4×4 matrix, then renders the result as SVG paths. d3.arc() draws the outer segments, while d3.ribbon() generates the linking bands, with fill colors derived from each ribbon's source group. The visualization is built with d3.v4 and embedded in a minimal HTML page.

Mmaviszv
68% match
Loading thumbnail…

Fork of Circular pattern of positioning circles with two distinct categories

This example visualizes a circular arrangement of lines radiating outward from a central point, with two distinct categories represented by different stroke colors. The visualization uses D3 v6 to generate 800 lines positioned randomly within a circular boundary, with each line extending 100 units from its starting point. The code calculates angles and coordinates using trigonometric functions, then renders the result as SVG elements with animation capability through D3 transitions. The rendering approach uses SVG line elements with opacity and stroke-width styling to create the circular pattern.

NNita
68% match
Loading thumbnail…

Fork of Sin circles

Fifteen circles and connected lines oscillate in a sine-wave pattern, with each circle’s vertical position and radius periodically changing. The animation updates every 130 milliseconds, redrawing the SVG elements with new coordinates computed from a phase-shifted sine function. Using D3’s `select`, `range`, and `rgb` APIs, the visualization assigns black strokes to the lines and fixed gray fills to the circles, creating a rhythmic, looping composition. The code dynamically updates both the `x` and `y` attributes of the lines and circles, while the radius of the circles varies between 10 and 30 pixels.

NNjord
68% match