Skip to main content
SimilarExport ZIP
100%

Moving average & st.dev. with outliers

✓ Published0🌍 Public
PPatrick Wojda
Last edited Jan 17, 2020
Created on Oct 15, 2018

A D3.js visualization plots 100 random integers as points, with a steel-blue moving average line computed over a 10-point window via the custom `sma` function. Red points mark outliers where the distance from the moving average exceeds the rolling standard deviation, calculated by the `standardDeviation` function. The chart also renders a semi-transparent standard-deviation band around the average using D3's area and line generators. The raw data array appears as small monospace text at the top, while the SVG output is generated with d3.scaleLinear, d3.randomIrwinHall, and d3.curveCatmullRomOpen.

AI-generated description

Built with blockbuilder.org

Similar vizzes

Loading thumbnail…

d3fc - example with multiple moving averages

This visualization shows a time series of Yahoo stock price data (open and close values) with two exponential moving averages overlaid as colored lines: a 20-point average in red and a 40-point average in green. Built with the d3fc library, the example demonstrates how the `exponentialMovingAverage` algorithm can use a custom `merge` function to store results at distinct properties on each data point, preventing overwrites when applying multiple averages. The chart, rendered as SVG, combines an area series for the price range with two line series to illustrate the smoothing effect.

CColinEberhardt
71% match
Loading thumbnail…

Moving Average

This example shows a candlestick chart of stock price data with a moving average line overlaid. The chart uses d3fc components, including `fc.seriesSvgCandlestick` and `fc.seriesSvgLine`, combined via `fc.seriesSvgMulti` into a single plot area. A discontinuous time scale removes weekends from the x-axis, and the moving average is computed with `fc.indicatorMovingAverage`. Data is loaded from a CSV file and rendered using a Cartesian chart with padding applied to both scales.

CColinEberhardt
68% match
Loading thumbnail…

Gist bb8fddc4a5fc3cc60c99

A line chart maps a small array of ten numbers to an SVG path, showing how the values fluctuate across a linear sequence. The visualization uses a red, unbroken polyline to emphasize the shape of the data, with the y-axis scaled from the data’s minimum to maximum and the x-axis evenly spaced by index. The code creates the chart using d3.scale.linear for both axes and d3.svg.line to generate the path, which is appended to an SVG container via d3.select and datum. The fixed width and height of 500 pixels define the plotting area, while the stroke and fill styles come from a CSS class.

CCaged
68% match
Loading thumbnail…

simple line chart

This example shows a simple line chart that visualizes a randomly generated dataset of thirty points, with each point’s y-value incrementing by a random offset from the previous point. The chart displays the overall trend of the series, with a final value label and x-axis tick labels for each data index. The code uses D3 v3 to append an SVG, create linear scales for the x and y axes, and draw the line via `d3.svg.line()`. The data is generated inline using JavaScript’s `Math.random()` within a `d3.range()` map, and the chart is rendered as an SVG path with a black stroke.

BBrunoDumas
67% match
Loading thumbnail…

Large number of points

A scatterplot displays 50,000 generated points, with color and radius encoding each point’s position in the lower, core, or upper quartile range. Built with D3 v4, the visualization uses SVG circles and an animated transition to update the points when the user edits the quantile, color, or radius values. The x-axis maps the point index, while the y-axis shows the generated normal distribution values, with scales recalculated via the `d3.scaleLinear` and `d3.quantile` APIs.

CCJKraenzle
67% match
Loading thumbnail…

D3: Transitioning points to randomized values

A scatterplot displays 50 randomly generated points, each shifting to new random coordinates when the user clicks on the text. The visualization updates the positions of existing circles without adding or removing elements, using a smooth 1000-millisecond transition. The code builds the chart with d3.scaleLinear for the x and y axes, d3.axisBottom and d3.axisLeft for the ticks, and binds the data to SVG circle elements. The click handler regenerates the dataset, rescales the domains, and calls transition().attr() on the selected circles to animate the movement.

深深度碎片
67% match
Loading thumbnail…

Outlier scatter matrix 03

This example displays an outlier scatter matrix of cardio data, highlighting relationships among numeric attributes with a dense grid of small multiples. A draggable viewport lets users pan across the rendered scatterplot, shifting an oversized SVG map containing a red circle to explore off-screen portions. The visualization is built with the Vega-Lite API and D3, using d3.csv to load the dataset. The viewport interaction is implemented by manually tracking mouse events with onmousedown, onmousemove, and onmouseup, adjusting the map’s absolute position within a clipped container.

OOleJRask
67% match
Loading thumbnail…

Gist fe5834a6c79855e23c3c7e3ae7e7f048

This example visualizes the distribution of a dataset through an interactive scatterplot, encoding three variables on the x- and y-axes and point size. The visualization uses D3.js with `d3.forceSimulation` to arrange overlapping points into a readable layout, while `d3.scaleLinear` and `d3.axisBottom` handle axis generation. Rendering is done via SVG circles, and transitions are applied using `transition.attrTween` to smoothly update positions when data changes. The underlying data originates from a static JSON array embedded in the gist, with no external data source, and the code includes hover tooltips via `d3.select().on("mouseover")` for individual point inspection.

AAlexDaGr8
67% match