3e:null 3f:["$","title",null,{"children":"Learn D3: Data | Jordan Kanter | Observable"}] 45: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.46:[{"id":"cb1fa9dc3147e810a19f64ff1808f3f0f71d9730b593e1e1ef22e22a1bd3392dba8c3ae7c8efd54726f420bba89fceffe247021605d9668f4d93cca500476986","href":"https://static.observableusercontent.com/files/cb1fa9dc3147e810a19f64ff1808f3f0f71d9730b593e1e1ef22e22a1bd3392dba8c3ae7c8efd54726f420bba89fceffe247021605d9668f4d93cca500476986","name":"temperature.csv","type":"text/csv","lastModified":1685282710469.617,"size":5873}] 43:{"id":"8b2d59670d6f7127","slug":null,"title":"Learn D3: Data","thumbnail":"49e3b8e7b5c25c76853ac31b4ed41e895e2facb91573182f4e68e995d0ccb899","access_level":"public","create_time":"$D2023-05-28T14:05:10.469Z","update_time":"$D2023-05-28T14:23:32.828Z","view_time":null,"first_public_time":"$D2023-05-28T14:05:10.469Z","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":"2ada5078780e6af5","login":"jordankanter","name":"Jordan Kanter","avatar_url":"https://avatars-next.observableusercontent.com/85a14bf092886e0a8ce520ca8b196adb4c018bf790a297ed39af574977267204","tier":"starter_2024","bio":"","following":false},"version":942,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"f010e68bc516b02b","login":"jordankanter","name":"Jordan Kanter","avatar_url":"https://avatars-next.observableusercontent.com/85a14bf092886e0a8ce520ca8b196adb4c018bf790a297ed39af574977267204","tier":null,"bio":"","following":false}],"members":[{"type":"individual","id":"f010e68bc516b02b","login":"jordankanter","name":"Jordan Kanter","avatar_url":"https://avatars-next.observableusercontent.com/85a14bf092886e0a8ce520ca8b196adb4c018bf790a297ed39af574977267204","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":"$45","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":12,"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://github.com/d3/d3-dsv/blob/main/README.md#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":879,"value":"manipulated = 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":881,"value":"manipulated[0].temperature * (5 / 4) - 32\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":901,"value":"temp = 24","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":888,"value":"conv_to_c = (temp - 32) * (5 / 9)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":904,"value":"conv_to_f = (temp * (9/5)) + 32","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 = \"melissa\"","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":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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":913,"value":"// generate an array of random length with random numbers between 0 and the length of the array\nrandsumarray = {\n let a = []\n let s = Math.random() * 1000\n for (let i = 0; i < s; ++i) {\n let val = Math.floor(Math.random() * s)\n a.push(val)\n }\n return a\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":933,"value":"Histogram(randsumarray)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":936,"value":"// I would expect the ration of mean to length to stay approximately constant \nsummarystats = {\n let stats = {\n min: d3.min(randsumarray),\n median: d3.median(randsumarray),\n mean: d3.mean(randsumarray),\n max: d3.max(randsumarray),\n ratio_mean_to_length: d3.mean(randsumarray) / randsumarray.length \n }\n return stats\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":910,"value":"sum","pinned":true,"hidden":false,"mode":"ojs","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://github.com/d3/d3-dsv/blob/master/README.md#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":"$W46","stdlib":"1"}} 44:"$43:body"