43:["$","title",null,{"children":"Window Transform / Observable Plot | 1907040108 | Observable"}] 4b: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 }); }4c: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 }); }4d:T56a,{ // add fake data gaps for demo purposes const tempWithGaps = temp.slice(0,100) .map((d, i) => ({...d, valueOrGap: [22, 53, 60, 87].includes(i) ? NaN : d.middle})); const customWindowY = ({ 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 = -a; i + k -a < v.length; i++) { R[a + i] = reduce(v.slice(Math.max(0, i), i + k + 1)); } return R; } }, options ); return Plot.plot({ caption: `Custom map, ignoring gaps`, marks: [ Plot.dot( tempWithGaps, { x: "date", y: d => d.valueOrGap || 43.5, fill: d => !!d.valueOrGap, r: 2.5 } ), Plot.line( tempWithGaps, customWindowY({ k : 5, x: "date", y: "valueOrGap", stroke: "orange", strokeWidth: 4 }) ), Plot.line( tempWithGaps, Plot.windowY({ k : 5, x: "date", y: "valueOrGap", stroke: "brown", strokeWidth: 3 }) ), ], color: { domain: [false, true], range: ["brown", "grey"] }, height: 250 }); }4e:[{"id":"f8443aeba539ce037fc7e694c8229578e682eda5cd9d41f7d4079df784263e7c72e4a4316cb0e182b56544ce607de8f036cc7efc4c1e262675adebdbabe83f32","href":"https://static.observableusercontent.com/files/f8443aeba539ce037fc7e694c8229578e682eda5cd9d41f7d4079df784263e7c72e4a4316cb0e182b56544ce607de8f036cc7efc4c1e262675adebdbabe83f32","name":"temp.csv","type":"text/csv","lastModified":1637117659965.311,"size":19504}] 47:{"id":"0dcfc3da8f4a78cd","slug":"window-transform-observable-plot","title":"Window Transform / Observable Plot","thumbnail":"68a2c22fae5a671c5bae774832d436f108edbd8ccfe6acdb6684e1c1a2f88779","access_level":"public","create_time":"$D2021-11-17T02:54:19.965Z","update_time":"$D2021-11-17T04:09:25.407Z","view_time":null,"first_public_time":"$D2021-11-17T03:58:00.103Z","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":"78113d61fa0b7dac","login":"1907040108","name":"","avatar_url":"https://avatars-next.observableusercontent.com/939e6ac8543cf3de57c24d3c996dd9f43e3365ac037e9a35ef3261e055b963ed","tier":"starter_2024","bio":"hello everybody","followed_by_you":false,"follows_you":false},"version":856,"publish_version":856,"role":null,"authored":false,"authors":[{"type":"individual","id":"9092fa51634d9367","login":"1907040108","name":"","avatar_url":"https://avatars-next.observableusercontent.com/939e6ac8543cf3de57c24d3c996dd9f43e3365ac037e9a35ef3261e055b963ed","tier":null,"bio":"hello everybody","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"9092fa51634d9367","login":"1907040108","name":"","avatar_url":"https://avatars-next.observableusercontent.com/939e6ac8543cf3de57c24d3c996dd9f43e3365ac037e9a35ef3261e055b963ed","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** 和 Plot.**windowX** 是专门的[地图变换](https://observablehq.com/@observablehq/plot-map)，它们将一系列数值作为输入并取平均值 ,并显示在滑动窗口上：","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([0, 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":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 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 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":"在每个数据系列（可能按 *z* 和按面分组）中，*k* 值的移动窗口前进，然后每个子集减少为单个值。这些值按输入顺序获取 - 如有必要，请与 Plot.sort 组合（参见 [下文](#sort)）。","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"窗口变换有三个选项：\n\n- **k**，窗口的_width_，是连续的（整数）个数\n 每个职位将考虑的元素。 _k_ 必须被指定并且\n 大于 1，否则转换将抛出错误。\n- **anchor**，默认为 _middle_。其他选项是 _start_ 和 _end_。这\n 计算是一样的，但锚点改变了移动的点\n 值将被估算。对于 _start_，计算值将被归入\n 窗口的第一个点；对于_end_，到最后一个； “中间”锚\n 将在窗口的中心，例如在位置 3 如果 _k_ = 7，并且\n 2 for _k_ = 6.（如果_k_是偶数，则位置被视为\n ${tex`\\left \\lfloor \\frac{k - 1}{2} \\right \\rfloor `})。\n- **reduce**，减速器。默认为 _mean_。描述窗口中的 _k_ 数值如何\n 减少到一个值。\n\n**k** 和 **anchor** 的影响可以在上面的交互式图表中可视化。","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\n\n内置选项很多：\n - *min* - 最小值\n - *max* - 最大值\n - *mean* - 平均值（平均值）\n - *中位数* - 中位数\n - *mode* - 模式（最常见）\n - *sum* - 值的总和\n - *偏差* - 标准偏差\n - *variance* - 每个 Welford 算法的方差\n - *差异* - 最后一个和第一个窗口值之间的差异\n - *ratio* - 最后一个和第一个窗口值的比率\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":90,"value":"以下是这些reducers的一些示例，它们应用于相同的数据：","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":"*mode* reducer 返回窗口中最常出现的 *number*，可用于判断当前窗口中的大部分温度是否高于中值温度。","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**附注。** 使用 *mode* 减速器（或自定义函数减速器）来处理数字以外的分类数据是很好的；但是，Plot.window 转换针对数字进行了优化，并将所有值强制转换为类型化的浮点数组，从而阻止它们与其他数据类型一起使用。但等效的 Plot.map 变换是可能的：","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":445,"value":"$4b","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":471,"value":"---\n### 垂直变换（windowX）\n\nPlot.**windowX** 与 Plot.**windowY** 对称；使用它来说明 *deviation* 减速器：","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.stackX(\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 ],\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":"### 自定义减速器\n\n当内置的reducer不够用时，我们可以使用自己的函数。在下面的示例中，我们将引入一个函数，该函数采用 ${days} 值的窗口样本数组，并返回样本的平均值加上标准偏差，乘以任意乘数 *K*——不要与窗口宽度*k*混淆。如果 *K* 是正的，比如说 +2，这给出了分布的 95% 百分位的局部估计值；相反，如果 *K* 为负 (-2)，则估计 5% 百分位数。","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":"### 多个减速器\n\n这两条线之间的区域称为[布林带](https://en.wikipedia.org/wiki/Bollinger_Bands)。如果将其绘制为一个区域，而不是两条单独的线，需计算同一标记中的两次减少。这要用到 Plot.**map** 和 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":"显示布林带以及该带外的任何异常数据点。得到窗口变换目标的点的 *fill* 属性，再次使用 Plot.**map** 和 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":"$4c","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":669,"value":"### 缺失值\n\n把窗口计算的值归入窗口的开始、中间或结束索引——通过构造，会在数据系列的任一端或两端留下间隙。此外，任何包含 NaN 的窗口都会自动创建一个长度为 *k* 的间隙。这些空白用 NaN 值填充。如果不起作用，用更通用的 Plot.map 变换，基于下面的示例，其中橙色线是有效值的移动平均值，与每个断开的棕色线形成对比出现无效值（棕色点）：","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":673,"value":"$4d","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.** 这些值按输入顺序。如果数据未排序用 Plot.sort，如下例所示，为了演示目的，温度数据集已被打乱：`","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":"$W4e","stdlib":"1"}} 42:null