Arc Piano

100%

✓ Published0🌍 Public

Last edited Feb 8, 2017

Created on Dec 3, 2014

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.

AI-generated description

gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

Circle Piano

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.

Mmbostock

85% match

Loading thumbnail…

Arc Corners II

Animated pie charts cycle through a transition where each slice’s corner radius and inner radius morph between sharp and rounded, and the gaps between slices alternately collapse and expand. The visualization uses the Fibonacci sequence as its data. Built with d3.v3, it relies on the `d3.layout.pie` and `d3.svg.arc` APIs, rendered as SVG paths, with a cubic-in-out easing function driving the 2.5-second animation loop.

Mmbostock

74% match

Loading thumbnail…

Extending Arcs

Hovering over a slice of this pie chart causes it to extend outward and darken, emphasizing that segment while the padding between arcs stays constant. The chart uses D3.js v3 with a `pie` layout and an `arc` shape with a fixed `padRadius`. Data is an inline array of Fibonacci numbers. Mouseover and mouseout events trigger `transition.attrTween` to smoothly interpolate each arc's `outerRadius`, with a delay on mouseout, while SVG paths handle the rendering.

Mmbostock

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

72% match

Loading thumbnail…

Pie Chart II

A pie chart animates its slices outward on hover. The example uses D3 v3 with SVG and animation. Each slice’s path is drawn with `d3.svg.arc`, and hovering triggers a transition via `transition.attrTween`, interpolating the slice’s `outerRadius` to expand it. The dataset is a simple array of five values, with percentages displayed as rotated text labels. The code is adapted from Mike Bostock’s “Extending Arcs” block and was built with Blockbuilder.

11Cr18Ni9

71% match

Loading thumbnail…

Rounded Arc Test

Animated test of rounded and padded arcs rendered to Canvas with d3-shape. The Fibonacci sequence data is visualized as a pie chart, with arcs transitioning between square and fully rounded corners. Using d3-shape’s `arc` and `pie` APIs, the animation cycles every 2.5 seconds, adjusting `cornerRadius` via d3-ease’s `cubicInOut`. Stroke styles and a gray outline highlight the changing geometry.

Mmbostock

71% match

Loading thumbnail…

arc tween example

An animated arc chart demonstrates pie-segment transitions using D3 v4’s `transition.attrTween`. A white foreground arc rotates to a new random angle every few seconds, while a segmented, multicolored ring around it sequentially fills or empties its sections. The code defines arc generators via `d3.arc`, binds data from a fixed array, and computes path interpolations between angles using `d3.interpolate`. SVG elements render the background ring and active arcs, with transitions triggered by `d3.interval`.

FFrissAnalytics

70% match

Loading thumbnail…

Amazing pie

An animated donut chart displays eight arcs sized by the Fibonacci sequence, with proportional segments revealed through a sweeping transition. The visualization uses D3 v4’s `d3.pie` layout with padding, `d3.arc` for outer, inner, and corner radii, and a custom `arcTween` function via `transition.attrTween` to interpolate each arc’s start and end angles. A categorical color scale from `d3.scaleOrdinal(d3.schemeCategory10)` fills the segments, rendered as SVG paths within a centered group.

DDDDDDanica

70% match