30:[] 2e:{"title":"D3 Data Intro","cells":[{"id":0,"value":"# D3 Data Intro","pinned":false,"hidden":false,"mode":"md"},{"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"},{"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"},{"id":66,"value":"Import data for examples from NYU Vis notebook:","pinned":false,"hidden":false,"mode":"md"},{"id":29,"value":"import {data, favoriteBrands, abbreviationToBrandName} from \"@nyuvis/data-transformation\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":682,"value":"data","pinned":true,"hidden":false,"mode":"ojs"},{"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"},{"id":189,"value":"isBadCereal = // write function here","pinned":true,"hidden":false,"mode":"ojs"},{"id":689,"value":"data[15].rating","pinned":true,"hidden":false,"mode":"ojs"},{"id":183,"value":"isBadCereal(data[15]) // should be true","pinned":true,"hidden":false,"mode":"ojs"},{"id":691,"value":"data[3].rating","pinned":true,"hidden":false,"mode":"ojs"},{"id":160,"value":"isBadCereal(data[3]) // should be false","pinned":true,"hidden":false,"mode":"ojs"},{"id":135,"value":"solution(\"isBadCereal = d => d.rating < 50\")","pinned":false,"hidden":false,"mode":"ojs"},{"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\nFill in the return value for the arrow function to sort `data` in ascending order based on the cereal's calories.","pinned":false,"hidden":false,"mode":"md"},{"id":198,"value":"data.sort((a, b) => // write your answer here) ","pinned":true,"hidden":false,"mode":"ojs"},{"id":211,"value":"solution(\"data.sort((d1, d2) => d1.calories - d2.calories)\")","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":36,"value":"viewof aq_data = aq.from(data).view(5)","pinned":true,"hidden":false,"mode":"ojs"},{"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"},{"id":57,"value":"aq_data.filter(currentElement => currentElement.type === 'H').view()","pinned":true,"hidden":false,"mode":"ojs"},{"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"},{"id":62,"value":"aq_data.filter(currentElement => currentElement.type === 'H').objects()","pinned":true,"hidden":false,"mode":"ojs"},{"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"},{"id":818,"value":"favoriteBrands","pinned":true,"hidden":false,"mode":"ojs"},{"id":79,"value":"aq_data.filter(d => favoriteBrands.has(d.mfr)).objects()","pinned":true,"hidden":false,"mode":"ojs"},{"id":82,"value":"aq_data.filter(aq.escape(d => favoriteBrands.has(d.mfr))).objects()","pinned":true,"hidden":false,"mode":"ojs"},{"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"},{"id":88,"value":"aq_data.array('sodium')","pinned":true,"hidden":false,"mode":"ojs"},{"id":820,"value":"abbreviationToBrandName","pinned":true,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"id":108,"value":"**sort and slice** ","pinned":false,"hidden":false,"mode":"md"},{"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"},{"id":113,"value":"aq_cleaned\n .filter(d => d.brand === 'Kelloggs')\n .orderby('rating')\n .slice(0,3)\n .array('name')","pinned":true,"hidden":false,"mode":"ojs"},{"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"},{"id":115,"value":"aq_cleaned.view(5)","pinned":true,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"id":734,"value":"// write answer here","pinned":true,"hidden":false,"mode":"ojs"},{"id":272,"value":"solution(\"d3.extent(data, d => d.calories)\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":277,"value":"**Q4.** Use a d3 function to calculate the median rating of cereals.","pinned":false,"hidden":false,"mode":"md"},{"id":297,"value":"// write answer here","pinned":true,"hidden":false,"mode":"ojs"},{"id":281,"value":"solution(\"d3.median(data, d => d.rating)\")","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":543,"value":"**Debugging Scales:** `visualizeTicks()` provides a nice way to help debug the domain of your scales.","pinned":false,"hidden":false,"mode":"md"},{"id":547,"value":"import {visualizeTicks} from \"@d3/continuous-scales\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":765,"value":"First, here's a basic 0-10 scale:","pinned":false,"hidden":false,"mode":"md"},{"id":548,"value":"visualizeTicks(d3.scaleLinear().domain([0, 10]))","pinned":true,"hidden":false,"mode":"ojs"},{"id":746,"value":"Here are examples of visualizing the Fahrenheit scale:","pinned":false,"hidden":false,"mode":"md"},{"id":567,"value":"visualizeTicks(d3.scaleLinear().domain([32, 212]))","pinned":true,"hidden":false,"mode":"ojs"},{"id":563,"value":"visualizeTicks(d3.scaleLinear().domain([32, 212]).nice())","pinned":true,"hidden":false,"mode":"ojs"},{"id":767,"value":"### Exercises\nFor our exercise, I'll import the data from the NYU Vis notebook and copy the linear and band scales. \n\nNote that I'm changing the variable names for width and height (sometimes these get populated based on the Observable width and height), so it's best to use something different if you have it defined in a separate cell (rather than all of the code in a single cell).","pinned":false,"hidden":false,"mode":"md"},{"id":465,"value":"import {scores} from \"@nyuvis/d3-introduction\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":770,"value":"scores","pinned":true,"hidden":false,"mode":"ojs"},{"id":839,"value":"x_width = width","pinned":true,"hidden":false,"mode":"ojs"},{"id":837,"value":"x = d3.scaleLinear()\n .domain([0, d3.max(scores, d => d.score)])\n .range([0, x_width])","pinned":true,"hidden":false,"mode":"ojs"},{"id":808,"value":"visualizeTicks(x)","pinned":true,"hidden":false,"mode":"ojs"},{"id":841,"value":"y_height = 100","pinned":true,"hidden":false,"mode":"ojs"},{"id":848,"value":"y = d3.scaleBand()\n .domain(scores.map(d => d.name))\n .range([0, y_height])\n .padding(0.2)","pinned":true,"hidden":false,"mode":"ojs"},{"id":810,"value":"visualizeTicks(y)","pinned":true,"hidden":false,"mode":"ojs"},{"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. 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 cell 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"},{"id":511,"value":"// write code here","pinned":true,"hidden":false,"mode":"ojs"},{"id":475,"value":"solution(\"scores.map(d => y(d.name))\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":514,"value":"**Q7.** Edit the cell 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"},{"id":520,"value":"// write code here","pinned":true,"hidden":false,"mode":"ojs"},{"id":490,"value":"solution(\"scores.map(d => x(d.score))\")","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":528,"value":"// write code here","pinned":true,"hidden":false,"mode":"ojs"},{"id":529,"value":"solution(\"y.bandwidth()\")","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":38,"value":"# Appendix","pinned":false,"hidden":false,"mode":"md"},{"id":41,"value":"import {aq, op} from \"@uwdata/arquero\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":43,"value":"d3 = require(\"d3@7\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":131,"value":"import {solution} from \"@nyuvis/d3-introduction\"","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W30","stdlib":"1","titling":"auto"}