45:["$","title",null,{"children":"Lab 5 - Passing nested data in d3 | Devin Lange | Observable"}] 4d:T597,viewof PopulateTableExample2 = { let produceList = [ {"name": "banana", "minCost": 0.23, "maxCost": 4.89, "averageCost": 1.6083333333333332}, {"name": "apple", "minCost": 2.43, "maxCost": 6.89, "averageCost": 4.1575}, {"name": "celery", "minCost": 1.99, "maxCost": 6.89, "averageCost": 4.733333333333333}, {"name": "zebra", "minCost": 12399.99, "maxCost": 39999.99, "averageCost": 26199.989999999998} ]; let drawTable = (containerId) => { let rowSelect = d3.select('#' + containerId) .selectAll('tr') .data(produceList) .join('tr'); let cellSelect = rowSelect.selectAll('td') .data(d => [d.name, d.minCost, d.averageCost, d.maxCost]) .join('td') .text(d => d); } drawTable('tableBody-example2'); d3.select('#sort-product') .on('click', () => { produceList.sort((a, b) => { if (a.name > b.name) { return 1; } else if (a.name < b.name) { return -1; } return 0; }); drawTable('tableBody-example2'); }); // TODO - Add a click handler to the "Sort by Min Cost" button so it sort sorts the table by the min cost column. // TODO - if time: instead of just creating another anonymous function with hard-coded attributes. Make a generic function that either takes an attribute key, or accessor function so it is easy to sort on any attribute. }4e:T467,viewof PopulateTableExample3 = { let produceList = [ {"name": "banana", "minCost": 0.23, "maxCost": 4.89, "averageCost": 1.6083333333333332}, {"name": "apple", "minCost": 2.43, "maxCost": 6.89, "averageCost": 4.1575}, {"name": "celery", "minCost": 1.99, "maxCost": 6.89, "averageCost": 4.733333333333333}, {"name": "zebra", "minCost": 12399.99, "maxCost": 39999.99, "averageCost": 26199.989999999998} ]; let rowSelect; let cellSelect; let drawTable = (containerId) => { rowSelect = d3.select('#' + containerId) .selectAll('tr') .data(produceList) .join('tr'); cellSelect = rowSelect.selectAll('td') .data(d => [d.name, d.minCost, d.averageCost, d.maxCost]) .join('td') .text(d => d); } drawTable('tableBody-example3'); d3.select('#highlight-cell') .on('click', () => { cellSelect.filter(d => d < 5) .style('font-weight', 'bold'); }); // TODO - Add a click handler to the "Highlight rows..." button so that it sets the background color to the entire row if the maxCost attribute has a value less than 5. }4f:[] 49:{"id":"afeaeeec5279ed01","slug":"lab-5-passing-nested-data-in-d3","title":"Lab 5 - Passing nested data in d3","thumbnail":"c24455209885c959a62975a1aec7539c4a67b0f91aec6d554f28e358da8a54bb","access_level":"public","create_time":"$D2020-10-05T16:30:41.249Z","update_time":"$D2020-10-06T00:08:22.709Z","view_time":null,"first_public_time":"$D2020-10-05T17:32:01.185Z","has_unpublished_edits":null,"fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"b47d226bb8e0ec98","login":"dev-lan","name":"Devin Lange","avatar_url":"https://avatars-next.observableusercontent.com/ef478eeca21bea8b829dfd52d91780c2326f545b3926f360b26706aa3646a174","tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":142,"publish_version":142,"role":null,"authored":false,"authors":[{"type":"individual","id":"a3a49b04f9af68df","login":"dev-lan","name":"Devin Lange","avatar_url":"https://avatars-next.observableusercontent.com/ef478eeca21bea8b829dfd52d91780c2326f545b3926f360b26706aa3646a174","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"a3a49b04f9af68df","login":"dev-lan","name":"Devin Lange","avatar_url":"https://avatars-next.observableusercontent.com/ef478eeca21bea8b829dfd52d91780c2326f545b3926f360b26706aa3646a174","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Lab 5 - Passing nested data in d3","cells":[{"id":0,"value":"md`# Lab 5 - Passing nested data in d3`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":26,"value":"d3 = require('d3');","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"md`The way data is passed around in d3 can be one of the more confusing aspects of the library. However, it is also one of the powerful advantages of the tool. This lab will go over how data gets passed between selections. [Mike Bostock's article on nested selections](https://bost.ocks.org/mike/nest) is a very useful resourse. In particular the section **To Nest, or not to Nest**. You may have also seen [this simple example](https://observablehq.com/@dev-lan/nested-selections-with-joins) that demonstrates how to use nested selections and join.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":66,"value":"md`# Example 1 - passing data between selections`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"html `\n\n \n \n \n \n \n \n \n \n \n\n \n\n

Product	Min Cost	Average Cost	Max Cost

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"viewof PopulateTableExample = {\n let produceList = [\n {\"name\": \"apple\", \"minCost\": 2.43, \"maxCost\": 6.89, \"averageCost\": 4.1575},\n {\"name\": \"banana\", \"minCost\": 0.23, \"maxCost\": 4.89, \"averageCost\": 1.6083333333333332},\n {\"name\": \"celery\", \"minCost\": 1.99, \"maxCost\": 6.89, \"averageCost\": 4.733333333333333},\n {\"name\": \"zebra\", \"minCost\": 12399.99, \"maxCost\": 39999.99, \"averageCost\": 26199.989999999998}\n ];\n \n \n d3.select('#tableBody-example')\n .selectAll('tr')\n .data(produceList)\n .join('tr')\n .selectAll('td')\n .data(d => [d.name, d.minCost, d.averageCost, d.maxCost])\n .join('td')\n .text(d => d);\n \n \n// This could also be written as:\n// let rowSelect = d3.select('#tableBody-example')\n// .selectAll('tr')\n// .data(produceList)\n// .join('tr');\n \n// let cellSelect = rowSelect.selectAll('td')\n// .data(d => [d.name, d.minCost, d.averageCost, d.maxCost])\n// .join('td')\n// .text(d => d);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":46,"value":"md`# Exercise 1`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":45,"value":"html `\n\n \n \n \n \n \n \n \n \n \n\n \n\n

Product	Min Cost	Average Cost	Max Cost

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":54,"value":"viewof PopulateTableExercise1 = {\n let produceList = [\n {\"name\": \"apple\", \"costList\": [3.32, 3.99, 2.43, 6.89]},\n {\"name\": \"banana\", \"costList\": [1.32, 0.99, 1.43, 4.89, 0.79, 0.23]},\n {\"name\": \"celery\", \"costList\": [5.32, 1.99, 6.89]},\n {\"name\": \"zebra\", \"costList\": [12399.99, 39999.99]}\n];\n \n \n d3.select('#tableBody-exercise1')\n .selectAll('tr')\n .data(produceList)\n .join('tr')\n .selectAll('td')\n .data(d =>\n {\n // TODO - update the body of the function to compute these stats for your table on the fly.\n return []\n })\n .join('td')\n .text(d => d);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":70,"value":"md`# Example/Excersise 2 - sorting`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":76,"value":"html `\n\n\n\n \n \n \n \n \n \n \n \n \n \n\n

Product	Min Cost	Average Cost	Max Cost

Product	Min Cost	Average Cost	Max Cost