31:[] 2f:{"title":"d3.group, d3.rollup","cells":[{"id":0,"value":"md`# d3.group, d3.rollup\n\nAs its name suggests, [d3.group](https://github.com/d3/d3-array/blob/master/README.md#group) groups values by key. It returns a [map](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map) from *key* to the corresponding array of *values* from the input. For example, say you have a table of highly-paid athletes:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":5,"value":"athletes = [\n {name: \"Floyd Mayweather\", sport: \"Boxing\", nation: \"United States\", earnings: 285},\n {name: \"Lionel Messi\", sport: \"Soccer\", nation: \"Argentina\", earnings: 111},\n {name: \"Cristiano Ronaldo\", sport: \"Soccer\", nation: \"Portugal\", earnings: 108},\n {name: \"Conor McGregor\", sport: \"MMA\", nation: \"Ireland\", earnings: 99},\n {name: \"Neymar\", sport: \"Soccer\", nation: \"Brazil\", earnings: 90},\n {name: \"LeBron James\", sport: \"Basketball\", nation: \"United States\", earnings: 85.5},\n {name: \"Roger Federer\", sport: \"Tennis\", nation: \"Switzerland\", earnings: 77.2},\n {name: \"Stephen Curry\", sport: \"Basketball\", nation: \"United States\", earnings: 76.9},\n {name: \"Matt Ryan\", sport: \"Football\", nation: \"United States\", earnings: 67.3},\n {name: \"Matthew Stafford\", sport: \"Football\", nation: \"United States\", earnings: 59.5}\n]","pinned":true,"hidden":false,"mode":"ojs"},{"id":9,"value":"md`To group the athletes by sport:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":11,"value":"athletesBySport = d3.group(athletes, d => d.sport)","pinned":true,"hidden":false,"mode":"ojs"},{"id":410,"value":"md`Now you can query the map for a particular group:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":396,"value":"athletesBySport.get(\"Basketball\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":409,"value":"md`You can iterate over the groups, say to construct a table:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":408,"value":"html`\n \n \n \n ${Array.from(athletesBySport, ([key, values]) => html`\n \n \n \n `)}\n

Sport	Athletes
${key}	${values.map(d => d.name).join(\", \")}

`","pinned":true,"hidden":false,"mode":"ojs"},{"id":15,"value":"md`Each group’s values are in the same relative order as the input. Thus, since the table above was in order of descending earnings, so too are each group.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":362,"value":"athletesBySport.get(\"Soccer\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":361,"value":"md`If you specify more than one key, a nested map is returned.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":227,"value":"athletesByNationSport = d3.group(athletes, d => d.nation, d => d.sport)","pinned":true,"hidden":false,"mode":"ojs"},{"id":254,"value":"md`To pull a specific group out of the nested map, chain calls to [*map*.get](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map/get).`","pinned":false,"hidden":false,"mode":"ojs"},{"id":65,"value":"athletesByNationSport.get(\"United States\").get(\"Boxing\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":243,"value":"md`Keys can be computed dynamically; they needn’t be simple properties. For example, here we group by the first letter of each name.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":262,"value":"d3.group(athletes, d => d.name[0])","pinned":true,"hidden":false,"mode":"ojs"},{"id":21,"value":"md`If you’d prefer a nested array instead of a map, say for use with [*selection*.data](https://github.com/d3/d3-selection/blob/master/README.md#selection_data) or [*array*.filter](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter), use [d3.groups](https://github.com/d3/d3-array/blob/master/README.md#groups) (plural).`","pinned":false,"hidden":false,"mode":"ojs"},{"id":23,"value":"d3.groups(athletes, d => d.name)","pinned":true,"hidden":false,"mode":"ojs"},{"id":201,"value":"d3.groups(athletes, d => d.name, d => d.sport)","pinned":true,"hidden":false,"mode":"ojs"},{"id":193,"value":"key_equality = md`## Key equality\n\nd3.group uses [maps](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map) internally, meaning that key equality is determined by JavaScript’s \\`===\\` operator. (Mostly. For details, see the [*sameValueZero* algorithm](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Equality_comparisons_and_sameness#Same-value-zero_equality).) Thus you should avoid using objects as keys because two objects representing the same value are not considered equal. For instance, consider this table of transactions:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":191,"value":"transactions = [\n {name: \"Jim\", amount: 3400, date: new Date(\"2015-11-12\")},\n {name: \"Carl\", amount: 12011, date: new Date(\"2015-11-12\")},\n {name: \"Carl\", amount: 2391, date: new Date(\"2015-11-12\")},\n {name: \"Stacy\", amount: 3405, date: new Date(\"2015-10-09\")},\n {name: \"Stacy\", amount: 1201, date: new Date(\"2016-01-04\")}\n]","pinned":true,"hidden":false,"mode":"ojs"},{"id":289,"value":"md`If you group the transactions by date, each date is a distinct object, and thus transactions occurring on the same date are not grouped together!`","pinned":false,"hidden":false,"mode":"ojs"},{"id":208,"value":"d3.groups(transactions, d => d.date) // 🕷 Dates are not equal!","pinned":true,"hidden":false,"mode":"ojs"},{"id":292,"value":"md`Instead, coerce keys to a type that supports equality such as a string or a number. This can be done either by calling a function, say [*date*.toISOString](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toISOString), or with an operator, such as unary plus (\\`+\\`) as here.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":211,"value":"d3.groups(transactions, d => +d.date) // 👍 Numbers can be equal.","pinned":true,"hidden":false,"mode":"ojs"},{"id":119,"value":"rollups = md`## Rollups\n\n[d3.rollup](https://github.com/d3/d3-array/blob/master/README.md#rollup) lets you “reduce” each group by computing a corresponding summary value, such as a sum or count. The result is a map from key to reduced value. For example, to count athletes by sport:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":417,"value":"athletes","pinned":true,"hidden":false,"mode":"ojs"},{"id":419,"value":"d3.rollup(athletes, v => v, d => d.sport)","pinned":true,"hidden":false,"mode":"ojs"},{"id":422,"value":"d3.rollup(athletes, v => v[0].name, d => d.sport)","pinned":true,"hidden":false,"mode":"ojs"},{"id":122,"value":"d3.rollup(athletes, v => v.length, d => d.sport)","pinned":true,"hidden":false,"mode":"ojs"},{"id":425,"value":"d3.rollup(athletes, d => d[0].earnings, d => d.sport) // after d => d.sport result an array not an object","pinned":true,"hidden":false,"mode":"ojs"},{"id":344,"value":"md`Or, to compute the total earnings per sport for these athletes with [d3.sum](https://github.com/d3/d3-array/blob/master/README.md#sum):`","pinned":false,"hidden":false,"mode":"ojs"},{"id":347,"value":"d3.rollup(athletes, v => d3.sum(v, d => d.earnings), d => d.sport)","pinned":true,"hidden":false,"mode":"ojs"},{"id":378,"value":"md`In conjunction with [d3.least](/@d3/d3-least), d3.rollup can be used to compute the biggest (or smallest) group according to the reduced value.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":385,"value":"d3.least(\n d3.rollup(athletes, v => d3.sum(v, d => d.earnings), d => d.sport),\n ([, sum]) => -sum\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":389,"value":"md`You can do the same with d3.group, of course.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":373,"value":"d3.least(d3.group(athletes, d => d.sport), ([, v]) => -d3.sum(v, d => d.earnings))","pinned":true,"hidden":false,"mode":"ojs"},{"id":123,"value":"md`As with d3.group, if you specify more than one key, a nested map is returned.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":165,"value":"d3.rollup(athletes, v => v.length, d => d.nation, d => d.sport)","pinned":true,"hidden":false,"mode":"ojs"},{"id":166,"value":"md`The *reducer* is only applied to the leaf groups: above, counting the athletes for a particular nation and sport. The reducer is not applied to the parent groups, or to the values as a whole. (For nested calculations, consider [d3.hierarchy](https://github.com/d3/d3-hierarchy/blob/master/README.md#hierarchy).)\n\nAnd as with d3.groups, use d3.rollups to get a nested array instead of a nested map.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":129,"value":"d3.rollups(athletes, v => d3.sum(v, d => d.earnings), d => d.sport)","pinned":true,"hidden":false,"mode":"ojs"},{"id":155,"value":"md`d3.rollups is particularly useful to create [hierarchies](https://observablehq.com/collection/@d3/d3-hierarchy) from flat datasets, as for example in this [circle-packing diagram of H-1B Employers](https://observablehq.com/@mbostock/2019-h-1b-employers).`","pinned":false,"hidden":false,"mode":"ojs"},{"id":28,"value":"md`---\n## Appendix\n\nd3.group and d3.rollup were introduced by [d3-array@2](/@d3/d3-array-2-0) as a modern replacement for d3.nest, and will be part of the upcoming d3@6.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":29,"value":"d3 = require(\"d3-array@^2.2\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":137,"value":"// This documentation is released under the CC BY-SA 4.0 license.\n// https://creativecommons.org/licenses/by-sa/4.0/\nLICENSE = \"cc-by-sa-4.0\"","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}