40:null 41:["$","title",null,{"children":"Learn D3: Data | Raquel Arguedas's Workspace | Observable"}] 47: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.48:[{"id":"cb1fa9dc3147e810a19f64ff1808f3f0f71d9730b593e1e1ef22e22a1bd3392dba8c3ae7c8efd54726f420bba89fceffe247021605d9668f4d93cca500476986","href":"https://static.observableusercontent.com/files/cb1fa9dc3147e810a19f64ff1808f3f0f71d9730b593e1e1ef22e22a1bd3392dba8c3ae7c8efd54726f420bba89fceffe247021605d9668f4d93cca500476986","name":"temperature.csv","type":"text/csv","lastModified":1722415982436.41,"size":5873}] 45:{"id":"516d0c05d1da5871","slug":null,"title":"Learn D3: Data","thumbnail":"deedff680bfc779d74b0e7cbe8cc0bbdd8522e574e130d2835842860c4634726","access_level":"public","create_time":"$D2024-07-31T08:53:02.436Z","update_time":"$D2024-07-31T08:58:16.463Z","view_time":null,"first_public_time":"$D2024-07-31T08:53:02.436Z","has_unpublished_edits":null,"fork":{"id":"f9510e4b68b21a4c","slug":"learn-d3-data","title":"Learn D3: Data","owner":{"id":"863951e3ebe4c0ae","login":"d3","name":"D3"}},"stars":0,"starred":false,"owner":{"type":"team","id":"dbbcc57a8d635f95","login":"raquel-arguedas-ws","name":"Raquel Arguedas's Workspace","avatar_url":"https://avatars-next.observableusercontent.com/1a5b0d416613dd9176f771b1ea95cc10732aa4efb3e4412754ed50e77230ada2","tier":"starter_2024","bio":"","following":false},"version":897,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"cd69b0235a6b5a76","login":"raquel-arguedas","name":"Raquel Arguedas","avatar_url":"https://avatars-next.observableusercontent.com/5e1d5ff05d0fb2e972551f6a2af8f8793fde29d89791d605d9af3208b82d70e7","tier":null,"bio":"","following":false}],"members":[{"type":"individual","id":"cd69b0235a6b5a76","login":"raquel-arguedas","name":"Raquel Arguedas","avatar_url":"https://avatars-next.observableusercontent.com/5e1d5ff05d0fb2e972551f6a2af8f8793fde29d89791d605d9af3208b82d70e7","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"$47","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"FileAttachment(\"temperature.csv\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":887,"value":"FileAttachment(\"temperature.csv\").text()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"FileAttachment(\"temperature.csv\").csv()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"\"62.7\" + \"59.9\" // 122.6? Nope!","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":24,"value":"FileAttachment(\"temperature.csv\").csv({typed: true})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":200,"value":"1 + 1","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":206,"value":"name = \"fred\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":214,"value":"[...name].reverse().join(\"\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":896,"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":247,"value":"s // not defined!","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":289,"value":"d3.extent(data, d => d.date)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":291,"value":"d3.extent(data, d => d.temperature)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":311,"value":"import {Histogram} from \"@d3/histogram\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":312,"value":"Histogram(data, {value: d => d.temperature, width, height})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":495,"value":"With our data so prepared, let’s move towards graphics!\n\nNext","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":40,"value":"---\n\n## Appendix","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":315,"value":"height = 200","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":37,"value":"import {keyStyled} from \"@mbostock/keys\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W48","stdlib":"1"}} 46:"$45:body"