31:[] 2f:{"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"},{"id":2,"value":"md`Am I the only one who can't get these straight?`","pinned":false,"hidden":false,"mode":"ojs"},{"id":110,"value":"md`Let's use all three on this sample dataset.`","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":269,"value":"html`

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

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"md`## 1) d3.nest() – Do you want to consolidate your data?`","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":256,"value":"md`**Function:**`","pinned":false,"hidden":false,"mode":"ojs"},{"id":223,"value":"d3.nest().key(d => d.item).entries(data)","pinned":true,"hidden":false,"mode":"ojs"},{"id":243,"value":"md`**Input:**`","pinned":false,"hidden":false,"mode":"ojs"},{"id":237,"value":"data","pinned":false,"hidden":false,"mode":"ojs"},{"id":253,"value":"md`**Output:**`","pinned":false,"hidden":false,"mode":"ojs"},{"id":32,"value":"d3.nest().key(d => d.item).entries(data)","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":283,"value":"md`**Function:**`","pinned":false,"hidden":false,"mode":"ojs"},{"id":137,"value":"d3.nest().key(d => d.items_sold).rollup(d => d.length).entries(data)","pinned":true,"hidden":false,"mode":"ojs"},{"id":260,"value":"md`**Input:**`","pinned":false,"hidden":false,"mode":"ojs"},{"id":264,"value":"data","pinned":false,"hidden":false,"mode":"ojs"},{"id":261,"value":"md`**Output:**`","pinned":false,"hidden":false,"mode":"ojs"},{"id":266,"value":"d3.nest().key(d => d.item).rollup(d => d.length).entries(data)","pinned":false,"hidden":false,"mode":"ojs"},{"id":231,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":17,"value":"md`## 2) d3.map() – Do you want to consolidate and access your data more easily? `","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"id":340,"value":"md`**Function:**`","pinned":false,"hidden":false,"mode":"ojs"},{"id":39,"value":"{\n return d3.map(data, d => d.item)\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":118,"value":"md`This lets you more easily reference these values later using functions like \\`get\\`.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":120,"value":"{\n var mappedData = d3.map(data, d => d.item)\n return mappedData.get('Fork')\n}","pinned":true,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"id":53,"value":"md`## 3) data.map – Do you want to reduce your data and make another array?`","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":57,"value":"data.map(d => d.item)","pinned":true,"hidden":false,"mode":"ojs"},{"id":79,"value":"md`This means you can join them to make new html, for example.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":81,"value":"html`

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

')}`","pinned":true,"hidden":false,"mode":"ojs"},{"id":159,"value":"md`### Using nest and map together together`\n","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":165,"value":"d3.nest().key(d => d.item).entries(data).map(d => d.key).join('
')","pinned":true,"hidden":false,"mode":"ojs"},{"id":321,"value":"md`Now we can create a simple list like this:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":323,"value":"html`${d3.nest().key(d => d.item).entries(data).map(d => d.key).join('
')}`","pinned":true,"hidden":false,"mode":"ojs"},{"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"},{"id":330,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":167,"value":"md`##### Ignore below (Just loading D3 below)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"d3 = require('d3@v5')","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}