timeline - FFT decomposition

100%

timeline - FFT decomposition

✓ Published0🌍 Public

Last edited Dec 3, 2018

Created on Feb 3, 2017

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.

AI-generated description

<a href='http://bl.ocks.org/Kcnarf/7ed4e839914c974a316db885ede71516'>This block</a> is an experimentation of how to decompose a timeline thanks to an Fast Fourier Transform (FFT) algorithm.

Usages :

in the top graph, Drag & Drop points to update the timeline, or use the shortcuts below the graph

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 - approximation thanks to FFT/iFFT

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.

KKcnarf

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

74% match

Loading thumbnail…

timeline - seasonality detection (II)

This interactive D3.v3 visualization demonstrates how to detect seasonality in a time series using a correlogram, showing both the timeline and its autocorrelation coefficients. Users can drag data points to modify the timeline, adjust season length, seasonality magnitude, and trend via controls. The left panel displays the timeline with draggable dots, while the right panel shows correlation bars for lags 1-10. The example reads from a CSV file and uses d3.behavior.drag and d3.svg.axis to enable manipulation and rendering.

KKcnarf

72% match

Loading thumbnail…

timeline - seasonality detection (III)

This interactive D3 v3 visualization demonstrates why detrending a time series before computing a correlogram is essential for detecting seasonality. It shows a synthetic timeline with adjustable season length, seasonality magnitude, and overall trend, alongside a correlation bar chart for each lag. Users can toggle detrending; with the raw series, strong trends mask seasonal patterns, while detrended data reveals even small seasonal cycles clearly. The code uses D3’s linear scales, SVG rendering, drag behavior, and transition animations, with data generated inline and links to adjust parameters.

KKcnarf

71% match

Loading thumbnail…

timeline - seasonality detection (I)

This interactive visualization tests a time series for seasonality by comparing it against a shifted version of itself. The left panel displays the original series and its lagged copy as draggable points, while the right panel plots the correlation coefficient for different shift amounts. Users can adjust the suspected season length and the magnitude of the seasonal component. The D3 v3 code computes autocorrelation values, visually linking the lagged timeline, the correlation plot, and a bar chart. Data comes from a CSV file and is rendered as SVG with animated transitions.

KKcnarf

71% 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…

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…

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

68% match