25:["$","title",null,{"children":"Week 4 Notebook - D3 Data Intro | Yasasi's Workspace | Observable"}] 49:[] 29:{"id":"291527853634d626","slug":null,"title":"Week 4 Notebook - D3 Data Intro","thumbnail":"65ec165c319053ed2014624de18f1ced533bc6003fffb5e03b129e43b9e6d33c","access_level":"public","create_time":"$D2024-01-29T20:11:33.151Z","update_time":"$D2024-01-29T21:08:10.188Z","view_time":null,"first_public_time":"$D2024-01-29T20:11:33.151Z","has_unpublished_edits":null,"fork":{"id":"a59e6dce080cb275","slug":"d3-data-intro","title":"D3 Data Intro","owner":{"id":"449a34042f144222","login":"oducs-vis","name":"ODUCS Vis"}},"stars":0,"starred":false,"owner":{"type":"team","id":"e26dec5b210658ec","login":"yasasi-ws","name":"Yasasi's Workspace","avatar_url":"https://avatars-next.observableusercontent.com/9bb55488c22627021635c7c9a1f1289ccde3d037f977ac81fe0a30fad61949f2","tier":"starter_2024","bio":"","following":false},"version":830,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"a89e2215d2e5b27a","login":"yasasi","name":"Yasasi","avatar_url":"https://avatars-next.observableusercontent.com/8be37226acf74e1d3cd0f8a7ae9b0fd0a4a439e518dc41009dd8157bb15e5d47","tier":null,"bio":"","following":false}],"members":[{"type":"individual","id":"a89e2215d2e5b27a","login":"yasasi","name":"Yasasi","avatar_url":"https://avatars-next.observableusercontent.com/8be37226acf74e1d3cd0f8a7ae9b0fd0a4a439e518dc41009dd8157bb15e5d47","tier":null,"role":"editor"},{"type":"team","id":"e26dec5b210658ec","login":"yasasi-ws","name":"Yasasi's Workspace","avatar_url":"https://avatars-next.observableusercontent.com/9bb55488c22627021635c7c9a1f1289ccde3d037f977ac81fe0a30fad61949f2","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Week 4 Notebook - D3 Data Intro","cells":[{"id":0,"value":"# Week 4 Notebook - D3 Data Intro","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":5,"value":"## D3 - First Things\n\n[After Vega-Lite: What's Next?](https://observablehq.com/@observablehq/after-vega-lite) - Why D3? Go beyond basic chart types, add animation and interactivity, customize visual presentation\n\n[Learn D3: By Example](https://observablehq.com/@d3/learn-d3-by-example?collection=@d3/learn-d3) - Use the [D3 Gallery](https://observablehq.com/@d3/gallery) and other examples to tinker and learn how the code is put together.\n\n[Learn D3 Collection](https://observablehq.com/collection/@d3/learn-d3) - notebooks created by Mike Bostock (creator of D3) to provide an intro to D3\n\n[D3 API Reference](https://d3js.org/api)\n\nNYU Visualization [Guides and Examples Collection](https://observablehq.com/collection/@nyuvis/guides-and-examples) -- we'll be using these to walk through D3","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":9,"value":"## NYU Visualization - JavaScript Basics\n\nhttps://observablehq.com/@nyuvis/javascript-basics?collection=@nyuvis/guides-and-examples","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":66,"value":"Import data for examples from NYU Vis notebook:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":29,"value":"import {data, favoriteBrands, abbreviationToBrandName} from \"@nyuvis/data-transformation\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":682,"value":"data","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":143,"value":"### Exercises\n\n**Q1.** We've imported the `data` variable from the data-transformation notebook that contains information about cereals. Take a look at the preview of the table in the \"Data Transformation\" section below.\n\nWe want a function that given a row of data will tell us if the cereal is bad or not. \n\nCreate a function named `isBadCereal` using the arrow notation that returns `true` if the cereal's rating is less than 50 and `false` otherwise.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":189,"value":"isBadCereal = cereal => cereal.rating < 50","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":689,"value":"data[15].rating","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":183,"value":"isBadCereal(data[15]) // should be true","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":691,"value":"data[3].rating","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":160,"value":"isBadCereal(data[3]) // should be false","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":135,"value":"solution(\"isBadCereal = d => d.rating < 50\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":195,"value":"**Q2.** The [`sort()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort) function can take a compare function as a parameter. The compare function should take two parameters (usually `a` and `b`) and return a negative, 0, or positive value that will determine the sort order (negative means `a` is sorted before `b`). \n\nUse arrow notation to write the sort function that will sort `data` based on the cereal's calories.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":198,"value":"data.sort((a, b) => a.calories - b.calories)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":211,"value":"solution(\"data.sort((d1, d2) => d1.calories - d2.calories)\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"## NYU Visualization - Data Transformation\n\nhttps://observablehq.com/@nyuvis/data-transformation?collection=@nyuvis/guides-and-examples\n\nThe NYU notebook will show you how to do various functions using d3 methods. Below, we'll look at how to do some of the same functions using Arquero.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":36,"value":"viewof aq_data = aq.from(data).view(5)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":46,"value":"**filter** \n\nThe NYU notebook demonstrates using `filter()` to grab only the hot (H) cereals: \n`data.filter(currentElement => currentElement.type === 'H')`\n\nThe Arquero code to do this is very similar.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":57,"value":"aq_data.filter(currentElement => currentElement.type === 'H').view()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":59,"value":"**objects():** If we want to get the array of objects (like is produced from the standard JavaScript) rather than view the table, use `objects()` instead of `view()`","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":62,"value":"aq_data.filter(currentElement => currentElement.type === 'H').objects()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":72,"value":"**aq.escape():** Another example in the NYU notebook used `filter()` to grab only those cereals from certain brands (those in the `favoriteBrands` set): \n`data.filter(d => favoriteBrands.has(d.mfr))`\n\nWe'll need to use `aq.escape()` for Arquero to be able to use the `favoriteBrands` variable. I'll first show without using it, so you can see what the wrong result is.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":79,"value":"aq_data.filter(d => favoriteBrands.has(d.mfr)).objects()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":82,"value":"aq_data.filter(aq.escape(d => favoriteBrands.has(d.mfr))).objects()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":84,"value":"**map** \n\nFirst, the NYU notebook uses `map()` to grab data from a particular column: \n`data.map(d => d.sodium)`\n\nWith Arquero, we can do the same thing with `array()`","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":88,"value":"aq_data.array('sodium')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":91,"value":"Then the NYU notebook uses `map()` to modify the data, creating the `cleanedData` variable:\n\n```js\ncleanedData = data.map(currentElement => ({\n 'name': currentElement.name,\n 'rating': currentElement.rating,\n 'type': currentElement.type === \"H\" ? \"hot\" : \"cold\",\n 'shelf': currentElement.shelf,\n 'brand': abbreviationToBrandName[currentElement.mfr]\n}))\n```\n\nWith Arquero, we can use `derive()` to create new columns with the modified data and then `select()` to keep only the columns we want. Note that with `derive()` we can overwrite the original column.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":98,"value":"viewof aq_cleaned = aq_data\n .derive({type: currentElement => currentElement.type === \"H\" ? \"hot\" : \"cold\", \n brand: aq.escape(currentElement => abbreviationToBrandName[currentElement.mfr])})\n .select('name', 'rating', 'type', 'shelf', 'brand')\n .view({height:150})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":108,"value":"**sort and slice** ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":632,"value":"Create an array of strings containing the names of the three Kelloggs cereals that have the lowest ratings.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":113,"value":"aq_cleaned\n .filter(d => d.brand === 'Kelloggs' || d.brand === 'General Mills')\n .orderby('rating')\n .slice(0,3)\n .array('name')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":635,"value":"Note that Arquero's `orderby()` does not have the same property as JavaScript's `sort()` of modifying the original data. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":115,"value":"aq_cleaned.view(5)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":50,"value":"## NYUVis D3 Methods\nhttps://observablehq.com/@nyuvis/data-transformation?collection=@nyuvis/guides-and-examples#cell-359\n\nWe'll just go over the \"min, max, extent, sum, mean, and median\" section. You can look at the rest, but there are equivalent Arquero ways of doing those.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":269,"value":"### Exercises\n\n**Q3.** Use a d3 function to determine the range of calories in the cereal dataset.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":734,"value":"d3.extent(data, d => d.calories)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":272,"value":"solution(\"d3.extent(data, d => d.calories)\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":277,"value":"**Q4.** Use a d3 function to calculate the median rating of cereals.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":297,"value":"d3.mean(data, d => d.rating)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":281,"value":"solution(\"d3.median(data, d => d.rating)\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"value":"## SVG and D3 Basics\nhttps://observablehq.com/@nyuvis/d3-introduction?collection=@nyuvis/guides-and-examples\n\nWe're going to jump down to the Scales section of the notebook, https://observablehq.com/@nyuvis/d3-introduction?collection=@nyuvis/guides-and-examples#cell-216\n\n**domain vs. range:** A scale's *domain* defines its inputs and the *range* defines its outputs. Typically, the *input to a scale is a value from the data*, like population, and the *output is a value for a visual channel*, like bar length.\n\nlinear scale - continuous domain to continuous range \nband scale - discrete domain to continuous range \nordinal scale - discrete domain to discrete range (colormap)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":543,"value":"**Debugging Scales:** `visualizeTicks()` provides a nice way to help debug the domain of your scales.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":547,"value":"import {visualizeTicks} from \"@d3/continuous-scales\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":765,"value":"First, here's a basic 0-10 scale:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":548,"value":"visualizeTicks(d3.scaleLinear().domain([0, 10]))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":746,"value":"Here are examples of visualizing the Fahrenheit scale:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":567,"value":"visualizeTicks(d3.scaleLinear().domain([32, 212]))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":563,"value":"visualizeTicks(d3.scaleLinear().domain([32, 212]).nice())","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":767,"value":"### Exercises\nFor our exercise, I'll copy over a couple of the variables from the NYU Vis notebook.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":465,"value":"import {x, scores, y} from \"@nyuvis/d3-introduction\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":777,"value":"```\nx = d3.scaleLinear()\n .domain([0, maxScore])\n .range([0, width])\n ```","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":770,"value":"scores","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":823,"value":"height = 100","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":779,"value":"```\ny = d3.scaleBand()\n .domain(names)\n .range([0, height])\n .padding(0.2)\n ```","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":462,"value":"**Q6.** The NYU notebook has set up `x()` as a linear scale with the domain from student scores and `y()` as a band scale with the domain from the student name (`names` is an array containing the student names). This implies that we could create a horizontal bar chart (names distributed on the y-axis and scores on the x-axis).\n\nEdit the line below so that the cell will map the values in the `name` attribute of `scores` to its appropriate position along the y-axis. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":810,"value":"visualizeTicks(y)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":511,"value":"scores.map(d => y(d.name))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":475,"value":"solution(\"scores.map(d => y(d.name))\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":514,"value":"**Q7.** Edit the line below so that the cell will map the values in the `score` attribute of `scores` to its appropriate position along the x-axis. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":808,"value":"visualizeTicks(x)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":520,"value":"scores.map(d => x(d.score))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":490,"value":"solution(\"scores.map(d => x(d.score))\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":495,"value":"**Q8.** For the horizontal bar chart, what should the height of each bar be? \n(In a horizontal bar chart, all bars will be the same height -- the width is what will vary based on the data.)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":528,"value":"y.bandwidth()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":529,"value":"solution(\"y.bandwidth()\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":672,"value":"We'll look at how to use this information in making a D3 chart next time.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":38,"value":"# Appendix","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":41,"value":"import {aq, op} from \"@uwdata/arquero\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":43,"value":"d3 = require(\"d3@7\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":131,"value":"import {solution} from \"@nyuvis/d3-introduction\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W49","stdlib":"1"}} 24:null