3e:null 3f:["$","title",null,{"children":"Learn D3: Data | weifeng.zhang | 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":1666329709121.374,"size":5873}] 43:{"id":"dcf6c3910e8f2919","slug":null,"title":"Learn D3: Data","thumbnail":"e5130edb249ab4cb4c8d93c95fc4336838cde31bffa450251468dc43b96eb04d","access_level":"public","create_time":"$D2022-10-21T05:21:49.121Z","update_time":"$D2022-10-21T06:16:49.337Z","view_time":null,"first_public_time":"$D2022-10-21T05:21:49.121Z","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":"6b3568667956ea80","login":"wulakaka","name":"weifeng.zhang","avatar_url":"https://avatars-next.observableusercontent.com/6d2a0eb5a21e76cf20c6c7664341f21aa82a675d80335a7d04c51ee172929a6b","tier":"starter_2024","bio":"","following":false},"version":918,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"6635d799ab4ae335","login":"wulakaka","name":"weifeng.zhang","avatar_url":"https://avatars-next.observableusercontent.com/6d2a0eb5a21e76cf20c6c7664341f21aa82a675d80335a7d04c51ee172929a6b","tier":null,"bio":"","following":false}],"members":[{"type":"individual","id":"6635d799ab4ae335","login":"wulakaka","name":"weifeng.zhang","avatar_url":"https://avatars-next.observableusercontent.com/6d2a0eb5a21e76cf20c6c7664341f21aa82a675d80335a7d04c51ee172929a6b","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":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.\n\n让我们简单地转到Observable单元格的语法。目前只看到了[表达式](https://2ality.com/2012/09/expressions-vs-statements.html)单元格。它可以是具名的或者是匿名的。两种类型的单元格都可以被检查，但是只有具名的单元格可以被其他单元格引用。","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.\n\n代码比表达式更灵活，写一个*块*，用大括号包围一个或多个语句。块单元格，类似于函数，只产生一个值，如果return或yeild一个值的话。像表达式单元格一样，具名的块可以被其他单元格引用。","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":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.\n\n本地变量对于其他单元格来说是不可见的。只有返回的值可以被其他单元格访问。这种情况下，Observable类似于电子表格，每个单元格定义一个单一值。\nfs","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://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":913,"value":"在Observable中处理数据时，一个微妙的考虑因素是将代码放在一个单元格中还是多个单独的单元格。一个好的经验法则是，一个单元格定义一个可以被其他单元格引用的具名的值（比如上面的*data*），或者它应该向读者显示一些信息（例如这篇文章，上面的图表或检查数据的单元格）。","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","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":910,"value":"此规则的一个关键含义是，应避免单元格之间的隐式依赖关系：仅依赖于你可以命名的内容。","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","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":907,"value":"为什么？笔记的数据流是基于它单元格的引用。如果一个单元格没有命名，它不可以被引用，并且隐式依赖它效果的单元格可以先于它运行。（单元格以拓扑顺序运行，而不是自上而下。）隐式依赖关系会导致开发过程中的非确定性行为，并在重新加载笔记时可能出现错误。","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","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":916,"value":"比如，如果一个单元格定义了一个数组，然后另一个单元格就地修改了它，其它单元格可用会看到修改前或修改后的数组。为了避免这种不确定性，通过给第二的单元格命名并使用 Array.from 或 Array.map 复制数组来显式依赖。或者结合两个单元格，这样只有更改过后的数组对于其他单元格来说是可见的。","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","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"