Skip to main content
SimilarExport ZIP
100%

Cardioïdes

✓ Published0🌍 Public
KKcnarf
Last edited Feb 14, 2020
Created on Feb 14, 2018

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.

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

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.

KKcnarf
91% match
Loading thumbnail…

Circular Geometric Patterns

This interactive visualization cycles through circular geometric patterns, drawing a series of overlapping circles and a connecting polyline at the center of an SVG canvas. The pattern evolves automatically as a timer increments both the number of nodes and a "skip factor" that determines the angular spacing between points. Built with React and D3 v5, it uses `d3.range`, `d3.line`, and `d3.curveLinearClosed` to generate points along a circle and construct the path, while React's `useState` and `useEffect` drive the animation loop.

CCurran Kelleher
71% match
Loading thumbnail…

circular-synth

This interactive visualization builds a circular synthesizer where each of the 16 beats is a rotating segment containing concentric pitch arcs. Users click or hover over arcs to toggle notes on and off, with four states cycling through white, blue, red, and green. The visualization uses D3’s `d3.svg.arc` and linear scales to map pitch frequencies to radii, while an audio context schedules oscillators for each active note. A `setInterval` loop advances the beat, highlighting the current segment in purple and triggering sounds through the Web Audio API’s `createOscillator` and `createGainNode`.

11wheel
71% 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
70% match
Loading thumbnail…

Voronoï playground : parquet deformation

This interactive Voronoi playground simulates parquet deformation, progressively morphing a quasi-rectangular shape at the bottom into a heart-shaped form at the top. Built with D3.js v4, it uses a Voronoi layout with seeds arranged on three concentric rings, where only the middle ring’s cells are visible. As the user moves the mouse over the canvas, the ring distance adjusts, transforming the Voronoi cells; clicking toggles the display of the grey seed points. The SVG rendering includes a transparent hover-area circle that captures mouse events, and the cellular structure is updated via `d3.interval` and a custom `d3.voronoi` helper.

KKcnarf
70% match
Loading thumbnail…

D3 Curve Explorer

This interactive example shows how different D3 curve types interpolate the same set of draggable points, with buttons to toggle curve families and variants like `curveLinear`, `curveBasis`, `curveBundle`, and `curveCardinal` at various parameters. A sidebar displays a description of the active curve. Users can drag points, add new points via the plus icon, and remove them with the minus icon, all rendered as SVG elements. The code uses D3 v4’s shape API to generate the path data and event handlers for mouse interaction.

Vvivianaaai@qq.com
70% match
Loading thumbnail…

D3 - Chord Diagram

This chord diagram uses d3.chord and d3.ribbon to visualize a 3x3 matrix of numeric relationships as interconnected arcs. The chord generator sorts subgroups in ascending order and applies a 0.04 radian pad angle, while the ribbon generator sets a fixed radius of 200. Data is embedded directly in the JavaScript as a three-row array. The resulting SVG paths are rendered with d3.select and the join operation, which binds the chord data to path elements and assigns the ribbon path data. The styling in styles.css fills the paths with a light gray and adds a subtle stroke and opacity, creating a clean, static representation of the matrix.

SSubhendu Karmakar
70% 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