2c:null 2d:["$","title",null,{"children":"Stack Transform / Observable Plot | Observable | Observable"}] 32:[{"id":"11666df39db7651969fb76fc5d735d851534b667ad348bd7a2e9e489862ccdb702734ceeed800a79b363f429a4b7fbf966b75d1bbf14c51ac13b60c99ceb3b1a","href":"https://static.observableusercontent.com/files/11666df39db7651969fb76fc5d735d851534b667ad348bd7a2e9e489862ccdb702734ceeed800a79b363f429a4b7fbf966b75d1bbf14c51ac13b60c99ceb3b1a","name":"riaa-us-revenue.csv","type":"text/csv","lastModified":1617130029366.071,"size":43426},{"id":"80f4b5aaff1b414f6fbd8cac308847b4821e42e6e00b567311c5575edcbf86c4b0cf9852e1adc12373fe9b242e1dc8343ac7ac908ef5e101309b843f14ac0d27","href":"https://static.observableusercontent.com/files/80f4b5aaff1b414f6fbd8cac308847b4821e42e6e00b567311c5575edcbf86c4b0cf9852e1adc12373fe9b242e1dc8343ac7ac908ef5e101309b843f14ac0d27","name":"crimea.csv","type":"text/csv","lastModified":1617142067283.89,"size":1551},{"id":"3592d7e8c98e9d838445801f2d42dc9de9f9f0fb80cf393a1977587e2ec9c79e2fee8ae2c6ea54859e9739da1cb0501c4a2fa15b8eb5d91930241172bd177d5a","href":"https://static.observableusercontent.com/files/3592d7e8c98e9d838445801f2d42dc9de9f9f0fb80cf393a1977587e2ec9c79e2fee8ae2c6ea54859e9739da1cb0501c4a2fa15b8eb5d91930241172bd177d5a","name":"us-congress-members.csv","type":"text/csv","lastModified":1617155010536.344,"size":19590},{"id":"d78cafc08cb624880e5a11dc210aeacd21045517b6d2a56092699db1945ab9c756d304fb9a72e56c9d7658f63ad21eca049cd8509faa8b717805a229485f85ef","href":"https://static.observableusercontent.com/files/d78cafc08cb624880e5a11dc210aeacd21045517b6d2a56092699db1945ab9c756d304fb9a72e56c9d7658f63ad21eca049cd8509faa8b717805a229485f85ef","name":"iowa-energy.csv","type":"text/csv","lastModified":1617208665973.717,"size":5947},{"id":"76f13741128340cc88798c0a0b7fa5a2df8370f57554000774ab8ee9ae785ffa2903010cad670d4939af3e9c17e5e18e7e05ed2b38b848ac2fc1a0066aa0005f","href":"https://static.observableusercontent.com/files/76f13741128340cc88798c0a0b7fa5a2df8370f57554000774ab8ee9ae785ffa2903010cad670d4939af3e9c17e5e18e7e05ed2b38b848ac2fc1a0066aa0005f","name":"unemployment.csv","type":"text/csv","lastModified":1610397281865.72,"size":53919}] 30:{"id":"33bc32700f22adb1","slug":"plot-stack","title":"Stack Transform / Observable Plot","thumbnail":"e9cc1076c63314fb1f644b2eaca629480682a46085c0fa6bf032b04f8ab4c882","access_level":"public","create_time":"$D2021-01-11T20:32:29.368Z","update_time":"$D2023-03-20T09:14:11.091Z","view_time":null,"first_public_time":"$D2021-05-04T05:18:28.790Z","fork":false,"stars":26,"starred":false,"owner":{"type":"team","id":"f35c755083683fe5","login":"observablehq","name":"Observable","avatar_url":"https://avatars-next.observableusercontent.com/424c6c1f7794371c9915a160519bdfb34cf34e50069fcd6def38a1a04d4e9702","tier":"enterprise_2024"},"version":887,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"074c414ad1d825f5","login":"mbostock","name":"Mike Bostock","avatar_url":"https://avatars-next.observableusercontent.com/7dbba99ced40bd5ab8013c99b1a11da61231bce321ba1148a9d16ad0f121550a","tier":null}],"members":[{"type":"individual","id":"45a379fcfcb14253","login":"fil","name":"Fil","avatar_url":"https://avatars-next.observableusercontent.com/d5b1777907117a2bdf2a07eb98600d7a9beb21639fde42b9753e95c88c7731a6","tier":null,"role":"editor"},{"type":"individual","id":"074c414ad1d825f5","login":"mbostock","name":"Mike Bostock","avatar_url":"https://avatars-next.observableusercontent.com/7dbba99ced40bd5ab8013c99b1a11da61231bce321ba1148a9d16ad0f121550a","tier":null,"role":"editor"},{"type":"team","id":"f35c755083683fe5","login":"observablehq","name":"Observable","avatar_url":"https://avatars-next.observableusercontent.com/424c6c1f7794371c9915a160519bdfb34cf34e50069fcd6def38a1a04d4e9702","tier":"enterprise_2024","role":"viewer"}],"comments":[{"id":"6ba1cbd89648cce2","reply_to_id":null,"content":"I think it's important to highlight (here or in the API) that all the series should have the same number of elements. Otherwise, you get some pretty unintuitive plots. For example, if I have a row every time the amount of fruit changes: \n\n```\n[\n {fruit: \"banana\", day: 1, stock: 20},\n {fruit: \"banana\", day: 3, stock: 15},\n {fruit: \"apple\", day: 1, stock: 10},\n {fruit: \"apple\", day: 2, stock: 25},\n]\n```\n\nIt took me a while to realize I needed to add the values for the missing days to get the proper plot:\n\n```\n[\n {fruit: \"banana\", day: 1, stock: 20},\n {fruit: \"banana\", day: 2, stock: 20}, // add this\n {fruit: \"banana\", day: 3, stock: 15},\n {fruit: \"apple\", day: 1, stock: 10},\n {fruit: \"apple\", day: 2, stock: 25},\n {fruit: \"apple\", day: 3, stock: 25}, // add this\n]\n```","create_time":"$D2022-08-28T13:13:15.161Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"fad4469b7022b4d5","login":"nachocab","name":"Nacho Caballero","avatar_url":"https://avatars-next.observableusercontent.com/225a321e3612e41b73bcd50e0ee2d6ca386939be025d3a87d1611323abe2c59d","tier":null}},{"id":"210a35810c9f74f7","reply_to_id":"6ba1cbd89648cce2","content":"This is important for area charts, but not necessarily for the stack transform; for instance the chart at https://observablehq.com/@observablehq/plot-stack#congress doesn't have such a requirement.","create_time":"$D2022-08-28T16:04:11.668Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"45a379fcfcb14253","login":"fil","name":"Fil","avatar_url":"https://avatars-next.observableusercontent.com/d5b1777907117a2bdf2a07eb98600d7a9beb21639fde42b9753e95c88c7731a6","tier":null}}],"custom_thumbnail":true,"trashed":false,"subscribed":null,"forks":48,"collection":{"id":"febc26eef760de7c","slug":"plot","title":"Observable Plot","owner":{"id":"f35c755083683fe5","login":"observablehq","name":"Observable"}},"type":"notebook","body":{"title":"Stack Transform / Observable Plot","cells":[{"id":0,"value":"

Stack Transform / Observable Plot

Observable Plot › Transforms › Stack · API

\n\n# Plot: Stack\n\nThe **stackY** transform replaces the *y* channel with *y1* and *y2* channels to form vertical “stacks” grouped on *x*. (There’s also a **stackX** transform that replaces *x* with *x1* and *x2* for horizontal stacking grouped on *y*.) For example, consider this [line](/@observablehq/plot-line?collection=@observablehq/plot) chart of Florence Nightingale’s data on deaths in the Crimean War.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":318,"value":"crimea = FileAttachment(\"crimea.csv\").csv({typed: true})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":326,"value":"Plot.plot({\n y: {\n grid: true\n },\n color: {\n legend: true\n },\n marks: [\n Plot.lineY(crimea, {x: \"date\", y: \"deaths\", stroke: \"cause\", marker: \"circle\"}),\n Plot.ruleY([0])\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":375,"value":"If we visualized this data with non-stacked [areas](/@observablehq/plot-area?collection=@observablehq/plot), using the _y2_ channel instead of _y_, the areas would overlap and be hard to read even with multiply blending.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":377,"value":"Plot.plot({\n y: {\n grid: true\n },\n marks: [\n Plot.areaY(crimea, {x: \"date\", y2: \"deaths\", fill: \"cause\", mixBlendMode: \"multiply\"}),\n Plot.ruleY([0])\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":383,"value":"The stackY transform replaces the *y* channel with *y1* and *y2* channels such that the area series are stacked from the *y* = 0 baseline. This makes the total deaths over time easier to read, while still showing the individual causes. The stackY transform is implicitly specified if you use the areaY *y* channel.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":321,"value":"Plot.plot({\n y: {\n grid: true\n },\n marks: [\n Plot.areaY(crimea, {x: \"date\", y: \"deaths\", fill: \"cause\"}),\n Plot.ruleY([0])\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":366,"value":"The stack transform works with [bars](/@observablehq/plot-bar?collection=@observablehq/plot), too. (With an ordinal *x*-axis of dates, we must format the ticks manually; Plot might get smarter in the future.)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":363,"value":"Plot.plot({\n x: {\n type: \"band\",\n tickFormat: d => d.toLocaleString(\"en\", {month: \"narrow\"}),\n label: null\n },\n marks: [\n Plot.barY(crimea, {x: \"date\", y: \"deaths\", fill: \"cause\"}),\n Plot.ruleY([0])\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":430,"value":"As another example, here’s a stacked area chart of unemployment by month and industry from the Bureau of Labor Statistics. (This chart has more than ten series, and hence colors are recycled; it would be better to aggregate the smaller industries into the “Other” series.)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":7,"value":"unemployment = FileAttachment(\"unemployment.csv\").csv({typed: true})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":828,"value":"stacked.legend(\"color\", {columns: \"155px\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":26,"value":"stacked = Plot.plot({\n y: {\n grid: true,\n label: \"↑ Unemployed (thousands)\"\n },\n marks: [\n Plot.areaY(unemployment, Plot.stackY({x: \"date\", y: \"unemployed\", fill: \"industry\", title: \"industry\"})),\n Plot.ruleY([0])\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":255,"value":"The stack transform stacks from a zero baseline by default, but this can be changed with the *offset* option. Four offset methods are supported:\n\n* *center* - as proposed by [Havre *et al.*](https://innovis.cpsc.ucalgary.ca/innovis/uploads/Courses/InformationVisualizationDetails2009/Havre2000.pdf)\n* *wiggle* - minimizing movement, as proposed by [Byron & Wattenberg](http://leebyron.com/streamgraph/stackedgraphs_byron_wattenberg.pdf)\n* *normalize* - normalized to proportions in [0, 1]\n* null - a zero baseline\n\nThe first two offsets are also called “streamgraphs” for their fluid appearance.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":211,"value":"Plot.plot({\n y: {\n grid: true,\n label: \"↑ Unemployed (thousands)\"\n },\n marks: [\n Plot.areaY(unemployment, Plot.stackY({offset: \"center\", x: \"date\", y: \"unemployed\", fill: \"industry\"}))\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":304,"value":"The stack transform provides an *order* option for reordering series. The default respects the input order. The supported orders are:\n\n* *sum* - order series by ascending total value\n* *appearance* - order series by the index of their greatest value\n* *inside-out* - order series as proposed by Byron & Wattenberg\n* *z* - order series naturally by key (the *z*, *fill*, or *stroke* channel)\n* *value* - order values in ascending order (*y* for stackY, *x* for stackX)\n* some other string - order values according to the specified field\n* a function - order values according to the specified function of data\n* an array - order series by key in the specified order\n* null - respect input order\n\nThe *reverse* option reverses any of the above orders. The default order is input order (null), unless the *wiggle* offset is used, in which case the default order is *inside-out* to minimize movement.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":301,"value":"Plot.plot({\n y: {\n grid: true,\n label: \"↑ Unemployed (thousands)\"\n },\n marks: [\n Plot.areaY(unemployment, Plot.stackY({offset: \"wiggle\", x: \"date\", y: \"unemployed\", fill: \"industry\"}))\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":253,"value":"While series are often ordered consistently, as above, that isn’t a requirement: the order of series can vary across stacks! This is most apparent with the *value* order, which places the largest value on the top similar to a “ribbon” chart. (See this technique in Nadja Popovich’s [“How Does Your State Make Electricity?”](https://www.nytimes.com/interactive/2018/12/24/climate/how-electricity-generation-changed-in-your-state.html) from 2018.)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":141,"value":"Plot.plot({\n y: {\n grid: true,\n label: \"↑ Unemployed (thousands)\"\n },\n marks: [\n Plot.areaY(unemployment, Plot.stackY({\n x: \"date\",\n y: \"unemployed\",\n curve: \"catmull-rom\",\n fill: \"industry\",\n order: \"value\"\n })),\n Plot.ruleY([0])\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":251,"value":"The *appearance* order excels when each series has a prominent peak, such as the chart below of the RIAA’s U.S. revenue broken down by format. CD sales started declining well before the rise of digital, suggesting that the music industry was slow to provide a convenient digital product and hence lost substantial revenue to piracy. This chart also demonstrates how to share options across marks (the *xy* variable). The **stackY1** transform outputs the stacked *y1* channel as the *y* channel so that the baseline of each series can be stroked with white. (There are similar **stackY2**, **stackX1**, and **stackX2** transforms.)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":266,"value":"riaa = FileAttachment(\"riaa-us-revenue.csv\").csv({typed: true})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":267,"value":"{\n const xy = {x: \"year\", y: \"revenue\", z: \"format\", order: \"appearance\", reverse: true};\n return Plot.plot({\n y: {\n grid: true,\n label: \"↑ Annual revenue (billions, adj.)\",\n transform: d => d / 1000\n },\n marks: [\n Plot.areaY(riaa, Plot.stackY({...xy, fill: \"group\", title: d => `${d.format}\\n${d.group}`})),\n Plot.lineY(riaa, Plot.stackY1({...xy, stroke: \"white\", strokeWidth: 1})),\n Plot.ruleY([0])\n ],\n color: {legend: true}\n });\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":287,"value":"With the *expand* offset, the stack transform will compute the proportion of each series, such that each stack spans the interval [0, 1]. The *percent* scale option then multiplies these proportions by 100 to show percentages. Very little music is actually purchased these days — nearly everything is rented by way of streaming services.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":289,"value":"{\n const xy = {x: \"year\", y: \"revenue\", z: \"format\", order: \"appearance\", offset: \"expand\", reverse: true};\n return Plot.plot({\n y: {\n grid: true,\n label: \"↑ Revenue (%)\",\n percent: true\n },\n marks: [\n Plot.areaY(riaa, Plot.stackY({...xy, fill: \"group\", title: d => `${d.format}\\n${d.group}`})),\n Plot.lineY(riaa, Plot.stackY2({...xy, stroke: \"white\", strokeWidth: 1})),\n Plot.ruleY([0, 1])\n ]\n });\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":519,"value":"If the null offset is used for a zero baseline, then negative values will be stacked downwards from the baseline, producing a diverging stacked chart. This is especially useful for splitting series into two categories, such as in the chart of the gender and age of U.S. congress members below. This chart uses the stackY2 transform to position [dots](/@observablehq/plot-dot?collection=@observablehq/plot).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":526,"value":"congress = FileAttachment(\"us-congress-members.csv\").csv({typed: true})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":521,"value":"Plot.plot({\n height: 300,\n x: {\n label: \"Age →\",\n nice: true\n },\n y: {\n grid: true,\n label: \"← Women · Men →\",\n labelAnchor: \"center\",\n tickFormat: Math.abs\n },\n marks: [\n Plot.dot(congress, Plot.stackY2({\n x: d => 2021 - d.birth,\n y: d => d.gender === \"M\" ? 1 : d.gender === \"F\" ? -1 : 0,\n fill: \"gender\"\n })),\n Plot.ruleY([0])\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":739,"value":"Here is another view of the same data, faceted by every ten years of age, showing how the youngest members of congress are slightly increasing gender diversity, but with a long way still to go. (The tendency of women to live longer than men may also have an effect on the older brackets, though 90+ is a clear outlier.) The **stackX** transform also generates an *x* channel that is the midpoint of the *x1* and *x2* channels for centered labels; similarly **stackY** generates a transform for *y*, too.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":723,"value":"Plot.plot({\n height: 280,\n x: {\n percent: true\n },\n facet: {\n data: congress,\n y: d => Math.floor((2021 - d.birth) / 10) * 10\n },\n marks: [\n Plot.barX(congress, Plot.stackX(Plot.groupZ({x: \"proportion-facet\"}, {fill: \"gender\"}))),\n Plot.text(congress, Plot.stackX(Plot.groupZ({x: \"proportion-facet\", text: \"first\"}, {z: \"gender\", text: d => d.gender === \"F\" ? \"Women\" : d.gender === \"M\" ? \"Men\" : null}))),\n Plot.ruleX([0, 1])\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":283,"value":"One last example, perhaps slightly more upbeat, is this stacked area chart showing the rise of renewable energy generation in Iowa paired with the decline of coal.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":161,"value":"iowa = FileAttachment(\"iowa-energy.csv\").csv({typed: true})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":477,"value":"energy.legend(\"color\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":163,"value":"energy = Plot.plot({\n y: {\n grid: true,\n label: \"↑ Net generation (million MWh)\",\n transform: d => d / 1000\n },\n marks: [\n Plot.areaY(iowa, Plot.stackY({x: \"year\", y: \"net_generation\", fill: \"source\", title: \"source\"})),\n Plot.ruleY([0])\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":787,"value":"Next \nAPI Reference","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"}],"files":"$W32","stdlib":"1","titling":"auto"}} 31:"$30:body"