Circle Piano

100%

✓ Published0🌍 Public

Last edited Feb 8, 2017

Created on Feb 8, 2017

A circular piano keyboard displays seven musical notes repeated across a ring, with black keys for sharps and white keys for naturals. Hovering or touching a key expands its arc outward while simultaneously playing a square-wave tone via the Web Audio API. Built with D3 v4, the visualization uses `d3.pie` and `d3.arc` for geometry, `transition.attrTween` for smooth animation, and SVG for rendering.

AI-generated description

Gaga, ga gaga.

gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

Arc Piano

The visualization displays a semicircular piano keyboard whose keys extend outward when hovered or touched. It uses a D3 pie layout for the key positions, with custom arc tweening via `transition.attrTween` to animate the radial expansion. The code generates audio tones using the Web Audio API's `createOscillator` and `createGain` nodes, playing a square wave at a computed frequency for each key. The SVG rendering uses D3's `d3.arc` with corner radii and two inner-radius levels to distinguish sharp and white keys.

Mmbostock

85% 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

77% match

Loading thumbnail…

Circles

Twenty colored circles of varying sizes move through a rectangular chart, bouncing off the edges and reacting to user clicks. The example demonstrates a reusable chartlet built with D3 v4 and the d3Kit library, using `d3.scaleLinear` for positioning and radius, plus `d3.scaleOrdinal` for color. Circles animate via D3 transitions and toggle to black when clicked.

663anp3ca

71% 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

70% match

Loading thumbnail…

D3 Selection animation exercise

Fifteen circles oscillate in a sine wave pattern across the screen, with each circle’s radius enlarging as it descends and shrinks as it rises. The animation runs on a 60fps interval, updating positions based on time and index. Built with D3 v7, it uses `select`, `range`, and `join` to bind freshly generated data to SVG circle elements each frame.

Ppkdvalis

70% match

Loading thumbnail…

Sine Wave Circles Playground

A grid of 300 white circles forms a static horizontal row that animates vertically as a sine wave, creating a fluid, undulating pattern across a black background. The animation uses D3 v7's `d3.timer` to continuously update each circle's `cy` attribute based on the sine of its index and elapsed time. Written in ES6 and ported from an older bl.ocks.org example, this SVG-based playground demonstrates how math functions can drive simple shapes into organic motion.

AAndre J Denais

70% match

Loading thumbnail…

Circles with D3

Seven circles of varying sizes and colors float on a muted pink background. The visualization demonstrates static circle generation using D3 v7, with each circle’s position, radius, and fill color defined in a hardcoded array. The code uses `select`, `join`, and attribute setters like `.attr('cx')` and `.attr('r')` to render the shapes. A fixed opacity of 0.63 is applied uniformly, and the SVG resizes to its container dimensions.

Iissam.benabid@gmail.com

70% match

Loading thumbnail…

D3-Arrays

Fifteen black circles undulate in a vertical sine-wave pattern across a full-screen SVG. Each circle updates its vertical position based on a time-incremented angular offset, creating a smooth, animated wave. The example uses D3 v7's `select`, `range`, and `symbol` APIs, with a JavaScript `setInterval` driving the animation loop. Data is generated on the fly as an array of position objects, bound to circle elements via D3's data join, while SVG attributes are updated each tick.

Gg1g10

69% match