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.
AI-generated descriptionMultiple moving averages
A quick example to show how multiple moving averages can be applied to a chart. By default, the d3fc algorithms write the results back onto the datapoint within the supplied series data. Therefore, if you apply the the same algorithm, the results will be overwritten.
This behaviour can be changed by supplying merge function that allows you to change where the results are stored:
// compute a 20 point ema
var ema20 = fc.indicator.algorithm.exponentialMovingAverage()
.value(function(d) { return d.close; })
// the merge function describes how the ema is 'stored' in each datapoint
.merge(function(datum, ema) { datum.ema20 = ema; })
.windowSize(20);