timeline

100%

timeline - trend, confidence interval, outliers

✓ Published0🌍 Public

Last edited Dec 3, 2018

Created on Jan 11, 2016

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.

AI-generated description

An example of how to draw a trend line with it's 95%-CI (Confidence Interval of 95%).

Usages :

Drag & Drop each point to see the impact on the trend line and 95%-CI
Drag & Drop the timeline to see that this has no impact nor on the trend, nor on the 95%-CI
increase or decrease the dispersion of the time serie to see that this impacts the 95%-CI, but not the trend
points outside a confidence interval may be considered outliers; they are important points, and finding the root/business cause of such points may be crucial (even if they may be the consequence of evidence (eg. increase of sell due to a discount)).

Notes:

trend line computed using least square method
95%-CI computed using +/- 1,96*standard deviation; other intervals (e.g. 99%-CI) can be used

Acknowledgments:

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

mit Licensed

Similar vizzes

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

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

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

74% match

Loading thumbnail…

line with confidence interval

This example shows a line chart with a confidence interval. The visualization loads CSV data from a gist URL using `d3.csv`. The data is parsed and the code retrieves basic information about the dataset, including the number of rows and columns, which is logged to the console and displayed in a message container. The code uses the D3 v7 library, loaded from an external CDN, within a React framework setup.

AAliciaNiu

71% match

Loading thumbnail…

timeline - correlation

This example demonstrates how to assess the correlation between two time series. It shows a line chart for each series and a scatter plot of one series against the other, where the alignment of points indicates the strength of correlation. A dynamic coefficient of correlation is displayed, computed using the least squares method. Users can interactively drag data points, adjust trends, and modify dispersion to see their impact, with d3.svg transitions animating the changes.

KKcnarf

69% match

Loading thumbnail…

This example displays a scatterplot of 50 randomly generated data points, with circles positioned on an SVG canvas using x and y scales. The visualization includes formatted percentage axes on both the bottom and left sides, while circle radius encodes the y-value through a separate linear scale. The code uses d3.scale.linear for coordinate mapping, d3.svg.axis for axis generation with tick formatting via d3.format, and d3.select to append SVG elements, demonstrating a simple D3 v7 workflow with a dynamically created dataset.

MManjunath

68% match

Loading thumbnail…

pr

This visualization displays a small time series of daily trend and forecast values (yhat) with a shaded confidence interval, drawn as an area between the upper and lower bounds. The chart uses D3 v3’s time scale for the x-axis, linear scale for the y-axis, and SVG paths to render the area and a red line for the upper prediction values. The data, containing six date-stamped records, is parsed with Moment.js and plotted against axes generated by d3.svg.axis, while the area and line paths are constructed via d3.svg.area and d3.svg.line.

IIncoCode

68% match

Loading thumbnail…

Timeline

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

68% match