45:["$","title",null,{"children":"Rect Mark / Observable Plot | 1907040202 | Observable"}] 4d:[{"id":"3ccff97fd2d93da734e76829b2b066eafdaac6a1fafdec0faf6ebc443271cfc109d29e80dd217468fcb2aff1e6bffdc73f356cc48feb657f35378e6abbbb63b9","href":"https://static.observableusercontent.com/files/3ccff97fd2d93da734e76829b2b066eafdaac6a1fafdec0faf6ebc443271cfc109d29e80dd217468fcb2aff1e6bffdc73f356cc48feb657f35378e6abbbb63b9","name":"aapl.csv","type":"text/csv","lastModified":1637552684616.013,"size":92399},{"id":"cb3b255da07fd7d153388e7c29366394e13c160f011f45ebfc87e988b4224e32f9ec3243aa046b92e2991da0afee1bfe8fac31cff9c434e8638e4c7bdcc93e92","href":"https://static.observableusercontent.com/files/cb3b255da07fd7d153388e7c29366394e13c160f011f45ebfc87e988b4224e32f9ec3243aa046b92e2991da0afee1bfe8fac31cff9c434e8638e4c7bdcc93e92","name":"diamonds.csv","type":"text/csv","lastModified":1637552684616.013,"size":513118},{"id":"45adc85504802b0c0057f449b350cd63c5f99c2b7b6f5bfeb813396b500f9a1a542aae410c239385d80751e4c174faade8c8a44029b4909415a170401cea6365","href":"https://static.observableusercontent.com/files/45adc85504802b0c0057f449b350cd63c5f99c2b7b6f5bfeb813396b500f9a1a542aae410c239385d80751e4c174faade8c8a44029b4909415a170401cea6365","name":"povcalnet.csv","type":"text/csv","lastModified":1637552684616.013,"size":38820}] 49:{"id":"ce13d237faf0c941","slug":"rect-mark-observable-plot","title":"Rect Mark / Observable Plot","thumbnail":"a45f77788bb54fd1d9d8016b6741c930b39a5ba10e1d1fdef39970377b64d30c","access_level":"public","create_time":"$D2021-11-22T03:44:44.616Z","update_time":"$D2021-11-22T10:24:45.398Z","view_time":null,"first_public_time":"$D2021-11-22T10:25:05.350Z","has_unpublished_edits":null,"fork":{"id":"1548b29b7b471b5c","slug":"plot-rect","title":"Rect Mark / Observable Plot","owner":{"id":"f35c755083683fe5","login":"observablehq","name":"Observable"}},"stars":0,"starred":false,"owner":{"type":"team","id":"ab56f65a3c59a775","login":"1907040202","name":"","avatar_url":null,"tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":265,"publish_version":265,"role":null,"authored":false,"authors":[{"type":"individual","id":"422dae94408264fe","login":"1907040202","name":"","avatar_url":null,"tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"422dae94408264fe","login":"1907040202","name":"","avatar_url":null,"tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Rect Mark / Observable Plot","cells":[{"id":0,"value":"md`

Rect Mark / Observable Plot

Observable Plot › Marks › Rect · API

\n\n# Plot: Rect\n\n\n矩形标记绘制一个由通道 x1、y1、x2 和 y2 定义的与轴对齐的矩形区域。它最常与 [bin transform](/@observablehq/plot-bin)（bin 变换）结合使用以生成直方图。 **rectX** 标记是 x1 = 0, x2 = x 的简写，而 **rectY** 标记是 y1 = 0, y2 = y 的简写。例如，下面是苹果公司股票（对数）每日交易量的直方图。`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"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":20,"value":"Plot.plot({\n x: {\n round: true,\n label: \"Trade volume (log₁₀) →\"\n },\n y: {\n grid: true\n },\n marks: [\n Plot.rectY(aapl, Plot.binX({y: \"count\"}, {x: d => Math.log10(d.Volume), normalize: true})),\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":188,"value":"md`\n矩形标记与条形标记[bar mark](/@observablehq/plot-bar)密切相关。两者都生成一个矩形；不同之处在于如何指定坐标。对于bar，一侧是定量区间（例如，从 0 到销售的单位数），而另一侧是序数或分类值（例如，水果名称）；而对于 rect，两边都是定量区间。因此，条形标记用于条形图，但直方图需要矩形标记。`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":92,"value":"md`\n下面看另一个例子，我们重新创建了一个 [chart by Max Roser](https://ourworldindata.org/poverty-minimum-growth-needed)，该图表可视化了全球贫困情况。这里的每个矩形代表一个国家：x 表示该国家的人口，而 y 表示该国家贫困人口的比例；因此矩形区域表示了生活贫困的人数。矩形按 y 降序沿 x 堆叠[stacked](/@observablehq/plot-stack)。`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":73,"value":"povcalnet = FileAttachment(\"povcalnet.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":74,"value":"Plot.plot({\n width: 928,\n x: {\n label: \"Population (millions) →\"\n },\n y: {\n label: \"↑ Proportion living on less than $30 per day (%)\",\n transform: d => d * 100,\n grid: true\n },\n marks: [\n Plot.rectY(povcalnet, Plot.stackX({\n filter: d => [\"N\", \"A\"].includes(d.CoverageType),\n x: \"ReqYearPopulation\",\n order: \"HeadCount\",\n reverse: true,\n y2: \"HeadCount\", // y2 to avoid stacking by y\n title: d => `${d.CountryName}\\n${(d.HeadCount * 100).toFixed(1)}%`,\n insetLeft: 0.2,\n insetRight: 0.2\n })),\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":41,"value":"md`\nrectX 和 rectY 适用于一维直方图，而 rect 适用于二维直方图，也称为热图，其中密度由填充颜色编码表示。（如果你更喜欢大小编码，可以用[dots](/@observablehq/plot-dots)绘制类似的图。如果 x 和 y 都是序数维度，请使用[cell](/@observablehq/plot-cell)代替；如果一个是序数维度而另一个是定量的，请使用[bar](/@observablehq/plot-bar)。 )`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":24,"value":"diamonds = FileAttachment(\"diamonds.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":25,"value":"Plot.plot({\n height: 640,\n color: {\n scheme: \"bupu\",\n type: \"symlog\"\n },\n marks: [\n Plot.rect(diamonds, Plot.bin({fill: \"count\"}, {x: \"carat\", y: \"price\", thresholds: 100}))\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":164,"value":"md`矩形标记支持四个选项用于插入矩形的边：insetTop、insetRight、insetBottom 和 insetLeft。（bin 变换会自动在相关边上应用半像素插入。）插入选项是将所有四个边设置为相同值的简写。比较下面与上面的热图。`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":161,"value":"Plot.plot({\n height: 640,\n round: true,\n color: {\n scheme: \"bupu\",\n type: \"symlog\"\n },\n marks: [\n Plot.rect(diamonds, Plot.bin({fill: \"count\"}, {x: \"carat\", y: \"price\", thresholds: 100, inset: 0}))\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":53,"value":"md`矩形标记公开了 SVG 的 [*rx* and *ry* attributes](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/rx) 。如果矩形太小，圆角会被压扁，这在一定情况下是不可取的。`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":124,"value":"Plot.plot({\n x: {\n round: true,\n label: \"Trade volume (log₁₀) →\"\n },\n y: {\n grid: true\n },\n marks: [\n Plot.rectY(aapl, Plot.binX({y: \"count\"}, {rx: 8, x: d => Math.log10(d.Volume), normalize: true})),\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":192,"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