Untitled

100%

✓ Published0🌍 Public

Last edited Oct 13, 2019

Created on Oct 13, 2019

This interactive visualization demonstrates how different easing functions shape periodic waveforms and their interference patterns. It renders two wave paths from audio buffers generated with selectable easing curves, plus a combined average wave, using SVG paths and a circular position marker. Users can choose easing functions for each wave, adjust playback speed, and trigger audio playback. Built with React, it uses d3.v4’s scaleLinear, line, curveMonotoneX, and timer APIs, while audio synthesis relies on the Web Audio API’s AudioContext, Buffer, and BufferSource for looping sound.

AI-generated description

A bare minimum HTML page.

Similar vizzes

Loading thumbnail…

Untitled

An interactive sound visualization displays a scatterplot of audio samples, each represented by a draggable circle colored by sound category (Clap, Whoosh, Punch, etc.) using d3.scaleLinear and d3.schemeCategory10. Clicking a circle plays the corresponding audio file via the Web Audio API and WebAudiox library, while a color legend filters highlights by category. Hovering shows tooltips, and the view supports zooming and panning through d3.zoom. The project uses D3 v3 with SVG rendering and imports from d3 modules for scales, axes, drag behavior, and data binding.

Oocean1225

74% match

Loading thumbnail…

Fork of Bouncy Wave

This interactive visualization renders a sine wave as a sequence of thick-stroked, white-filled circles connected by a black path, all drawn as SVG. The animation updates at 60 frames per second, with the number of circles oscillating between 5 and 15 and each circle’s vertical position, radius, and the connecting line’s shape shifting based on a time parameter. The code uses the d3 `select`, `range`, and `line` APIs to generate data and append SVG elements, with the `selection.join` method synchronizing the changing dataset to the rendered shapes.

AAndrea Mignone

73% match

Loading thumbnail…

Ease

Ten colored circles bounce horizontally across an SVG canvas, each demonstrating a different D3 easing function: elastic, bounce, linear, sine, quadratic, cubic, poly, circle, exponential, and back. The animation repeats continuously, with each circle labeled by its easing type. The visualization uses D3 v6 transitions with the `.ease()` method and `d3.ease*` functions, rendered in an HTML page with JavaScript.

Vvivianaaai@qq.com

72% match

Loading thumbnail…

Untitled

Two circles move left to right across an SVG canvas, tracing a sine wave vertically as they travel. A black line connects their current positions, forming a dynamic segment that shifts with each animation frame. The visualization uses D3’s `select`, `range`, and `join` methods to update circle attributes, while `setInterval` drives the animation loop and a custom `drawLine` function appends and removes the connecting line. Randomly generated array manipulation is also present but unused in the final rendering.

Ssubratanp

72% match

Loading thumbnail…

Fork of Bouncy Wave

This example shows a dynamically animated wave of circles that continuously shift position, size, and color as time progresses. The animation updates at 60 frames per second using `setInterval`, with each frame generating a new dataset via the `makeData` function that calculates x, y, and radius based on sine waves. The visualization uses D3’s `selectAll` and `join` pattern to bind data to SVG `circle` elements, and also draws a line path connecting the points using `d3.line`. The entire scene is rendered in a full-window SVG element, with React dependencies available but not actively used in the current visualization logic.

CCurran Kelleher

72% match

Loading thumbnail…

Fork of Bouncy Wave

A smoothly animated sine wave bounces across the full screen, drawn as a single curved line whose height oscillates continuously. The wave is generated from 100 data points calculated per frame, with each point’s y-coordinate and circle radius varying by a time increment. Using D3’s `line` generator with `curveNatural` interpolation, the SVG path is updated every 16 milliseconds via `setInterval`. The visualization relies on D3 selections and the `visData` module, though React is included as a dependency but not actively used.

LLewis Ward

71% match

Loading thumbnail…

Sine Wave

This visualization displays a sine wave rendered as an SVG path. The wave is generated using D3.js version 5, with the `d3.line` generator and `d3.scaleLinear` for mapping data points to screen coordinates. The animation updates the wave’s phase over time using `d3.interval`. The example demonstrates how to build interactive, time-based data visualizations with D3’s core modules, including axis creation via `d3.axisBottom` and `d3.axisLeft` for reference lines.

AAndy Zhang

71% match

Loading thumbnail…

Easing

This interactive chart visualizes the easing functions from the d3-ease library, plotting normalized time *t* on the *x*-axis against the eased time *ease(t)* on the *y*-axis. A dropdown menu lets the viewer select among 28 easing functions, and animated dots trace the progress of a 3-second cycle along the selected curve. The SVG visualization uses `d3.scaleLinear`, `d3.line`, `d3.axisBottom`, and `d3.axisLeft` for the plot, while a `d3.timer` drives the animation. The chart is built with D3 v4 alpha and rendered as SVG.

Mmbostock

71% match