45:["$","title",null,{"children":"Area Mark / Observable Plot | 邹佳敏 | Observable"}] 4d:[{"id":"3ccff97fd2d93da734e76829b2b066eafdaac6a1fafdec0faf6ebc443271cfc109d29e80dd217468fcb2aff1e6bffdc73f356cc48feb657f35378e6abbbb63b9","href":"https://static.observableusercontent.com/files/3ccff97fd2d93da734e76829b2b066eafdaac6a1fafdec0faf6ebc443271cfc109d29e80dd217468fcb2aff1e6bffdc73f356cc48feb657f35378e6abbbb63b9","name":"aapl.csv","type":"text/csv","lastModified":1636533038715.285,"size":92399},{"id":"76f13741128340cc88798c0a0b7fa5a2df8370f57554000774ab8ee9ae785ffa2903010cad670d4939af3e9c17e5e18e7e05ed2b38b848ac2fc1a0066aa0005f","href":"https://static.observableusercontent.com/files/76f13741128340cc88798c0a0b7fa5a2df8370f57554000774ab8ee9ae785ffa2903010cad670d4939af3e9c17e5e18e7e05ed2b38b848ac2fc1a0066aa0005f","name":"bls-industry-unemployment.csv","type":"text/csv","lastModified":1636533038715.285,"size":53919},{"id":"7ffb89c1408eeefdab3eb2a8f782ab2ac2bfbffc96fa5fa482bb766a5440edcb1ef1d61a1e77ae5bbf1578c0b100ccdd4b15e13e9a367b096368806993fca486","href":"https://static.observableusercontent.com/files/7ffb89c1408eeefdab3eb2a8f782ab2ac2bfbffc96fa5fa482bb766a5440edcb1ef1d61a1e77ae5bbf1578c0b100ccdd4b15e13e9a367b096368806993fca486","name":"sf-temperatures.csv","type":"text/csv","lastModified":1636533038715.285,"size":15106}] 49:{"id":"7eecb3c20d1087de","slug":"area-mark-observable-plot","title":"Area Mark / Observable Plot","thumbnail":"ce42e53e38420363a53f5929257cb1cc6e190970279d61c67edd92947de654a4","access_level":"public","create_time":"$D2021-11-10T08:30:38.715Z","update_time":"$D2021-11-11T02:32:42.552Z","view_time":null,"first_public_time":"$D2021-11-16T04:09:51.828Z","has_unpublished_edits":null,"fork":{"id":"0cd3c783b0b6c48f","slug":"plot-area","title":"Area Mark / Observable Plot","owner":{"id":"f35c755083683fe5","login":"observablehq","name":"Observable"}},"stars":0,"starred":false,"owner":{"type":"team","id":"7d0acc4d42f8afd3","login":"1907040209","name":"邹佳敏","avatar_url":"https://avatars-next.observableusercontent.com/4eebb1db206c763f235ebdb6f92ab9aa9e56839b17b15efc618fba69b67621bc","tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":604,"publish_version":604,"role":null,"authored":false,"authors":[{"type":"individual","id":"ee2e263bf5b52c62","login":"1907040209","name":"邹佳敏","avatar_url":"https://avatars-next.observableusercontent.com/4eebb1db206c763f235ebdb6f92ab9aa9e56839b17b15efc618fba69b67621bc","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"ee2e263bf5b52c62","login":"1907040209","name":"邹佳敏","avatar_url":"https://avatars-next.observableusercontent.com/4eebb1db206c763f235ebdb6f92ab9aa9e56839b17b15efc618fba69b67621bc","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Area Mark / Observable Plot","cells":[{"id":0,"value":"md`

Area Mark / Observable Plot

Observable Plot › Marks › Area · API

\n\n# Plot: Area\n\n**areaY** 标记绘制基线 (*y1*) 和顶线 (*y2*) 之间的区域，如面积图所示。当基线为 *y* = 0 时，可以指定 *y* 通道而不是 *y1* 和 *y2*。例如，这里是苹果股价的面积图。`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"aapl = FileAttachment(\"aapl.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":16,"value":"Plot.plot({\n marks: [\n Plot.areaY(aapl, {x: \"Date\", y: \"Close\"})\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":91,"value":"md`区域通常与 [line](/@observablehq/plot-line) 和 [rule](/@observablehq/plot-rule) 标记结合使用，以突出顶线和基线：`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":77,"value":"Plot.plot({\n y: {\n grid: true\n },\n marks: [\n Plot.areaY(aapl, {x: \"Date\", y: \"Close\", fill: \"#ccc\"}),\n Plot.lineY(aapl, {x: \"Date\", y: \"Close\"}),\n Plot.ruleY([0])\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":472,"value":"md`使用 *x* = index 和 *y* = identity 的默认通道定义，您可以将数字数组作为数据传递。下面，使用 [d3.cumsum](/@d3/d3-cumsum) 和 [d3.randomNormal](/@d3/d3-random) 构建随机游走。`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":510,"value":"numbers = d3.cumsum({length: 600}, d3.randomNormal())","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":475,"value":"Plot.plot({\n marks: [\n Plot.areaY(numbers)\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":314,"value":"md`与线一样，区域中的点按输入顺序连接：第一个点连接到第二个点，第二个点连接到第三个点，依此类推。这通常意味着应按时间顺序对区域数据进行排序。`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":309,"value":"Plot.plot({\n y: {\n grid: true\n },\n marks: [\n Plot.areaY(d3.shuffle(aapl.slice(0, 100)), {\n // sort: \"Date\", // uncomment to fix\n x: \"Date\", \n y: \"Close\"\n })\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":319,"value":"md`当基线不是 *y* = 0 而是代表另一个维度的数据时，请指定 *y1* 和 *y2* 通道而不是 *y*。请注意，下面由于 *y1* 和 *y2* 通道指的是不同的字段，因此指定了 *y*-label 以提高可读性。`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":27,"value":"sftemp = FileAttachment(\"sf-temperatures.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":19,"value":"Plot.plot({\n y: {\n label: \"↑ Temperature (°F)\",\n grid: true\n },\n marks: [\n Plot.areaY(sftemp, {x: \"date\", y1: \"low\", y2: \"high\"})\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":339,"value":"md`上面的带子很尖；通过使用 [window transform](/@observablehq/plot-map) 将 14 天移动平均线应用于 *y1* 和 *y2* 通道来平滑它，并对中线执行相同操作。我们还可以添加 *y* 规则来表示冰点，32°F。`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":47,"value":"Plot.plot({\n y: {\n label: \"↑ Temperature (°F)\",\n grid: true\n },\n marks: [\n Plot.ruleY([32]),\n Plot.areaY(sftemp, Plot.windowY({\n x: \"date\", \n y1: \"low\", \n y2: \"high\",\n fill: \"#ccc\",\n k: 14\n })),\n Plot.line(sftemp, Plot.windowY({\n x: \"date\", \n y: d => (d.low + d.high) / 2,\n k: 14\n }))\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":142,"value":"md`虽然图表通常将 *y* = 0 放在底部边缘，这样区域会变大，但这不是必需的；反转 *y* 尺度将产生一个向下生长的“悬垂”区域。`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":144,"value":"Plot.plot({\n x: {\n label: null\n },\n y: {\n grid: true,\n reverse: true\n },\n marks: [\n Plot.areaY(aapl, {x: \"Date\", y: \"Close\", fill: \"#ccc\"}),\n Plot.lineY(aapl, {x: \"Date\", y: \"Close\"}),\n Plot.ruleY([0])\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":98,"value":"md`**areaY** 标记是更通用的 **area** 标记的特例，它允许基线 (*x1*) 和顶线 (*x2*) 的 *x* 定义不同。对于垂直方向的基线和顶线，例如当时间增加而不是向右时，请使用 **areaX** 并交换 *x* 和 *y* 通道。`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":262,"value":"Plot.plot({\n x: {\n grid: true\n },\n marks: [\n Plot.areaX(aapl, {y: \"Date\", x: \"Close\", fill: \"#ccc\"}),\n Plot.lineX(aapl, {y: \"Date\", x: \"Close\"}),\n Plot.ruleX([0])\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":109,"value":"md`如果某些 *x* 或 *y* 通道值未定义（或 null 或 NaN），则相邻点之间将出现间隙。为了演示，下面我们将每年前三个月的每日收盘价设置为 NaN。`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":282,"value":"someCloses = aapl.map(d => d.Date.getUTCMonth() < 3 ? NaN : d.Close)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":279,"value":"Plot.plot({\n y: {\n grid: true\n },\n marks: [\n Plot.areaY(aapl, {x: \"Date\", y: someCloses, fill: \"#ccc\"}),\n Plot.lineY(aapl, {x: \"Date\", y: someCloses}),\n Plot.ruleY([0])\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":301,"value":"md`提供未定义的值与过滤数据不同：后者将在数据点之间进行插值。如下面的直线`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":293,"value":"someAapl = aapl.filter(d => d.Date.getUTCMonth() >= 3)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":291,"value":"Plot.plot({\n y: {\n grid: true\n },\n marks: [\n Plot.areaY(someAapl, {x: \"Date\", y: \"Close\", fill: \"#ccc\"}),\n Plot.lineY(someAapl, {x: \"Date\", y: \"Close\"}),\n Plot.ruleY([0])\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":140,"value":"md`插值由 *curve* 属性控制。默认曲线是线性的，它在相邻点对之间绘制直线段。阶梯曲线非常适合强调值发生变化时，而基数曲线和 Catmull-Rom 曲线非常适合平滑。在下面的失业建筑工人图中，尝试选择不同的曲线。`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":229,"value":"viewof curve = Inputs.select([\n \"linear\",\n \"step\",\n \"step-after\",\n \"step-before\",\n // \"linear-closed\",\n \"basis\",\n // \"basis-closed\",\n // \"basis-open\",\n // \"bundle\",\n \"cardinal\",\n // \"cardinal-closed\",\n // \"cardinal-open\",\n \"catmull-rom\",\n // \"catmull-rom-closed\",\n // \"catmull-rom-open\",\n \"monotone-x\",\n // \"monotone-y\",\n \"natural\",\n], {label: \"Curve\", value: \"step\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":226,"value":"Plot.plot({\n marks: [\n Plot.areaY(construction, {x: \"date\", y: \"unemployed\", curve, fillOpacity: 0.1}),\n Plot.lineY(construction, {x: \"date\", y: \"unemployed\", curve, strokeWidth: 1}),\n Plot.ruleY([0])\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":150,"value":"bls = FileAttachment(\"bls-industry-unemployment.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":223,"value":"construction = bls.filter(d => d.industry === \"Construction\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":102,"value":"md`区域标记的 *z* 通道沿有序（离散）维度对数据进行分组，从而产生多个区域。这通常与 [stack transform](/@observablehq/plot-stack) 一起用于堆积面积图或流图，但它也可用于重叠区域。`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":151,"value":"Plot.plot({\n marks: [\n Plot.areaY(bls, {x: \"date\", y2: \"unemployed\", z: \"industry\", fillOpacity: 0.1}),\n Plot.lineY(bls, {x: \"date\", y: \"unemployed\", z: \"industry\", strokeWidth: 1})\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":496,"value":"md`如果未指定 *z* 通道，但指定了变化的 *fill* 通道，则 *fill* 通道用于 *z*。如果需要，*z* 通道将进一步回退到变化的 *stroke* 通道。`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":490,"value":"Plot.plot({\n marks: [\n Plot.areaY(bls, {x: \"date\", y: \"unemployed\", fill: \"industry\"}), // implicit stacking\n Plot.ruleY([0])\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":103,"value":"md`作为重叠或堆叠的替代方案，刻面可用于产生小的倍数，此处垂直排列并共享 *x* 轴。`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":166,"value":"Plot.plot({\n height: 600,\n y: {\n axis: null\n },\n fy: {\n axis: \"right\",\n label: null\n },\n facet: {\n data: bls,\n y: \"industry\",\n marginRight: 140\n },\n marks: [\n Plot.areaY(bls, {x: \"date\", y: \"unemployed\", fillOpacity: 0.2}),\n Plot.lineY(bls, {x: \"date\", y: \"unemployed\", strokeWidth: 1})\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":194,"value":"md`在上面，农业、采矿和采掘等较小的行业与批发和零售贸易等较大的行业相形见绌。为了强调每个行业的趋势，我们可以相对于每个行业的中位数将失业率标准化，而不是比较跨行业的绝对数字。`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":183,"value":"Plot.plot({\n height: 600,\n y: {\n axis: null\n },\n fy: {\n axis: \"right\",\n label: null\n },\n facet: {\n data: bls,\n y: \"industry\",\n marginRight: 140\n },\n marks: [\n Plot.areaY(bls, Plot.normalizeY({basis: \"median\", x: \"date\", y: \"unemployed\", fillOpacity: 0.2})),\n Plot.lineY(bls, Plot.normalizeY({basis: \"median\", x: \"date\", y: \"unemployed\", strokeWidth: 1}))\n ]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":554,"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":"$W4d","stdlib":"1"}} 44:null