30:[{"id":"3ccff97fd2d93da734e76829b2b066eafdaac6a1fafdec0faf6ebc443271cfc109d29e80dd217468fcb2aff1e6bffdc73f356cc48feb657f35378e6abbbb63b9","href":"https://static.observableusercontent.com/files/3ccff97fd2d93da734e76829b2b066eafdaac6a1fafdec0faf6ebc443271cfc109d29e80dd217468fcb2aff1e6bffdc73f356cc48feb657f35378e6abbbb63b9","name":"aapl.csv","type":"text/csv","lastModified":1615914666067.132,"size":92399},{"id":"cb3b255da07fd7d153388e7c29366394e13c160f011f45ebfc87e988b4224e32f9ec3243aa046b92e2991da0afee1bfe8fac31cff9c434e8638e4c7bdcc93e92","href":"https://static.observableusercontent.com/files/cb3b255da07fd7d153388e7c29366394e13c160f011f45ebfc87e988b4224e32f9ec3243aa046b92e2991da0afee1bfe8fac31cff9c434e8638e4c7bdcc93e92","name":"diamonds.csv","type":"text/csv","lastModified":1615914688083.155,"size":513118},{"id":"45adc85504802b0c0057f449b350cd63c5f99c2b7b6f5bfeb813396b500f9a1a542aae410c239385d80751e4c174faade8c8a44029b4909415a170401cea6365","href":"https://static.observableusercontent.com/files/45adc85504802b0c0057f449b350cd63c5f99c2b7b6f5bfeb813396b500f9a1a542aae410c239385d80751e4c174faade8c8a44029b4909415a170401cea6365","name":"povcalnet.csv","type":"text/csv","lastModified":1616013749584.82,"size":38820}] 2e:{"title":"Rect Mark / Observable Plot","cells":[{"id":0,"value":"

Rect Mark / Observable Plot

Observable Plot › Marks › Rect · API

\n\n# Plot: Rect\n\nThe **rect** mark draws a rectangular, axis-aligned region defined by the channels *x1*, *y1*, *x2*, and *y2*. It is most often used in conjunction with the [bin transform](/@observablehq/plot-bin?collection=@observablehq/plot) to produce a histogram. The **rectX** mark is shorthand for *x1* = zero, *x2* = *x*, while the **rectY** mark is shorthand for *y1* = zero, *y2* = *y*. For example, below is a histogram of (log) daily trade volume for Apple stock.","pinned":false,"hidden":false,"mode":"md"},{"id":18,"value":"aapl = FileAttachment(\"aapl.csv\").csv({typed: true})","pinned":true,"hidden":false,"mode":"ojs"},{"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)})),\n Plot.ruleY([0])\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":188,"value":"The rect mark is closely related to the [bar mark](/@observablehq/plot-bar?collection=@observablehq/plot). Both generate a rectangle; the difference is in how the coordinates are specified. For a bar, one side is a quantitative interval (*e.g.*, from 0 to a number of units sold) while the other is an ordinal or categorical value (*e.g.*, a fruit name); whereas for a rect, both sides are quantitative intervals. Hence a bar is used for a bar chart but a rect is needed for a histogram.","pinned":false,"hidden":false,"mode":"md"},{"id":92,"value":"As another example, below we recreate a [chart by Max Roser](https://ourworldindata.org/poverty-minimum-growth-needed) that visualizes global poverty. Each rect here represents a country: *x* encodes the country’s population, while *y* encodes the proportion of the country’s population living in poverty; hence the rect *area* encodes the number of people living in poverty. Rects are [stacked](/@observablehq/plot-stack?collection=@observablehq/plot) along *x* in order of descending *y*.","pinned":false,"hidden":false,"mode":"md"},{"id":73,"value":"povcalnet = FileAttachment(\"povcalnet.csv\").csv({typed: true})","pinned":true,"hidden":false,"mode":"ojs"},{"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"},{"id":41,"value":"rectX and rectY are suitable for one-dimensional histograms, while rect is for two-dimensional histograms, also known as heatmaps, where density is represented by the *fill* color encoding. (A similar plot can be made with [dots](/@observablehq/plot-dot?collection=@observablehq/plot), if you’d prefer a size encoding. If both *x* and *y* are ordinal dimensions, use a [cell](/@observablehq/plot-cell?collection=@observablehq/plot) instead; and if one is an ordinal dimension and the other is quantitative, use a [bar](/@observablehq/plot-bar?collection=@observablehq/plot).)","pinned":false,"hidden":false,"mode":"md"},{"id":24,"value":"diamonds = FileAttachment(\"diamonds.csv\").csv({typed: true})","pinned":true,"hidden":false,"mode":"ojs"},{"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"},{"id":164,"value":"The rect mark supports four options for insetting the sides of the rect: *insetTop*, *insetRight*, *insetBottom*, and *insetLeft*. (The bin transform automatically applies a half-pixel inset on the relevant sides.) The *inset* option is shorthand for setting all four sides to the same value. Compare the heatmap below to the one above.","pinned":false,"hidden":false,"mode":"md"},{"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"},{"id":53,"value":"The rect mark exposes SVG’s [*rx* and *ry* attributes](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/rx) for rounded corners. The rounded corners will get squished if the rects are too small, which may not be desirable.","pinned":false,"hidden":false,"mode":"md"},{"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)})),\n Plot.ruleY([0])\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":192,"value":"Next \nAPI Reference","pinned":false,"hidden":false,"mode":"md"}],"files":"$W30","stdlib":"1","titling":"auto"}