30:[{"id":"3146ee9003e3e8444950339a05b11b935107c255ae2e76d350381b2cffd2fdae199a3194d1ba6352c6ce09bf8c3d335df655a91dbd6acd8ffd626e1387147d5e","href":"https://static.observableusercontent.com/files/3146ee9003e3e8444950339a05b11b935107c255ae2e76d350381b2cffd2fdae199a3194d1ba6352c6ce09bf8c3d335df655a91dbd6acd8ffd626e1387147d5e","name":"my_csv.csv","type":"text/csv","lastModified":1612632607252.588,"size":78}] 2e:{"title":"Chapter 3 Data","cells":[{"id":222,"value":"banner2(\"Chapter 3\", \"Data\", \"hsl(189, 29%, 82%)\") //banner(\"Chapter 3 - Data\", \"hsl(189, 29%, 82%)\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":0,"value":"md`This notebook is the accompanying questions (and answers!) for https://next.observablehq.com/@d3/learn-d3-data?collection=@d3/learn-d3\n\nComing from an \\`R\\` background, one of the hardest things to wrap my head around while learning JavaScript is that now we have to think about _when_ functions are being executed. Reading makes it easy to just use the keyboard shortcut and copy the code from Mike's notebook needed to upload a CSV [I did so in the chunk below].`","pinned":true,"hidden":false,"mode":"ojs"},{"id":30,"value":"// The csvParse function has two arguments\n// the first argument is the file to parse (our stringified csv)\n// and the second argument is the function to use for parsing (autodetection)\n\n// the FileAttachment function is asynchronous -- it returns a promise that may or may not resolve later\n// but csvParse wants a file NOW so we use await to tell csvParse that the FileAttachment function needs to run first.\nd3.csvParse(await FileAttachment(\"my_csv.csv\").text(), d3.autoType)","pinned":true,"hidden":false,"mode":"ojs"},{"id":70,"value":"md `#### The cell above is anonymous. Name it \\`data\\` so we can reference it in other cells!`","pinned":false,"hidden":false,"mode":"ojs"},{"id":72,"value":"hideSolution(md `~~~\ndata = d3.csvParse(await FileAttachment(\"my_csv.csv\").text(), d3.autoType)\n~~~`)","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"md `#### Mike's notebook walked us through how to upload a csv in Observable, how would you do this in a non-observable context? Download the CSV and try it for yourself!`","pinned":false,"hidden":false,"mode":"ojs"},{"id":91,"value":"/*\n I think it's useful to take a stab at this one in a blank index.html - here's a template you can use:\n\n \n \n \n\n \n\n*/","pinned":true,"hidden":false,"mode":"ojs"},{"id":39,"value":"hideSolution(md\n \n` You might, like me, be tempted to try \n\n ~~~\n const my_csv = d3.csv(\"my_csv.csv\", function(data) { console.log(data); });\n ~~~\n\n So that we can use \\`my_csv\\` later (by calling \\`data(my_csv)\\` as we will learn about shortly)\n\n Now instead of loading the dataset, we create a promise to be referenced by functions later on. \n Adding this layer of abstraction allows for ....TODO\n\n~~~\n\n \n\n\n\n~~~`)","pinned":false,"hidden":false,"mode":"ojs"},{"id":53,"value":"md`This exercise makes it clear that while reading in your data to make a plot might seem like the first step to graphing, the process is not quite so linear. Part of the beauty of Observable is the runtime lets us seperate everything out: Observable worries about _when_ things run for us, while in the traditional code we have to remember to plot our data _inside_ the asynchronous function of parsing the data.\n\nNow, doesn't that make you appreciate how easy that was in Observable? Because I sure do!`","pinned":false,"hidden":false,"mode":"ojs"},{"id":77,"value":"md`#### Using what we learned, how would you find the range of Y in our dataset?`","pinned":false,"hidden":false,"mode":"ojs"},{"id":88,"value":"// find the extent","pinned":true,"hidden":false,"mode":"ojs"},{"id":80,"value":"hideSolution(md `~~~\nd3.extent(data, d => d.Y)\n~~~`)","pinned":false,"hidden":false,"mode":"ojs"},{"id":110,"value":"md `#### How do we get all the Y values within our dataset? Name that cell Y`","pinned":false,"hidden":false,"mode":"ojs"},{"id":117,"value":"//fixme -- by importing Y as data this will help us see our chart below! \nY = \"\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":113,"value":"hideSolution(md `~~~\nY = data.map(d => d.Y)\n~~~`)","pinned":false,"hidden":false,"mode":"ojs"},{"id":95,"value":"import {chart as simpleHistogram} with {Y as data} from \"@d3/histogram\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":96,"value":"simpleHistogram","pinned":true,"hidden":false,"mode":"ojs"},{"id":57,"value":"md `## Appendix`","pinned":false,"hidden":false,"mode":"ojs"},{"id":24,"value":"d3 = require(\"d3@6\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":34,"value":"import { hideSolution, styles } from \"@mayagans/chapter-2-learn-d3-by-example\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":208,"value":"styles","pinned":true,"hidden":false,"mode":"ojs"},{"id":44,"value":"Inspector = (await require('@observablehq/inspector')).Inspector","pinned":false,"hidden":false,"mode":"ojs"},{"id":218,"value":"import { banner, banner2 } from '@observablehq/bannertitles'","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W30","stdlib":"1","titling":"auto"}