30:T561,This notebook has a CSV file of daily temperature readings. I attached it using the ${keyStyled("Shift-Cmd-U")} [keyboard shortcut](/@observablehq/keyboard-shortcuts); you can also attach a file by dragging and dropping a file onto the file attachments pane, which is accessible through the notebook menu or by clicking the paperclip above.31:[{"id":"cb1fa9dc3147e810a19f64ff1808f3f0f71d9730b593e1e1ef22e22a1bd3392dba8c3ae7c8efd54726f420bba89fceffe247021605d9668f4d93cca500476986","href":"https://static.observableusercontent.com/files/cb1fa9dc3147e810a19f64ff1808f3f0f71d9730b593e1e1ef22e22a1bd3392dba8c3ae7c8efd54726f420bba89fceffe247021605d9668f4d93cca500476986","name":"temperature.csv","type":"text/csv","lastModified":1579806813026.088,"size":5873}] 2e:{"title":"Learn D3: Data","cells":[{"id":105,"value":"# Learn D3: Data\n\nThere are a variety of ways to [access data](/@observablehq/introduction-to-data) in Observable. But as we’re just starting out, let’s use the simplest: [file attachments](/@observablehq/file-attachments).","pinned":false,"hidden":false,"mode":"md"},{"id":5,"value":"$30","pinned":false,"hidden":false,"mode":"md"},{"id":6,"value":"FileAttachment(\"temperature.csv\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":10,"value":"The FileAttachment function merely returns a handle that allows you to choose the desired representation, such as a [blob](https://developer.mozilla.org/en-US/docs/Web/API/Blob), a [buffer](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer), or (UTF-8 encoded) text. For a text file, we can call *file*.text to get a promise to the file’s contents as a string.","pinned":false,"hidden":false,"mode":"md"},{"id":12,"value":"FileAttachment(\"temperature.csv\").text()","pinned":true,"hidden":false,"mode":"ojs"},{"id":14,"value":"Of course, more useful is to parse the text into objects with named *date* and *temperature* properties, which we can by calling *file*.csv (which uses [d3.csvParse](https://d3js.org/d3-dsv#csvParse) under the hood).\n\nClick the array below to inspect the objects.","pinned":false,"hidden":false,"mode":"md"},{"id":16,"value":"FileAttachment(\"temperature.csv\").csv()","pinned":true,"hidden":false,"mode":"ojs"},{"id":349,"value":"While Observable implicitly awaits promises across cells, we must await the *file*.csv promise because we wish to access the promised value within the same cell.","pinned":false,"hidden":false,"mode":"md"},{"id":18,"value":"CSV doesn’t encode any type information, so by default both the *date* and *temperature* properties are strings. This makes them tricky to work with. For example, if you tried to add two temperatures, it would concatenate them. Oops! 😝","pinned":false,"hidden":false,"mode":"md"},{"id":20,"value":"\"62.7\" + \"59.9\" // 122.6? Nope!","pinned":true,"hidden":false,"mode":"ojs"},{"id":22,"value":"To convert these strings into dates and numbers, we can set *file*.csv’s *typed* option to true. (This is equivalent to passing [d3.autoType](/@d3/d3-autotype) as the second argument to d3.csvParse, which calls d3.autoType for each row.)","pinned":false,"hidden":false,"mode":"md"},{"id":24,"value":"FileAttachment(\"temperature.csv\").csv({typed: true})","pinned":true,"hidden":false,"mode":"ojs"},{"id":561,"value":"If you inspect the array above, you’ll see teal dates (2011-10-16) and numbers (61.6) rather than blue strings (\"2011-10-16\" and \"61.6\"), confirming type conversion.","pinned":false,"hidden":false,"mode":"md"},{"id":199,"value":"Let’s briefly digress into the syntax of Observable cells. So far you’ve seen only [expression](https://2ality.com/2012/09/expressions-vs-statements.html) cells, which can be named or anonymous. Both types of cells can be inspected, but only named cells can be referenced from other cells.","pinned":false,"hidden":false,"mode":"md"},{"id":200,"value":"1 + 1","pinned":true,"hidden":false,"mode":"ojs"},{"id":206,"value":"name = \"fred\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":214,"value":"[...name].reverse().join(\"\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":217,"value":"For code that’s more complex than a simple expression, write a *block*, which is one or more statements surrounded by curly braces. Block cells, similar to functions, only produce a value if they [return](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/return) or [yield](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/yield). And like expression cells, named block cells can be referenced from other cells.","pinned":false,"hidden":false,"mode":"md"},{"id":235,"value":"sum = {\n let s = 0;\n for (let i = 0; i < 10; ++i) {\n s += i;\n }\n return s;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":64,"value":"Local variables, such as *s* above, are not visible to the rest of the notebook; only the returned value of a named cell is accessible from other cells. In this way Observable is akin to a spreadsheet: each cell defines a singular value.","pinned":false,"hidden":false,"mode":"md"},{"id":247,"value":"s // not defined!","pinned":true,"hidden":false,"mode":"ojs"},{"id":270,"value":"Getting back to the task at hand, here’s a more explicit way of fetching, parsing, and type-converting the CSV file in a cell named *data*. You might take this approach if your data isn’t compatible with d3.autoType. (If you’re unsure, don’t rely on automatic type inference or [consult the documentation](https://d3js.org/d3-dsv#autoType).)","pinned":false,"hidden":false,"mode":"md"},{"id":268,"value":"data = {\n const text = await FileAttachment(\"temperature.csv\").text();\n const parseDate = d3.utcParse(\"%Y-%m-%d\");\n return d3.csvParse(text, ({date, temperature}) => ({\n date: parseDate(date),\n temperature: +temperature\n }));\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":26,"value":"With the data conveniently represented, we can now get to work! For example, we can compute the extents of the dates and temperatures to get a sense of scope.","pinned":false,"hidden":false,"mode":"md"},{"id":289,"value":"d3.extent(data, d => d.date)","pinned":true,"hidden":false,"mode":"ojs"},{"id":291,"value":"d3.extent(data, d => d.temperature)","pinned":true,"hidden":false,"mode":"ojs"},{"id":318,"value":"And as we saw previously, we can inject into the [example histogram](/@d3/histogram) for a quick sense of the temperature distribution.","pinned":false,"hidden":false,"mode":"md"},{"id":311,"value":"import {Histogram} from \"@d3/histogram\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":312,"value":"Histogram(data, {value: d => d.temperature, width, height})","pinned":true,"hidden":false,"mode":"ojs"},{"id":621,"value":"A temperate climate! Ah, San Francisco. 🌤\n\nA subtle consideration when working with data in Observable is whether to put code in a single cell or separate cells. A good rule of thumb is that a cell should either define a named value to be referenced by other cells (such as *data* above), or it should display something informative to the reader (such as this prose, the chart above, or cells which inspect the data).","pinned":false,"hidden":false,"mode":"md"},{"id":790,"value":"A critical implication of this rule is that you should avoid implicit dependencies between cells: only depend on what you can name.","pinned":false,"hidden":false,"mode":"md"},{"id":791,"value":"Why? A notebook’s [dataflow](/@observablehq/how-observable-runs) is built from its cell references. If a cell doesn’t have a name, it cannot be referenced and cells that implicitly depend on its effect may run *before* it. (Cells run in topological order, not top-to-bottom.) Implicit dependencies lead to nondeterministic behavior 😱 during development, and possible errors 💥 when the notebook is reloaded!","pinned":false,"hidden":false,"mode":"md"},{"id":46,"value":"For example, if one cell defines an array and a second cell modifies it in-place, other cells may see the array before *or* after the mutation. To avoid this nondeterminism, make the dependency explicit by giving the second cell a name and copying the array using [Array.from](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/from) or [*array*.map](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map). Or combine the two cells so that only the already-modified array is visible to other cells.","pinned":false,"hidden":false,"mode":"md"},{"id":495,"value":"With our data so prepared, let’s move towards graphics!\n\nNext","pinned":false,"hidden":false,"mode":"md"},{"id":40,"value":"---\n\n## Appendix","pinned":false,"hidden":false,"mode":"md"},{"id":315,"value":"height = 200","pinned":true,"hidden":false,"mode":"ojs"},{"id":37,"value":"import {keyStyled} from \"@mbostock/keys\"","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}