28:null 29:["$","title",null,{"children":"Group Transform / Observable Plot | Observable | Observable"}] 2e:T46a,Each grouped output channel (the keys of the object passed as the first argument to the group transform) has an associated reducer which controls how the summary value for each group is derived. The examples above use *count*, but a variety of built-in reducers are provided: * *count* - the number of observations in each group * *sum* - the sum of values * *proportion* - like *sum*, but divided by the total * *proportion-facet* - like *sum*, but divided by the facet’s total * *min* - the minimum value * *max* - the maximum value * *mean* - the mean (average) value * *median* - the median value * *mode* - the value with the most occurrences * *variance* - an unbiased estimator of [population variance](https://github.com/d3/d3-array/blob/master/README.md#variance) * *deviation* - the [standard deviation](https://github.com/d3/d3-array/blob/master/README.md#deviation) * *first* - the first value (in input order) * *last* - the last value (in input order) You can also implement a custom reducer: this function is repeatedly passed the array of data for each group and should return the corresponding summary value.2f:[{"id":"8d807624b4de528a039159b57dea402e1952e7309ad78620820b33b45eddc9929a7e9b0ca64c674f426aa5b76dbc1f9b52d7de3e993cd55385071e65cd1f0355","href":"https://static.observableusercontent.com/files/8d807624b4de528a039159b57dea402e1952e7309ad78620820b33b45eddc9929a7e9b0ca64c674f426aa5b76dbc1f9b52d7de3e993cd55385071e65cd1f0355","name":"moby-dick-chapter-1.txt","type":"text/plain","lastModified":1616096811342.197,"size":12260},{"id":"715db1223e067f00500780077febc6cebbdd90c151d3d78317c802732252052ab0e367039872ab9c77d6ef99e5f55a0724b35ddc898a1c99cb14c31a379af80a","href":"https://static.observableusercontent.com/files/715db1223e067f00500780077febc6cebbdd90c151d3d78317c802732252052ab0e367039872ab9c77d6ef99e5f55a0724b35ddc898a1c99cb14c31a379af80a","name":"penguins.csv","type":"text/csv","lastModified":1616094739278.847,"size":13506},{"id":"831732e8332e141e39aca2776edfdb19b2d43308d4974f5ad4a21fad007faa0518fe5bc4a0fc4f57422689a161dc27b82073403cee0e29ebf6ccb75d0ec4aeb3","href":"https://static.observableusercontent.com/files/831732e8332e141e39aca2776edfdb19b2d43308d4974f5ad4a21fad007faa0518fe5bc4a0fc4f57422689a161dc27b82073403cee0e29ebf6ccb75d0ec4aeb3","name":"seattle-weather.csv","type":"text/csv","lastModified":1617051794490.965,"size":48219}] 2c:{"id":"b5991cf5b1ae1899","slug":"plot-group","title":"Group Transform / Observable Plot","thumbnail":"17ae90540a6c2e950dc2625a1217297ed9a177ae48c3535c61893b1b49213990","access_level":"public","create_time":"$D2020-12-16T01:44:34.920Z","update_time":"$D2022-09-19T05:06:53.137Z","view_time":null,"first_public_time":"$D2021-05-04T05:17:11.446Z","has_unpublished_edits":null,"fork":false,"stars":12,"starred":false,"owner":{"type":"team","id":"f35c755083683fe5","login":"observablehq","name":"Observable","avatar_url":"https://avatars-next.observableusercontent.com/424c6c1f7794371c9915a160519bdfb34cf34e50069fcd6def38a1a04d4e9702","tier":"enterprise_2024"},"version":804,"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":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":21,"collection":{"id":"febc26eef760de7c","slug":"plot","title":"Observable Plot","owner":{"id":"f35c755083683fe5","login":"observablehq","name":"Observable"}},"type":"notebook","body":{"title":"Group Transform / Observable Plot","cells":[{"id":0,"value":"

Group Transform / Observable Plot

Observable Plot › Transforms › Group · API

\n\n# Plot: Group\n\nYou often want to aggregate data before visualizing; for example, given a set of penguin observations you may wish to count the number of each species seen. Plot’s group transforms let you derive summary values for each group, such as a count, sum, or proportion. The group transform is like a [bin transform](/@observablehq/plot-bin?collection=@observablehq/plot) for ordinal or categorical data, and is most often used to make bar charts.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":691,"value":"The **groupX** transform groups data by *x*. This can be used to produce a *y* channel of counts suitable for the [barY mark](/@observablehq/plot-bar?collection=@observablehq/plot), as shown below. (A similar **groupY** transforms groups on *y*.)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":20,"value":"penguins = FileAttachment(\"penguins.csv\").csv({typed: true})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"Plot.plot({\n y: {\n grid: true\n },\n marks: [\n Plot.barY(penguins, Plot.groupX({y: \"count\"}, {x: \"species\"})),\n Plot.ruleY([0])\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":143,"value":"To sort the groups in descending order of frequency, set the *sort* option to {x: \"y\"}, indicating that you want the *x* domain to be sorted by the *y* values. Include *reverse*: true for descending order. The default is natural (alphabetical) order.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":140,"value":"Plot.plot({\n y: {\n grid: true\n },\n marks: [\n Plot.barY(penguins, Plot.groupX({y: \"count\"}, {x: \"species\", sort: {x: \"y\", reverse: true}})),\n Plot.ruleY([0])\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":799,"value":"The group transform should generally not be used if the primary dimension (*e.g.*, *x* for groupX) is temporal or quantitative (continuous) rather than ordinal or categorical (discrete). If this is the case, you should use the [bin transform](/@observablehq/plot-bin?collection=@observablehq/plot), say with a [rect mark](/@observablehq/plot-rect?collection=@observablehq/plot) instead of a bar mark.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":52,"value":"$2e","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":480,"value":"Here are more examples. Below the *proportion* reducer computes the proportion of observations for each species: a number between 0 and 1 rather than absolute counts. The *percent* scale option multiplies these proportions by 100 and adds a percent sign to the axis label.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":55,"value":"Plot.plot({\n y: {\n grid: true,\n percent: true\n },\n marks: [\n Plot.barY(penguins, Plot.groupX({y: \"proportion\"}, {x: \"species\"})),\n Plot.ruleY([0])\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":47,"value":"The *sum* reducer adds the values for the corresponding channel for each group. Below, each bar represents the total body mass of each species. (Gentoos tend to be heavier than Adelies and Chinstraps, hence the total mass of Gentoos is largest even though there are more Adelies.)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":27,"value":"Plot.plot({\n y: {\n label: \"↑ Total mass (kg)\",\n grid: true,\n transform: d => d / 1000\n },\n marks: [\n Plot.barY(penguins, Plot.groupX({y: \"sum\"}, {x: \"species\", y: \"body_mass_g\"})),\n Plot.ruleY([0])\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":380,"value":"Below, a [rule](/@observablehq/plot-rule?collection=@observablehq/plot) shows the observed minimum and maximum body mass for each species, while a red [tick](/@observablehq/plot-tick?collection=@observablehq/plot) shows the median. (See the related [boxplot example](/@observablehq/plot-box).)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":382,"value":"Plot.plot({\n marginLeft: 60,\n x: {\n inset: 6\n },\n y: {\n label: null\n },\n marks: [\n Plot.dot(penguins, {y: \"species\", x: \"body_mass_g\"}),\n Plot.ruleY(penguins, Plot.groupY({x1: \"min\", x2: \"max\"}, {y: \"species\", x: \"body_mass_g\"})),\n Plot.tickX(penguins, Plot.groupY({x: \"median\"}, {y: \"species\", x: \"body_mass_g\", stroke: \"red\"}))\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":113,"value":"If the *x* channel is not specified for the groupX transform, and similarly the *y* channel for the groupY transform, it defaults to the identity function. So, passing an array of characters from *Moby Dick* to the groupX transform will compute the frequency of each character.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":114,"value":"mobydick = [...await FileAttachment(\"moby-dick-chapter-1.txt\").text()]\n .filter(c => /\\w/i.test(c))\n .map(c => c.toUpperCase())","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":118,"value":"Plot.plot({\n y: {\n grid: true\n },\n marks: [\n Plot.barY(mobydick, Plot.groupX({y: \"count\"})),\n Plot.ruleY([0])\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":131,"value":"The group transform can be composed with other transforms, such as the [filter transform](/@observablehq/plot-transforms?collection=@observablehq/plot), say to compute the frequency only of vowels. When the *proportion* reducer is used, the basis is still the entire (unfiltered) dataset.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":128,"value":"Plot.plot({\n y: {\n grid: true,\n percent: true\n },\n marks: [\n Plot.barY(mobydick, Plot.groupX({y: \"proportion\"}, {filter: d => /[AEIOUY]/.test(d)})),\n Plot.ruleY([0])\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":45,"value":"Grouping can be combined with [faceting](/@observablehq/plot-facets?collection=@observablehq/plot) to create small multiples where the data is subdivided into facets before being grouped.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":40,"value":"Plot.plot({\n x: {\n tickFormat: d => d === null ? \"N/A\" : d\n },\n y: {\n grid: true\n },\n facet: {\n data: penguins,\n x: \"species\"\n },\n marks: [\n Plot.barY(penguins, Plot.groupX({y: \"count\"}, {x: \"sex\"})),\n Plot.ruleY([0])\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":62,"value":"The *proportion-facet* reducer behaves similarly to *proportion*, except that it computes the frequency relative to the facet rather than to the entire dataset. We use it to show percentages within each species below.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":59,"value":"Plot.plot({\n x: {\n tickFormat: d => d === null ? \"N/A\" : d\n },\n y: {\n grid: true,\n percent: true\n },\n facet: {\n data: penguins,\n x: \"species\"\n },\n marks: [\n Plot.barY(penguins, Plot.groupX({y: \"proportion-facet\"}, {x: \"sex\"})),\n Plot.ruleY([0])\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":600,"value":"While groupX and groupY group on *x* and *y*, respectively, you can further partition (subdivide) groups by an additional *z* dimension, say for stacked bars. If the *z* dimension is undefined, it defaults to either the *fill* or *stroke* dimension. Below we group by *x* = species and *z* = *fill* = sex, and then implicitly stack *y*.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":593,"value":"Plot.plot({\n y: {\n grid: true\n },\n marks: [\n Plot.barY(penguins, Plot.groupX({y: \"count\"}, {x: \"species\", fill: \"sex\"})),\n Plot.ruleY([0])\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":289,"value":"To group solely on *z* (or *fill* or *stroke*), use the **groupZ** transform instead of groupX or groupY. This example also uses the *first* reducer to label the bars by pulling out the first value for each group.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":291,"value":"Plot.plot({\n x: {\n percent: true\n },\n marks: [\n Plot.barX(penguins, Plot.stackX(Plot.groupZ({x: \"proportion\"}, {fill: \"sex\"}))),\n Plot.text(penguins, Plot.stackX(Plot.groupZ({x: \"proportion\", text: \"first\"}, {z: \"sex\", text: \"sex\"}))),\n Plot.ruleX([0, 1])\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":272,"value":"As an alternative to groupX, we can stack bars using groupZ while faceting. This lets us use *proportion-facet* to compute percentages within each facet.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":246,"value":"Plot.plot({\n y: {\n grid: true,\n percent: true\n },\n facet: {\n data: penguins,\n x: \"species\"\n },\n marks: [\n Plot.barY(penguins, Plot.groupZ({y: \"proportion-facet\"}, {fill: \"sex\"})),\n Plot.ruleY([0, 1])\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":49,"value":"Lastly, the **group** transform groups on both *x* and *y*. This is typically used in conjunction with a [cell](/@observablehq/plot-cell?collection=@observablehq/plot) or [dot](/@observablehq/plot-dot?collection=@observablehq/plot) to produce a discrete heatmap. Below, we plot the maximum observed temperature in Seattle between 2012 and 2015 where *y* = month and *x* = day of the month.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":572,"value":"seattle = FileAttachment(\"seattle-weather.csv\").csv({typed: true})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":574,"value":"Plot.plot({\n padding: 0,\n y: {\n tickFormat: Plot.formatMonth()\n },\n color: {\n scheme: \"BuRd\"\n },\n marks: [\n Plot.cell(seattle, Plot.group({fill: \"max\"}, {\n x: d => d.date.getUTCDate(),\n y: d => d.date.getUTCMonth(),\n fill: \"temp_max\",\n inset: 0.5\n }))\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":710,"value":"Next \nAPI Reference","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"}],"files":"$W2f","stdlib":"1","titling":"auto"}} 2d:"$2c:body"