2b:null 2c:["$","title",null,{"children":"Bollinger bands | Hanna's Workspace | Observable"}] 31: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(); }32:[] 2f:{"id":"d5dadecbef3c81e2","slug":null,"title":"Bollinger bands","thumbnail":"dd5f43ada6582196595b0b6d973b89ee0df137d2e65199651d7f8f9c787fdf06","access_level":"public","create_time":"$D2023-10-31T19:46:03.310Z","update_time":"$D2023-10-31T19:46:03.310Z","view_time":null,"first_public_time":"$D2023-10-31T19:46:03.310Z","fork":{"id":"4cf2a6f4ca5000b8","slug":"bollinger-bands/2","title":"Bollinger bands","owner":{"id":"863951e3ebe4c0ae","login":"d3","name":"D3"}},"stars":0,"starred":false,"owner":{"type":"team","id":"ec81157295a2576a","login":"hanna3-ws","name":"Hanna's Workspace","avatar_url":"https://avatars-next.observableusercontent.com/01fa48f49972021294d7681f5c8c5faae75bc069336ef07ae3c010e6bf8c38ef","tier":"starter_2024"},"version":347,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"b6db7a95ea926251","login":"hanna3","name":"Hanna","avatar_url":"https://avatars-next.observableusercontent.com/805601731643bdffdf0d4d5d88916189c3c4dc915b0036702733613e93adbaa6","tier":null}],"members":[{"type":"individual","id":"b6db7a95ea926251","login":"hanna3","name":"Hanna","avatar_url":"https://avatars-next.observableusercontent.com/805601731643bdffdf0d4d5d88916189c3c4dc915b0036702733613e93adbaa6","tier":null,"role":"editor"},{"type":"team","id":"ec81157295a2576a","login":"hanna3-ws","name":"Hanna's Workspace","avatar_url":"https://avatars-next.observableusercontent.com/01fa48f49972021294d7681f5c8c5faae75bc069336ef07ae3c010e6bf8c38ef","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"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","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":174,"value":"viewof N = Inputs.range([2, 100], {value: 20, step: 1, label: \"Periods (N)\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":176,"value":"viewof K = Inputs.range([0, 10], {value: 2, step: 0.1, label: \"Deviations (K)\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":29,"value":"$31","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":344,"value":"Plot.bollingerY(aapl, {x: \"Date\", y: \"Close\"}).plot()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W32","stdlib":"1","titling":"auto"}} 30:"$2f:body"