Sinusoidal interpolation

100%

Sinusoidal interpolation

✓ Published0🌍 Public

Last edited Apr 25, 2017

Created on Apr 24, 2017

This example demonstrates sinusoidal interpolation between tide event data points, contrasting smooth transitions during slack water with curved transitions during flood and ebb phases. A blue line traces the interpolated speed values over time, while circles mark the original observed measurements. The visualization uses a custom interpolation function that applies a sine-based easing to each segment, depending on whether the preceding event is classified as slack or non-slack. Built with D3 v4, it relies on `d3.timeParse`, `d3.scaleLinear`, `d3.line`, and `d3.csvParse` to process inline CSV data and render an SVG path.

AI-generated description

Join points with a sinusoidal interpolator, for Chris Henrick.

Compare with:

<a href='http://bl.ocks.org/Fil/11491717cad91e34c2bf9de00eac8dd9'>Parabolic interpolation</a>
<a href='https://bl.ocks.org/Fil/ca9ac01fed9d158380b043b45ff2cd2c'>Standard d3 curve interpolation</a>
<a href='https://bl.ocks.org/Fil/6e83bb512f22ec579f6226b7692530fb'>Fourier interpolation</a> ** (the best IMHO)

Built with blockbuilder.org

mit Licensed

Similar vizzes

Loading thumbnail…

Line Interpolation

This example demonstrates a custom line interpolation method in D3 v3 that connects data points with elliptical arcs instead of straight line segments. The visualization plots 20 generated data points on a scatterplot with axes, drawing a smooth arc between each consecutive point using SVG path commands. The custom interpolator is implemented by overriding d3.svg.line’s interpolate function to join coordinates with the "A 1,1 0 0 1" arc segment syntax, while the line’s x and y accessors map the data through linear scales. Circles mark each original data point, rendered with SVG.

Mmbostock

70% match

Loading thumbnail…

Monotone Interpolation

This example demonstrates monotone interpolation, a curve-fitting method that produces a smooth line through a series of points without overshooting the local data range. Six yearly data points from 2001 to 2006 are plotted as white circles with steelblue outlines on a chart with time-scaled X and linear Y axes. The code uses D3 v3’s `d3.svg.line` with the `"monotone"` interpolator to generate the SVG path, while `d3.time.scale` and `d3.scale.linear` handle the axes. The chart is rendered as an SVG element with axis and line classes styled via CSS.

Mmbostock

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

68% match

Loading thumbnail…

test

This example demonstrates an interactive line chart of a sine wave, plotting y = sin(x) for x values from 0 to 100. A brushable range slider allows users to zoom into a specific x-domain interval, dynamically updating the x-axis scale and the plotted line to show only the selected portion. The visualization is built with D3.js, using `d3.scaleLinear` for axes, `d3.line` for the path, and the `d3-simple-slider` library's `sliderBottom` component for the range selection. The SVG rendering is generated programmatically from random-like data computed in the code.

11807589994@qq.com

68% match

Loading thumbnail…

Sankey Interpolation

A line chart plots five data points from a CSV file with a custom interpolation method. The `interpolateSankey` function creates a smooth, horizontal-tangent curve between points, mimicking a Sankey diagram's flow aesthetic, while the `d3.svg.line` and `d3.svg.axis` APIs render the SVG path and axes. Data is loaded via `d3.csv` and scaled with `d3.scale.linear`.

Mmbostock

68% match

Loading thumbnail…

D3 Selection Exploration

Animated sine waves rendered as thick black polylines on a full-window SVG. The visualization uses D3 v7's `select`, `range`, and data joins to update 1,000 linked line segments at 6 frames per second, with each point’s y-position oscillating via a sine function of its index and time. The entire scene is redrawn per tick, shifting hues and motion continuously.

MMatthew Bruffey

67% match

Loading thumbnail…

My d3 skill

This example animates a sinusoidal line chart generated from a sequence of one thousand data points, rendering the path with SVG and a smooth transition. The visualization uses d3.line to compute the curve, d3.scaleLinear and d3.axisBottom for the x-axis, and d3.range to create the initial dataset. Though the code includes a commented-out update to different data, only the initial static render is active, leaving the axis without ticks and the line fixed in place.

MMarian Schubert

67% match

Loading thumbnail…

animating data cleaner code

This example uses D3 v7 to create an animated, generative visualization of circles. It displays a dynamic sine-wave pattern where 10 to 15 circles move vertically and change radius over time, rendered as SVG elements on a full-window canvas. The animation runs at a 60 FPS interval, with each frame updating the `cx`, `cy`, and `r` attributes of the circles via `selectAll` and `.join`. The periodic motion is computed using `Math.sin` for both position and size, creating a smooth, evolving sine-wave composition.

KKerim

67% match