2f:T768,chart = { const width = 928; const height = 600; const marginTop = 10; const marginRight = 20; const marginBottom = 30; const marginLeft = 40; const values = Float64Array.from(aapl, d => d.Close); const x = d3.scaleTime() .domain(d3.extent(aapl, d => d.Date)) .rangeRound([marginLeft, width - marginRight]); const y = d3.scaleLog() .domain(d3.extent(values)) .rangeRound([height - marginBottom - 20, marginTop]); const line = d3.line() .defined((y, i) => !isNaN(aapl[i].Date) && !isNaN(y)) .x((d, i) => x(aapl[i].Date)) .y(y); const svg = d3.create("svg") .attr("width", width) .attr("height", height) .attr("viewBox", [0, 0, width, height]) .attr("style", "max-width: 100%; height: auto;"); svg.append("g") .attr("transform", `translate(0,${height - marginBottom})`) .call(d3.axisBottom(x).ticks(width / 80)) .call(g => g.select(".domain").remove()); svg.append("g") .attr("transform", `translate(${marginLeft},0)`) .call(d3.axisLeft(y).tickValues(d3.ticks(...y.domain(), 10)).tickFormat(d => d)) .call(g => g.select(".domain").remove()) .call(g => g.selectAll(".tick line").clone() .attr("x2", width - marginLeft - marginRight) .attr("stroke-opacity", 0.1)) .call(g => g.select(".tick:last-of-type text").clone() .attr("x", 3) .attr("text-anchor", "start") .attr("font-weight", "bold") .text("↑ Daily close ($)")); svg.append("g") .attr("fill", "none") .attr("stroke-width", 1.5) .attr("stroke-linejoin", "round") .attr("stroke-linecap", "round") .selectAll() .data([values, ...bollinger(values, N, [-K, 0, +K])]) .join("path") .attr("stroke", (d, i) => ["#aaa", "green", "blue", "red"][i]) .attr("d", line); return svg.node(); }30:[] 2d:{"title":"Bollinger bands","cells":[{"id":1,"value":"

Bollinger bands

D3 › Gallery

\n\n# Bollinger bands\n\nThis time series [line chart](/@d3/line-chart/2) includes [Bollinger bands](https://en.wikipedia.org/wiki/Bollinger_Bands): simple, lagging [moving averages](https://en.wikipedia.org/wiki/Moving_average) for characterizing volatility. Data: [Yahoo Finance](https://finance.yahoo.com/lookup)","pinned":false,"hidden":false,"mode":"md"},{"id":174,"value":"viewof N = Inputs.range([2, 100], {value: 20, step: 1, label: \"Periods (N)\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":176,"value":"viewof K = Inputs.range([0, 10], {value: 2, step: 0.1, label: \"Deviations (K)\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":29,"value":"$2f","pinned":true,"hidden":false,"mode":"ojs"},{"id":180,"value":"function bollinger(values, N, K) {\n let i = 0;\n let sum = 0;\n let sum2 = 0;\n const bands = K.map(() => new Float64Array(values.length).fill(NaN));\n for (let n = Math.min(N - 1, values.length); i < n; ++i) {\n const value = values[i];\n sum += value, sum2 += value ** 2;\n }\n for (let n = values.length, m = bands.length; i < n; ++i) {\n const value = values[i];\n sum += value, sum2 += value ** 2;\n const mean = sum / N;\n const deviation = Math.sqrt((sum2 - sum ** 2 / N) / (N - 1));\n for (let j = 0; j < K.length; ++j) {\n bands[j][i] = mean + deviation * K[j];\n }\n const value0 = values[i - N + 1];\n sum -= value0, sum2 -= value0 ** 2;\n }\n return bands;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":332,"value":"With [Observable Plot](https://observablehq.com/plot)’s concise API, you can create a similar chart with the [bollinger](/plot/marks/bollinger) mark.","pinned":false,"hidden":false,"mode":"md"},{"id":344,"value":"Plot.bollingerY(aapl, {x: \"Date\", y: \"Close\"}).plot()","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W30","stdlib":"1","titling":"auto"}