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.
AI-generated descriptionThis block experiments a way to make transitions between erratic pathes easier to understand/follow. The idea is to use simplified versions of the paths in order to ease the human comprehension of the transition. Simplified versions of paths are computed thanks to some models.
Hence, the transition from an intial path to a final path takes 3 stages:
- simplification: transition from the initial path to its simplified version
- simple morphing: transition from the simplified version of the initial path to a simplified version of the final path; this step eases human comprehension
- complexification: transition from the simplified version of the final path to the final path
This block uses two models to compute the simplified versions of paths:
- a Fast Fourier Transform (FFT) and inverse Fast Fourier Transform (iFFT) algorithms
- a Moving Average algorithm