2b:null 2c:["$","title",null,{"children":"The difference between d3.nest(), d3.map() and data.map | Stuart Thompson | Observable"}] 31:[] 2f:{"id":"86274effa8f6b312","slug":"the-difference-between-d3-nest-d3-map-and-data-map","title":"The difference between d3.nest(), d3.map() and data.map","thumbnail":"2fcf8daf55ba52da230ddc5637fabd7a873435dac4a4a828b0c836f7a9232c33","access_level":"public","create_time":"$D2019-05-19T00:16:59.152Z","update_time":"$D2021-04-26T18:42:07.746Z","view_time":null,"first_public_time":"$D2019-07-12T17:16:43.672Z","has_unpublished_edits":null,"fork":false,"stars":26,"starred":false,"owner":{"type":"team","id":"0037882dbfd20f7d","login":"stuartathompson","name":"Stuart Thompson","avatar_url":"https://avatars-next.observableusercontent.com/612df2c15ecd79793ae9e1da55f073846192b68a855df3fa08cb20625a22cb61","tier":"starter_2024"},"version":353,"publish_version":353,"role":null,"authored":false,"authors":[{"type":"individual","id":"2f7c0ea43db5e5ea","login":"stuartathompson","name":"Stuart Thompson","avatar_url":"https://avatars-next.observableusercontent.com/612df2c15ecd79793ae9e1da55f073846192b68a855df3fa08cb20625a22cb61","tier":null}],"members":[{"type":"individual","id":"2f7c0ea43db5e5ea","login":"stuartathompson","name":"Stuart Thompson","avatar_url":"https://avatars-next.observableusercontent.com/612df2c15ecd79793ae9e1da55f073846192b68a855df3fa08cb20625a22cb61","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":19,"collection":null,"type":"notebook","body":{"titling":"auto","title":"The difference between d3.nest(), d3.map() and data.map","cells":[{"id":0,"value":"md`# The difference between d3.nest(), d3.map() and data.map`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":"md`Am I the only one who can't get these straight?`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":110,"value":"md`Let's use all three on this sample dataset.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":108,"value":"data = [\n {'item':'Fork', 'items_sold': 1, 'row_id': 1, 'product_id': 'A30'},\n {'item':'Fork', 'items_sold': 2, 'row_id': 2, 'product_id': 'A30'},\n {'item':'Spoon', 'items_sold': 2, 'row_id': 3, 'product_id': 'B10'}\n]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":269,"value":"html`

Note Expand the results below to get a better look at what happened

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"md`## 1) d3.nest() – Do you want to consolidate your data?`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"md`Use nest when you want to group (or nest!) similar data together. This creates a new array with two properties: the key, which you define, and values, which contain all the original values under that matching key.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":256,"value":"md`**Function:**`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":223,"value":"d3.nest().key(d => d.item).entries(data)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":243,"value":"md`**Input:**`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":237,"value":"data","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":253,"value":"md`**Output:**`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":32,"value":"d3.nest().key(d => d.item).entries(data)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":133,"value":"md`You can also set specific values in the **rollup** function, like counting the number of items with each key by returning **d.length**.\n\nSo we can get the total number of orders by counting the number of times each product appears in the data using **rollup**:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":283,"value":"md`**Function:**`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":137,"value":"d3.nest().key(d => d.items_sold).rollup(d => d.length).entries(data)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":260,"value":"md`**Input:**`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":264,"value":"data","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":261,"value":"md`**Output:**`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":266,"value":"d3.nest().key(d => d.item).rollup(d => d.length).entries(data)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":231,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"md`## 2) d3.map() – Do you want to consolidate and access your data more easily? `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"md`Use d3.map to group items together, creating a hashed array that can be accessed using handy functions like array.get(value).`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":66,"value":"md`Say we want to quickly get the product_id when all we know is the product name, \"Fork\". We can use d3.map to make that value more easily accessible.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":340,"value":"md`**Function:**`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":39,"value":"{\n return d3.map(data, d => d.item)\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":118,"value":"md`This lets you more easily reference these values later using functions like \\`get\\`.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":120,"value":"{\n var mappedData = d3.map(data, d => d.item)\n return mappedData.get('Fork')\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":305,"value":"md`Say I want to get the product ID for forks. I can do this pretty easily now:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":309,"value":"{\n var mappedData = d3.map(data, d => d.item)\n return mappedData.get('Fork').product_id\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":53,"value":"md`## 3) data.map – Do you want to reduce your data and make another array?`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":55,"value":"md`This pulls out items we specify into a new array.\n\nLet's get a list of all the items:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":57,"value":"data.map(d => d.item)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":79,"value":"md`This means you can join them to make new html, for example.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":81,"value":"html`

${data.map(d => d.item).join('

')}`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":159,"value":"md`### Using nest and map together together`\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":161,"value":"md`As you can see in the above example, when we mapped the data by item, we got some repetitions. So we can combine this with nest, which will remove duplicates.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":165,"value":"d3.nest().key(d => d.item).entries(data).map(d => d.key).join('
')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":321,"value":"md`Now we can create a simple list like this:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":323,"value":"html`${d3.nest().key(d => d.item).entries(data).map(d => d.key).join('
')}`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":333,"value":"md`That's it! I hope that's useful. Since writing this and keeping it private a few weeks ago, I keep coming back to quickly reference these differences.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":330,"value":"html`