31:[{"id":"4a666eac0ba36c574cece49548575f5d589751c5b171fdd338089c656abba0eb8e0fdb23905d2109004277349d82b4a373cd7fa74189cdaaa9eb8b364a5e0373","href":"https://static.observableusercontent.com/files/4a666eac0ba36c574cece49548575f5d589751c5b171fdd338089c656abba0eb8e0fdb23905d2109004277349d82b4a373cd7fa74189cdaaa9eb8b364a5e0373","name":"all_listings.csv.csv","type":"text/csv","lastModified":1575611704304.572,"size":898295}] 2f:{"title":"Group & Rollup (Stock Market edition)","cells":[{"id":0,"value":"md`# Group & Rollup (Stock Market edition)\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 **Dow Jones Industrial Average Index components**:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":418,"value":"stocks = dow30.map(d =>\n Object.assign({}, all_listings.filter(l => l.Symbol === d.Symbol)[0], d)\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":9,"value":"md`To group the companies by Sector:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":420,"value":"stocksBySectors = d3.group(stocks, d=>d.Sector)","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":426,"value":"stocksBySectors.get(\"Finance\")","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(\n stocksBySectors,\n ([key, values]) => html`\n \n \n \n `\n )}\n

Sectors	Stocks Grouped By Sectors
${key}	${values.map(d => d.Company).join(\", \")}

`","pinned":false,"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 alphabetical order based on Company names, so too are each group.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":362,"value":"HealthCare = stocksBySectors.get(\"Health Care\")","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":"stocksGroupedByExchangeThenBySector = d3.group(stocks, d => d.Exchange, d => d.Sector)","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":"NYSE_Consumer_Services = stocksGroupedByExchangeThenBySector\n .get(\"NYSE\")\n .get(\"Consumer Services\")","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":"StocksByFirstLetter = d3.group(stocks, d => d.Company[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":"StocksByIndustry = d3.groups(stocks, d => d.Industry)","pinned":true,"hidden":false,"mode":"ojs"},{"id":201,"value":"StocksByExchangeThenByIndustry = d3.group(\n stocks,\n d => d.Exchange,\n d => d.Industry\n)","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 the \"Date Added\" property on stocks in dow30:`","pinned":false,"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(stocks, d => new Date(d[\"Date Added\"])) \n// 🕷 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":551,"value":"isoDateGroup = d3.groups(stocks, d => new Date(d[\"Date Added\"]).toISOString()) \n// 🕷 Dates are now equal!","pinned":true,"hidden":false,"mode":"ojs"},{"id":211,"value":"unixDateGroup = d3.groups(stocks, d => +new Date(d[\"Date Added\"])) \n// 👍 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 stocks by industry:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":122,"value":"d3.rollup(stocks, v => v.length, d => d.Industry)","pinned":true,"hidden":false,"mode":"ojs"},{"id":578,"value":"stocks","pinned":true,"hidden":false,"mode":"ojs"},{"id":567,"value":"stocks.reduce(\n (accumulator, { Industry }) => {\n accumulator[Industry] = {};\n accumulator[Industry] = stocks.filter(x => x.Industry === Industry).length;\n return accumulator;\n },\n { __sectors__: new Set(stocks.map(x => x.Industry)) }\n)","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(\n SalesLog,\n v => d3.sum(v, d => +d[\"price\"] * d[\"qty\"]),\n d => d.option_code\n)","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(\n SalesLog,\n v => d3.sum(v, d => +d[\"price\"] * d.qty),\n d => d.option_code\n ),\n ([, sum]) => -sum\n)","pinned":false,"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(SalesLog, d => d.option_code), ([, v]) =>\n d3.sum(v, d => +d[\"price\"] * +d[\"qty\"])\n)","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(stocks, v => v.length, d => d.Exchange, d => d.Industry)","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(stocks, v => d3.sum(v, d =>+d.MarketCap), d => d.Sector)","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 seen in [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', \"d3-array@^2.2\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":512,"value":"dow30=DOW30","pinned":false,"hidden":false,"mode":"ojs"},{"id":642,"value":"all_listings = d3.csvParse(\n await FileAttachment('all_listings.csv.csv').text(),\n d3.autoType\n)\n///import all_listings from tradingday notebook to get live data.\n//we are using a static file copy for now","pinned":false,"hidden":false,"mode":"ojs"},{"id":415,"value":"import { DOW30 } from '@stroked/tradingday'","pinned":true,"hidden":false,"mode":"ojs"},{"id":602,"value":"import { SalesLog } from '@stroked/ibm'","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"},{"id":518,"value":"//stop using nest.\n//Next Up: treemap and circlepacking of markets","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}