timeline - approximation thanks to FFT/iFFT

100%

timeline - approximation thanks to FFT/iFFT

✓ Published0🌍 Public

Last edited Dec 3, 2018

Created on Feb 6, 2017

The example demonstrates how a timeline signal can be reconstructed from its frequency components using an inverse Fast Fourier Transform (iFFT), with the approximation quality controlled by a threshold slider. Dragging points on the top timeline updates the signal and its forward FFT representation, while adjusting the threshold in the bottom graph filters which components contribute to the rebuilt series. Built with D3.js v4, the visualization uses SVG for interactive rendering, a custom JavaScript FFT algorithm for spectral analysis, and animated transitions to show the relationship between time-domain and frequency-domain views.

AI-generated description

This block is a continuation of a previous one, and an experimentation of how to rebuilt an approximation of a timeline thanks to an inverse Fast Fourier Transform (iFFT) algorithm.

Usages :

in the top graph, Drag & Drop points to update the timeline, or use the shortcuts below the graph; this will update the corresponding FFT components (in the bottom graph)
in the bottom graph, move the treshold up and down; this will rebuild another timeline (in the top graph) based on the retained FFT components

Notes:

I've done other bl.ocks dealing with timeline analyses:

another <a href='http://bl.ocks.org/Kcnarf/5118ba2eb78edfcf645e'>block</a> highlights how important detrending is when trying to detect seasonality
another <a href='http://bl.ocks.org/Kcnarf/8c462789ffbb04351a11'>block</a> experiments seasonality detection
another <a href='http://bl.ocks.org/Kcnarf/89e1e69c888e8241ed92'>block</a> experiments autocorrelation
another <a href='http://bl.ocks.org/Kcnarf/1e6da47724c39156adb3'>block</a> experiments time series correlation
another <a href='http://bl.ocks.org/Kcnarf/0a8fe1caa2ac025c8e86'>block</a> deals with the impact of seasonality when computing the trend of a timeline

Acknowledgments:

mit Licensed

Similar vizzes

Loading thumbnail…

timeline - FFT decomposition

This interactive D3.js v4 visualization demonstrates how a timeline can be decomposed into its constituent frequencies using a Fast Fourier Transform (FFT). Users can drag and drop data points in the top graph to modify the time series, or use shortcuts to adjust seasonality period, seasonal magnitude, and trend. The FFT algorithm, implemented from Rosetta Code's JavaScript version, calculates frequency components displayed as bars in a lower panel. Clicking components applies an inverse FFT to reconstruct a filtered timeline, showing which frequencies contribute to the original signal.

KKcnarf

87% match

Loading thumbnail…

FFT-based transition on timelines

This example demonstrates a three-stage transition between two erratic timelines, using simplified path versions to make the morphing easier to follow. The initial path first simplifies, then morphs into the final path’s simplified form, and finally complexifies into the final shape. Two models compute these simplifications: a Fast Fourier Transform (FFT) and a Moving Average. The code uses D3.js v4 with SVG and animated transitions, applying `d3.line` and `d3.curveBasis` to render the paths, with data from a CSV file.

KKcnarf

72% match

Loading thumbnail…

timeline - trend

The visualization demonstrates how a single outlier or a user-dragged point dramatically alters a least-squares trend line. It shows a scatter plot of a 20-point time series, where each blue dot can be moved with the mouse to immediately recalculate and redraw the steel-blue regression line. A timeline path connects the points, and buttons allow inverting the trend or creating an outlier. Built with D3.v3, it uses `d3.behavior.drag`, `d3.svg.axis`, and `transition` functions to animate updates, with data loaded from a CSV via `d3.csv`.

KKcnarf

69% match

Loading thumbnail…

timelines

This example demonstrates a versatile D3 timeline component built with SVG, offering over a dozen variations including simple timelines, circular markers, stacked layouts, and interactive features like hover, click, and scroll events. The code implements a custom `d3.timeline` function that supports configurable axes, colors, labels, tick rotation, relative timepoints, backgrounds, and navigation controls. It uses D3 v3's time scales and formatting, along with jQuery for event handling, to render timelines with rectangles or circles as visual elements. The component also handles complex layouts with stacked rows, axis positioning, and color mapping from data.

IIan

69% match

Loading thumbnail…

Zoomable Timeline

This zoomable timeline visualizes time-series data across multiple scales, allowing users to explore yearly, weekly, and daily granularities. Built with D3 version 6, it uses axis utilities like `d3.axisTop` and `d3.utcTime` intervals to dynamically adjust tick density based on zoom level. The example provides a reset button and a slider to control the number of years displayed, with the SVG chart updating through a custom timeline function that manages grid lines and formatted labels.

CClaudioTM

69% match

Loading thumbnail…

D3-timeline in D3.js V3 ref from (jiahuang)

This example visualizes a timeline with stacked horizontal bars representing different stages of a process, such as waiting, vital checks, and doctor visits, with each segment color-coded and labeled by duration. The D3.js V3 timeline plugin renders the data as SVG rectangles on a time axis with 15-minute tick intervals and supports interactive navigation through chevron controls. The visualization uses `d3.time.format` for tick labeling and accepts data in a structured format with starting and ending times, demonstrating how to build a customizable, event-based timeline with D3.

Vvillagef

67% match

Loading thumbnail…

timeline - trend & seasonality

An interactive D3.v3 timeline visualizes the impact of seasonality on a global trend. Users can drag individual data points, invert, or permute the seasonality to explore how internal seasonal trends affect the overall slope. The chart displays raw values, deseasonalized season means (large dots), and a least-squares trend line, all within an SVG with animation. Dragging points updates the trend in real time, demonstrating how a windowed-mean approach mitigates seasonal effects.

KKcnarf

67% match

Loading thumbnail…

Fork of D3-timeline in D3.js V3 ref from (jiahuang)

A fork of jiahuang's d3-timeline, this example demonstrates a stacked, interactive timeline built with D3.js v3 and rendered as SVG. The chart visualizes labeled time intervals for patient statuses like "Waiting," "Vital," and "Doctor," with each segment colored and optionally labeled, and an accompanying legend. The code creates the timeline via `d3.timeline()` with stacked item rows, custom tick formatting using `d3.time.format`, and margins. SVG elements are appended manually for the legend, while the timeline itself handles axis and row rendering through its internal API.

JJason

66% match