Moving Average

100%

Moving Average

✓ Published0🌍 Public

Last edited May 28, 2019

Created on Aug 24, 2017

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.

AI-generated description

A simple Moving Average indicator example.

Built with blockbuilder.org

mit Licensed

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

81% match

Loading thumbnail…

Yahoo Finance Chart Step 4 - Moving Average

This example shows a Yahoo Finance intraday chart for a stock, combining an area series of opening prices with a blue line and a red exponential moving average line, plus gridlines. The chart uses the d3fc library’s `fc.chart.linearTimeSeries`, `fc.series.area`, `fc.series.line`, and `fc.indicator.algorithm.exponentialMovingAverage` components, all rendered as SVG. Data is loaded from a CSV file via `d3.csv` and parsed into date objects. The moving average is computed over a window size of 20 on closing prices, with axes configured to display time and price.

CColinEberhardt

78% match

Loading thumbnail…

Candlestick

This candlestick chart visualizes stock price movements over time, with each candle representing a single trading day’s open, high, low, and close values. The chart uses d3fc’s `seriesSvgCandlestick` to render the candlesticks, and a discontinuous time scale to skip weekends, ensuring a continuous trading week. The x-axis domain is derived from the date extent, while the y-axis domain is calculated from the high and low price values. Data is loaded from a CSV file containing daily Apple stock prices from March to June 2014. The visualization employs the d3fc library's chartCartesian component for layout, with an SVG plot area and a left-oriented y-axis, providing a clean and functional representation of price movements over time.

CColinEberhardt

74% match

Loading thumbnail…

MACD

This example visualizes Apple stock price data using the Moving Average Convergence Divergence (MACD) technical indicator. The chart renders three synchronized components: a bar series showing the MACD divergence, a red signal line, and a blue MACD line, all within a d3fc Cartesian chart that uses a discontinuous time scale to skip weekends. The MACD calculation employs the `fc.indicatorMacd` algorithm with custom fast, slow, and signal periods on closing prices loaded from a local CSV file. The code uses d3fc series components including `seriesSvgBar`, `seriesSvgLine`, and `seriesSvgMulti` to compose the visualization.

CColinEberhardt

72% match

Loading thumbnail…

Bollinger Bands

This example uses d3fc to render a financial time series with Bollinger Bands. The chart combines a candlestick series with a line and an area series, showing the 20-day moving average and the upper/lower volatility bands. The d3 time scale is made discontinuous to skip weekends, and the x/y domains are padded to give the data breathing room. Data is loaded from a CSV, and the Bollinger indicator is computed on the open price.

CColinEberhardt

70% match

Loading thumbnail…

Streaming Financial Chart

This example streams live financial data by updating a candlestick chart every 200 milliseconds using d3fc’s random financial data generator. It renders Bollinger Bands as shaded areas and lines over the candlesticks, with the chart’s x- and y-domains recomputed each frame from the sliding window of 110 data points. The visualization uses d3fc’s `chartSvgCartesian`, `seriesSvgCandlestick`, `seriesSvgMulti`, and the `indicatorBollingerBands` algorithm, while d3 scales and extents handle the dynamic ranges.

CColinEberhardt

70% match

Loading thumbnail…

Yahoo Finance Chart

This example visualizes intraday stock price data from Yahoo Finance using a combination of D3 and d3fc components. The chart displays high, low, open, and close prices, along with trading volume and a moving average, over a discontinuous time scale that skips non-trading hours. A crosshair tooltip shows detailed values for the hovered data point, while callout annotations highlight the most recent high and moving-average values. Trading hours are marked with vertical annotations and shaded bands, and the chart includes a legend summarizing the OHLC and volume data. The visualization uses an SVG renderer and is built with d3.v5, demonstrating how to compose multiple series and annotations using the d3fc library.

CColinEberhardt

69% match

Loading thumbnail…

Custom Chart Layout

This example demonstrates a custom chart layout for displaying an interactive candlestick chart. It uses D3.js and the d3fc library, leveraging custom SVG elements and explicit measure and draw events to construct a responsive plot area with synchronized axes. The code creates a discontinuous time scale to skip weekends and renders a stock price series from a CSV file, allowing the chart to resize dynamically without reliance on the default chart component.

CColinEberhardt

69% match