timeline

100%

timeline - trend & seasonality

✓ Published0🌍 Public

Last edited Dec 3, 2018

Created on Jan 12, 2016

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.

AI-generated description

An example of how seasonality impacts the trend.

Seasonality means that the time serie has a periodic component, repeating the same pattern on each period. For example, sales of a store may have a week-based seasonality: sales increase on saturday, while there is no sale at all on sunday.

In this example, the season has a length of 4: the first value is high, and the last one is low. Hence, each season has an internal negative trend, which lowers the global trend. A positive internal trend would increase the global trend.

The impact of the season's internal trend on the global trend is higher when :

the order of magnitude of the seasonilaty is high (ie. lowest and highest values are far from season's mean)
the season's length and the time serie's length are of the same order

In this example, we mitigate seasonality with a windowed approach: for each season, we retain the mean of the season (big dots). This produces a deseasonalized time serie. The deseasonalized global trend (light blue line) is then computed based on this deseasonalized time serie.

Seasonality can be mitigated by various approaches, such as simple linear regression, windowed mean (used in this example), moving mean, smoothing, ...

Usages :

Drag & Drop each point to see the impact on the trend line
inverse seasonality (in each season, the higher value becomes the lower, and vice versa) to inverse the season's internal trend, and hence inverse the impact on the global trend
permute seasonality (in each season, the n-th value becomes the (n-1)-th value and the first one becomes the last one) to lower/increase the season's internal trend (because extremum values are no longer at the begining and end of each season), and hence lower/increase the impact on the global trend

Notes:

trend line computed using least square method

Acknowledgments:

done with D3 v3.5.5
<a href='http://blockbuilder.org'>blockbuilder.org</a>

mit Licensed

Similar vizzes

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

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

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

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

81% match

Loading thumbnail…

timeline - comparing trends

This example shows how to compare trends between two time series by presenting raw and relative (mean-reduced) data side-by-side. The left graph displays raw values, while the right graph shows each value divided by its series mean, allowing users to assess whether absolute or proportional changes are more meaningful. Drag-and-drop interactions enable manipulation of individual data points or entire timelines, with the linked reduced trends updating in real-time. Built with D3 v3.5.5, the visualization uses SVG for rendering, d3.behavior.drag for interactions, and a least-squares regression line computed for each trend.

KKcnarf

77% match

Loading thumbnail…

timeline - trend, confidence interval, outliers

This interactive example demonstrates how a trend line and its 95% confidence interval respond to changes in time-series data. Users can drag individual data points to see their immediate impact on both the trend and the confidence interval, or drag the entire timeline to show that time-axis shifts have no effect. The visualization also provides controls to increase or decrease data dispersion, which alters the confidence interval but not the trend, and to force an outlier. The trend is computed using the least squares method, with the confidence interval based on ±1.96 standard deviations. Built with D3 v3.5.5, the SVG rendering uses `d3.behavior.drag` for interactions and transitions for smooth animations.

KKcnarf

77% match

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

74% match

Loading thumbnail…

This timeline displays yearly data from 2008 to 2020, showing the number of lines and the ratio of non-NA values as colored bars. The visualization uses a linear scale for both axes, with bars colored from red to green based on the ratio, and includes an interactive tooltip that reveals exact values on hover. Rendered as an SVG animation, the example loads D3 via UNPKG and imports functions like `scaleLinear`, `axisBottom`, and `axisLeft` from the D3 module, with data provided inline as an array of objects.

MMauradion

74% match