Skip to main content
SimilarExport ZIP
100%

Piano spline

✓ Published0🌍 Public
SSoumyaranjan Pal
Last edited Jan 25, 2023
Created on Jan 24, 2023
Forked from HTML Starter

This example visualizes a dataset of 88 (x, y) points—reminiscent of piano keys—by drawing a smooth Catmull-Rom spline through them in SVG. It uses a JavaScript implementation of the spline with adjustable parametrization (uniform, centripetal, or chordal) to compute Bézier control points. The chart displays red input-point paths, blue spline points with interactive hover highlighting, and a side panel listing values for each point, rendered via native DOM and SVG APIs.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Spline Editor

This interactive spline editor lets users add, drag, and delete control points to shape a curve. The visualization redraws the line dynamically using `d3.svg.line` with a selectable interpolation mode from a dropdown menu. Data points are generated programmatically with random coordinates, and rendering uses SVG with elastic transitions for point appearance. The editor relies on D3’s event handling for mouse and keyboard interactions (including DELETE key removal), with point selection highlighted in orange. Animated updates occur through D3 transitions, while the chart area is a large transparent rectangle capturing mouse events.

Mmbostock
72% match
Loading thumbnail…

New Splines!

Eleven points along a two-dimensional curve are rendered as small filled circles on a canvas. Four differently colored splines pass through the same set of points, comparing a cubic interpolation against several Catmull-Rom variants with tension values of 0.0, 0.5, and 1.0. The example uses d3-shape’s line generator with the canvas context, d3-scale’s category10 color scale, and draws axes and points directly through Canvas 2D API calls.

Mmbostock
71% match
Loading thumbnail…

Piano App

This interactive piano app renders a two-octave keyboard as an SVG, where clicking a key triggers a sine-wave tone. The React component manages a set of pressed keys, updating their visual state, while the Web Audio API's `createOscillator`, `createGain`, and `exponentialRampToValueAtTime` methods synthesize a short, fading note. The white and black keys are drawn as SVG rectangles with note labels, and the app uses CSS transitions to show a subtle press effect.

CCurran Kelleher
68% match
Loading thumbnail…

curve again.js Demo

This example shows an interactive SVG visualization of a smooth curve generated from a set of control points, with a dataset of historical figures plotted as points along the curve based on their birth dates. The visualization uses the D3.js v3 library with a custom SDCurve object implementing dynamic Levin-type subdivision for curve refinement. Users can drag control points to reshape the curve in real time, and the data points reposition accordingly, illustrating how the curve acts as a timeline mapping individuals’ birth dates to positions in two-dimensional space. The rendering is done via SVG circles and paths, with data loaded from a TSV file.

Pparniantaghipour
68% match
Loading thumbnail…

Psudo Scatter Plot

This example shows a sparse scatter plot with six circular points arranged diagonally across an SVG canvas. Each circle has a fixed radius and distinct x/y coordinates, creating a pseudo-random distribution that resembles a simple data visualization. The visualization is rendered using plain SVG elements—specifically `<circle>` and `<rect>` tags—within an HTML page. It uses React as the underlying framework, though the code is written as static markup without interactive features or data-binding logic. The white background and cleaned-up body styling highlight the simple, minimal approach to displaying categorical or numeric point data.

Ppanthabuddhi@gmail.com
67% match
Loading thumbnail…

SDCurve.js Demo

This demo shows an interactive SDCurve.js curve editor where users can manipulate a spline defined by four control points. The SVG rendering displays a white curve over a dark background, with the curve dynamically subdivided and smoothed using the dyn-levin algorithm. The code loads biographical data from a TSV file containing 19th-century women writers, though the data-loading routine appears incomplete. Built with React and D3 v3, the visualization supports mouse interaction, including dragging control points and adjusting curve resolution and degree parameters.

Pparniantaghipour
67% match
Loading thumbnail…

Fork of Svelte + D3: Reveal area chart

This example presents a colorful line and area chart that visualizes sequential numeric data across 63 points, with the area beneath the curve filled in pink. The visualization reveals itself through a sliding animation: a dark rectangle moves from left to right across the chart, initially allowing viewers to see only the line, then progressively uncovering the filled area beneath. The implementation uses Svelte for reactive bindings and D3 v7 APIs including `scaleLinear`, `extent`, `line`, `area`, and `curveCatmullRom` for smooth path generation. The SVG rect animation is driven by a CSS keyframe that translates its position across the viewport.

NNita
66% match
Loading thumbnail…

Fork of Polished Scatter Plot with Menus

This interactive scatter plot visualizes the Spotify song dataset, allowing users to explore relationships between musical attributes such as valence, popularity, and danceability. Users select attributes for the X and Y axes via dropdown menus and filter data points using range sliders. The visualization updates dynamically, with points colored by musical key and a color legend that highlights specific keys on hover. Built with React and D3 v5, it uses SVG rendering with custom axes, scales, and a color legend.

Ppete0707
66% match