30:T6ae,chart = { // Specify the chart’s dimensions. const width = 928; const height = 500; const marginTop = 20; const marginRight = 12; const marginBottom = 30; const marginLeft = 30; // Create the temporal scale. const x = d3.scaleTime() .domain(d3.extent(dates)) .range([marginLeft, width - marginRight]); // Count the events by day. const bins = d3.bin() .domain(x.domain()) .thresholds(x.ticks(d3.timeDay)) (dates); // Apply the moving-average transform. const values = movingAverage(bins.map(d => d.length), N); // Create the vertical scale. const y = d3.scaleLinear() .domain([0, d3.max(values)]).nice() .rangeRound([height - marginBottom, marginTop]); // Create the container SVG. const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]) .attr("width", width) .attr("height", height) .attr("style", "max-width: 100%; height: auto;"); // Append the axes. svg.append("g") .attr("transform", `translate(0,${height - marginBottom})`) .call(d3.axisBottom(x).tickSizeOuter(0)); svg.append("g") .attr("transform", `translate(${marginLeft},0)`) .call(d3.axisLeft(y)) .call(g => g.select(".domain").remove()) .call(g => g.selectAll(".tick line").clone() .attr("x2", width) .attr("stroke-opacity", 0.1)); // Append the area. Ignore invalid values due to an incomplete window // at the start of the time period. const area = d3.area() .defined(d => !isNaN(d)) .x((d, i) => x(bins[i].x0)) .y0(y(0)) .y1(y); svg.append("path") .attr("fill", "steelblue") .attr("d", area(values)); return svg.node(); }31:[{"id":"8271ea93a0683bf205b173733f35ecd232a405e45dbd70fa5b4ef239ec7855d0b3596c721a0d84e68e8aab1a9a45b76d78eb37dd198e98e668588d5a527e592d","href":"https://static.observableusercontent.com/files/8271ea93a0683bf205b173733f35ecd232a405e45dbd70fa5b4ef239ec7855d0b3596c721a0d84e68e8aab1a9a45b76d78eb37dd198e98e668588d5a527e592d","name":"chicago-homicide-dates.csv","type":"application/octet-stream","lastModified":1572391743596.003,"size":225864}] 2e:{"title":"Moving average","cells":[{"id":0,"value":"

Moving average

D3 › Gallery

\n\n# Moving average\n\n${N}-day moving average of homicides per day. Data: [City of Chicago](https://data.cityofchicago.org/Public-Safety/Crimes-2001-to-present/ijzp-q8t2)","pinned":false,"hidden":false,"mode":"md"},{"id":122,"value":"viewof N = Inputs.range([1, 365], {step: 1, label: \"Days (N)\", value: 100})","pinned":false,"hidden":false,"mode":"ojs"},{"id":15,"value":"$30","pinned":true,"hidden":false,"mode":"ojs"},{"id":73,"value":"function movingAverage(values, N) {\n let i = 0;\n let sum = 0;\n const means = new Float64Array(values.length).fill(NaN);\n for (let n = Math.min(N - 1, values.length); i < n; ++i) {\n sum += values[i];\n }\n for (let n = values.length; i < n; ++i) {\n sum += values[i];\n means[i] = sum / N;\n sum -= values[i - N + 1];\n }\n return means;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":6,"value":"dates = {\n const parseDate = d3.timeParse(\"%m/%d/%Y %I:%M:%S %p\");\n return FileAttachment(\"chicago-homicide-dates.csv\").csv().then(data => data.map(({date}) => parseDate(date)))\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":226,"value":"Or, create this chart with [Observable Plot](/plot/)’s concise API:","pinned":false,"hidden":false,"mode":"md"},{"id":229,"value":"Plot.areaY(dates, Plot.windowY(N, Plot.binX({ y: \"count\" }, { x: Plot.identity, interval: \"day\", fill: \"steelblue\" })))\n .plot({ y: { grid: true, label: null } })","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}