3e:null 3f:["$","title",null,{"children":"Window Transform / Observable Plot | Heungseok Park | Observable"}] 45:T46b,The window transforms have four options: - **k**, the _width_ of the window, is the (integer) number of consecutive elements that will be considered for each position. _k_ must be specified and greater than 1, otherwise the transform will throw an error. - **anchor**, defaults to _middle_. Other options are _start_ and _end_. The computations are the same, but the anchor changes the point where the moving value will be imputed. For _start_, the computed value will be imputed to the first point of the window; for _end_, to the last one; the "middle" anchor will be in the center of the window, for example in position 3 if _k_ = 7, and 2 for _k_ = 6. (If _k_ is even, the position is taken as ${tex`\left \lfloor \frac{k - 1}{2} \right \rfloor `}). - **reduce**, the reducer. Defaults to _mean_. Describes how the _k_ numeric values in the window are reduced to one value. - **strict**, whether to return NaN when a value is missing in the window. When set to true, any window that is incomplete returns NaN. The impact of **k**, **anchor**, and **strict** can be visualized in the interactive chart above.46:T41a,{ const categoricalWindowY = ({ anchor, k, reduce = d3.mean, ...options }) => Plot.map( { y: (v) => { const R = Array.from(v, () => null); const a = anchor === "start" ? 0 : anchor === "end" ? k - 1 : (k - 1) >> 1; for (let i = 0; i + k < v.length; i++) { R[a + i] = reduce(v.slice(i, i + k + 1)); } return R; } }, options ); const median = d3.median(temp, (d) => d.middle); return Plot.plot({ caption: `Custom map`, marks: [ Plot.tickX( temp, categoricalWindowY({ anchor: "start", reduce: d3.mode, k, x: "date", y: (d) => (d.middle < median ? "lower" : "higher") }) ) ], // Here I purposefully didn't remove NaN from the y domain, a situation which happens // at the beginning and end of the x domain; uncomment the following line to see the difference // y: { domain: ["lower", "higher"] }, height: 100 }); }47:T5b6,{ // the reference point inside a window depends on the anchor const ref = anchor === "start" ? 0 : anchor === "end" ? days - 1 : (days - 1) >> 1; return Plot.plot({ y: { nice: true, grid: true, domain: d3.extent(temp, (d) => d.middle) }, color: { domain: [false], range: ["orange"] }, marks: [ Plot.areaY( temp, Plot.map( { y1: Plot.window({ k: days, anchor, reduce: bollinger(-K) }), y2: Plot.window({ anchor, k: days, reduce: bollinger(K) }) }, { x: "date", y: "middle", fill: "#eef9ff", curve: "basis" } ) ), Plot.dot( temp, // color dots according to their being an outlier of the bollinger band Plot.map( { fill: Plot.window({ anchor, k: days, reduce: (V) => Math.abs(V[ref] - d3.mean(V)) <= K * d3.deviation(V) }) }, { x: "date", y: "middle", z: null, // avoids grouping on fill fill: "middle" } ) ), Plot.line(temp, { x: "date", y: "middle", strokeWidth: 0.5 }) ], width }); }48:[{"id":"f8443aeba539ce037fc7e694c8229578e682eda5cd9d41f7d4079df784263e7c72e4a4316cb0e182b56544ce607de8f036cc7efc4c1e262675adebdbabe83f32","href":"https://static.observableusercontent.com/files/f8443aeba539ce037fc7e694c8229578e682eda5cd9d41f7d4079df784263e7c72e4a4316cb0e182b56544ce607de8f036cc7efc4c1e262675adebdbabe83f32","name":"temp.csv","type":"text/csv","lastModified":1673976610381.466,"size":19504}] 43:{"id":"d622fa475681f2f6","slug":null,"title":"Window Transform / Observable Plot","thumbnail":"08df7a41e1d12ef537b8b4bfa41f76246bb459594eb063e8fd12ab4f71be254e","access_level":"public","create_time":"$D2023-01-17T17:30:10.381Z","update_time":"$D2023-01-17T17:30:10.381Z","view_time":null,"first_public_time":"$D2023-01-17T17:30:10.381Z","has_unpublished_edits":null,"fork":{"id":"1a1be1c40c5a1445","slug":"plot-window","title":"Window Transform / Observable Plot","owner":{"id":"f35c755083683fe5","login":"observablehq","name":"Observable"}},"stars":0,"starred":false,"owner":{"type":"team","id":"f3a86824ef5d9337","login":"heungseok","name":"Heungseok Park","avatar_url":"https://avatars-next.observableusercontent.com/67d8f2bc98464df320bddbe73d893817c490958ba339cb002076076a3cfb37ac","tier":"starter_2024","bio":"Data visualization researcher & engineer at Clova AI Research, NAVER Corp.","following":false},"version":882,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"a86b8fc55072258a","login":"heungseok","name":"Heungseok Park","avatar_url":"https://avatars-next.observableusercontent.com/67d8f2bc98464df320bddbe73d893817c490958ba339cb002076076a3cfb37ac","tier":null,"bio":"Data visualization researcher & engineer at Clova AI Research, NAVER Corp.","following":false}],"members":[{"type":"individual","id":"a86b8fc55072258a","login":"heungseok","name":"Heungseok Park","avatar_url":"https://avatars-next.observableusercontent.com/67d8f2bc98464df320bddbe73d893817c490958ba339cb002076076a3cfb37ac","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Window Transform / Observable Plot","cells":[{"id":0,"value":"

Window Transform / Observable Plot

Observable Plot › Transforms › Window · API

\n\n# Plot: Window\n\nPlot.**windowY** and Plot.**windowX** are specialized [map transforms](https://observablehq.com/@observablehq/plot-map?collection=@observablehq/plot), which take a series of numeric values as input and average them (or, more generically, reduce them) over a sliding window:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"viewof k = Inputs.range([1, 20], { value: 7, step: 1, label: \"k\" })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":42,"value":"viewof anchor = Inputs.select([\"start\", \"middle\", \"end\"], {\n label: \"anchor\",\n value: \"middle\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":857,"value":"viewof strict = Inputs.toggle({label: \"strict\", value: false})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"Plot.plot({\n y: {\n grid: true,\n label: \"↑ Daily temperature range (°F)\"\n },\n marks: [\n Plot.areaY(temp, {\n x: \"date\",\n y1: \"low\",\n y2: \"high\",\n curve: \"step\",\n fill: \"#ccc\"\n }),\n Plot.line(\n temp,\n Plot.windowY({\n k,\n anchor,\n strict\n }, {\n x: \"date\",\n y: \"low\",\n curve: \"step\",\n stroke: \"blue\"\n })\n ),\n Plot.line(\n temp,\n Plot.windowY({\n k,\n anchor,\n strict\n }, {\n x: \"date\",\n y: \"high\",\n curve: \"step\",\n stroke: \"red\"\n })\n )\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":810,"value":"In each data series (possibly grouped by *z* and by facet), a moving window of *k* values advances and each subset is reduced to a single value. The values are taken in input order—compose with Plot.sort if necessary (see [below](#sort)).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"$45","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":505,"value":"### Reducers\n\nBuilt-in options are numerous:\n - *min* - the minimum\n - *max* - the maximum\n - *mean* - the mean (average)\n - *median* - the median\n - *mode* - the mode (most common occurrence)\n - *sum* - the sum of values\n - *deviation* - the standard deviation\n - *variance* - the variance per Welford’s algorithm\n - *difference* - the difference between the last and first window value\n - *ratio* - the ratio of the last and first window value\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":90,"value":"Here are a few examples of these reducers, applied to the same data:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":62,"value":"htl.html`${[\"min\", \"median\", \"max\", \"difference\"].map((reduce) =>\n Plot.plot({\n caption: `Reducer: ${reduce}`,\n y: { grid: true },\n marks: [\n Plot.line(\n temp,\n Plot.windowY({\n anchor,\n reduce,\n k,\n x: \"date\",\n y: \"middle\"\n })\n )\n ],\n height: 250\n })\n)}`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":108,"value":"The *mode* reducer returns the most-seen *number* in the window, and can be used to gauge if the majority of temperatures in the current window have been greater than the median temperature.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":176,"value":"{\n const reduce = \"mode\";\n const median = d3.median(temp, (d) => d.middle);\n return Plot.plot({\n caption: `Reducer: ${reduce}`,\n marks: [\n Plot.tickX(\n temp,\n Plot.windowY({\n anchor,\n reduce,\n k,\n x: \"date\",\n y: (d) => Math.sign(d.middle - median)\n })\n )\n ],\n height: 100,\n y: { domain: [-1, 1], tickFormat: (d) => (d < 0 ? \"lower\" : \"higher\") }\n });\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":431,"value":"---\n**Side note.** It would be tempting to use the *mode* reducer (or the custom function reducer) for categorical data, beyond numbers; however, the Plot.window transforms are optimized for numbers and coerce all values to a typed array of floats, precluding their use with other data types. But an equivalent Plot.map transform is possible:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":445,"value":"$46","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":471,"value":"---\n### Vertical transform (windowX)\n\nPlot.**windowX** is symmetrical to Plot.**windowY**; we’ll use it here to illustrate the *deviation* reducer:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":481,"value":"Plot.plot({\n caption: `Reducer: deviation`,\n marks: [\n Plot.areaX(\n temp,\n Plot.windowX({\n anchor,\n reduce: \"deviation\",\n k: 20,\n y: \"date\",\n x: \"middle\",\n offset: \"center\",\n fill: \"brown\"\n })\n )\n ],\n marginLeft: 150,\n height: 250,\n x: { axis: null },\n y: { ticks: 12, tickFormat: d => Plot.formatMonth()(d.getMonth()) }\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":564,"value":"### Custom reducers\n\nWhen the built-in reducers are not enough, we can use our own function. In the following example, we’ll introduce a function that takes a windowed sample array of ${days} values, and returns the mean plus the standard deviation of the sample, times an arbitrary multiplier *K*—not to be confused with the window width *k*. If *K* is positive, say +2, this gives a local estimate of the 95%-percentile of the distribution; conversely, if *K* is negative (-2), this estimates the 5%-percentile.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":556,"value":"bollinger = (K) => (values) => d3.mean(values) + K * d3.deviation(values)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":567,"value":"Plot.plot({\n y: {\n nice: true,\n grid: true,\n domain: d3.extent(temp, (d) => d.middle)\n },\n marks: [\n Plot.lineY(\n temp,\n Plot.windowY({\n k: days,\n reduce: bollinger(-K),\n x: \"date\",\n y: \"middle\",\n curve: \"basis\",\n stroke: \"#ccc\"\n })\n ),\n Plot.lineY(\n temp,\n Plot.windowY({\n k: days,\n reduce: bollinger(K),\n x: \"date\",\n y: \"middle\",\n curve: \"basis\",\n stroke: \"#ccc\"\n })\n ),\n Plot.dot(temp, {\n x: \"date\",\n y: \"middle\",\n fill: \"black\",\n r: 1.5\n })\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":500,"value":"### Multiple reducers\n\nThe area between these two lines is called the [Bollinger band](https://en.wikipedia.org/wiki/Bollinger_Bands). If we want to plot it as an area, instead of two separate lines, we’ll need to compute the two reductions in the same mark. This is possible thanks to a combination of Plot.**map** and Plot.**window**:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":530,"value":"viewof K = Inputs.range([0.5, 4], {\n value: 2,\n label: \"Bollinger multiplier\",\n step: 0.1\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":536,"value":"viewof days = Inputs.range([2, 20], {\n value: 7,\n step: 1,\n label: html`days (k)`\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":522,"value":"Plot.plot({\n y: {\n nice: true,\n grid: true,\n domain: d3.extent(temp, (d) => d.middle)\n },\n marks: [\n Plot.areaY(\n temp,\n Plot.map(\n {\n y1: Plot.window({ k: days, reduce: bollinger(-K) }),\n y2: Plot.window({ k: days, reduce: bollinger(K) })\n },\n {\n x: \"date\",\n y: \"middle\",\n curve: \"basis\",\n fill: \"#ccc\"\n }\n )\n ),\n Plot.dot(temp, {\n x: \"date\",\n y: \"middle\",\n fill: \"black\",\n r: 1.5\n })\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":583,"value":"And, to go a step further, we might want to display the Bollinger band as well as any outlier data points that are outside that band. This time, it’s the *fill* property of the dots that we want to be the target of the window transform, and this can be achieved, again, by using Plot.**map** in combination with Plot.**window**:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":590,"value":"$47","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":669,"value":"### Missing values and the _strict_ option\n\nThe value computed for a window is imputed to the start, middle or end index of the window—and this, by construction, leaves a gap on either or both ends of the data series. Furthermore, any window which contains a NaN automatically creates a gap of length *k*. These gaps are ignored, unless the *strict* option is set to true. In the example below, the orange line is a moving average of valid values, contrasting with the brown line which is broken each time an invalid value (a brown dot) appears:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":673,"value":"{\n // add fake data gaps for demo purposes\n const tempWithGaps = temp.slice(0, 100)\n .map((d, i) => ({\n ...d,\n valueOrGap: [22, 53, 60, 87].includes(i) ? NaN : d.middle\n }));\n\n return Plot.plot({\n caption: `Use the strict: true option to create a gap when a window is incomplete`,\n marks: [\n Plot.dot(tempWithGaps, {\n x: \"date\",\n y: (d) => d.valueOrGap || 43.5,\n fill: (d) => !!d.valueOrGap,\n r: 2.5\n }),\n\n Plot.line(\n tempWithGaps,\n Plot.windowY({\n k: 5,\n x: \"date\",\n y: \"valueOrGap\",\n stroke: \"orange\",\n strokeWidth: 4\n })\n ),\n Plot.line(\n tempWithGaps,\n Plot.windowY({\n strict: true,\n k: 5,\n x: \"date\",\n y: \"valueOrGap\",\n stroke: \"brown\",\n strokeWidth: 3\n })\n )\n ],\n color: { domain: [false, true], range: [\"brown\", \"grey\"] },\n height: 250\n });\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":819,"value":"sort = md`**Sorting.** The values are considered in input order. If the data isn’t already sorted, consider using Plot.sort, as in the following example in which the temperatures dataset has been shuffled for the purposes of the demonstration:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":836,"value":"viewof shuffle_sort = Inputs.toggle({label: \"Apply Plot.sort\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":826,"value":"{\n let options = {x: \"date\", y: \"middle\", k: 28};\n if (shuffle_sort) options = Plot.sort(\"date\", options);\n return Plot.lineY(shuffled, Plot.windowY(options)).plot({height: 250});\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":822,"value":"shuffled = d3.shuffle(temp.slice())","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":801,"value":"temp = FileAttachment(\"temp.csv\").csv({typed: true})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":777,"value":"md`Next \nAPI Reference`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W48","stdlib":"1"}} 44:"$43:body"