3f:null 40:["$","title",null,{"children":"3_Learn D3: Data | onepisya | Observable"}] 46:T547,该笔记本具有每日温度读数的CSV文件。我使用 ${keyStyled("Shift-Cmd-U")}[键盘快捷键 keyboard shortcut](/@observablehq/keyboard-shortcuts) 添加了它；您还可以通过将文件拖放到文件附件面板上来附加文件，该文件可以通过笔记本菜单访问或单击上方的纸条47:[{"id":"cb1fa9dc3147e810a19f64ff1808f3f0f71d9730b593e1e1ef22e22a1bd3392dba8c3ae7c8efd54726f420bba89fceffe247021605d9668f4d93cca500476986","href":"https://static.observableusercontent.com/files/cb1fa9dc3147e810a19f64ff1808f3f0f71d9730b593e1e1ef22e22a1bd3392dba8c3ae7c8efd54726f420bba89fceffe247021605d9668f4d93cca500476986","name":"temperature.csv","type":"text/csv","lastModified":1660579624021.64,"size":5873}] 44:{"id":"777dec00a71c2e86","slug":"learn-d3-data","title":"3_Learn D3: Data","thumbnail":"e5130edb249ab4cb4c8d93c95fc4336838cde31bffa450251468dc43b96eb04d","access_level":"public","create_time":"$D2022-08-15T16:07:04.021Z","update_time":"$D2022-08-16T08:47:34.320Z","view_time":null,"first_public_time":"$D2022-08-15T16:07:14.521Z","has_unpublished_edits":null,"fork":{"id":"f9510e4b68b21a4c","slug":"learn-d3-data","title":"Learn D3: Data","owner":{"id":"863951e3ebe4c0ae","login":"d3","name":"D3"}},"stars":1,"starred":false,"owner":{"type":"team","id":"0fe483e8c08c0572","login":"onepisya","name":"onepisya","avatar_url":"https://avatars-next.observableusercontent.com/f153ff05aa3994274d5a61ed6d97bdf9e0a9ab1fe7549a7e79705384d2fc880a","tier":"starter_2024","bio":"","following":false},"version":907,"publish_version":907,"role":null,"authored":false,"authors":[{"type":"individual","id":"821368b74f0848d2","login":"onepisya","name":"onepisya","avatar_url":"https://avatars-next.observableusercontent.com/f153ff05aa3994274d5a61ed6d97bdf9e0a9ab1fe7549a7e79705384d2fc880a","tier":null,"bio":"","following":false}],"members":[{"type":"individual","id":"821368b74f0848d2","login":"onepisya","name":"onepisya","avatar_url":"https://avatars-next.observableusercontent.com/f153ff05aa3994274d5a61ed6d97bdf9e0a9ab1fe7549a7e79705384d2fc880a","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":{"id":"d75b5bb613c35fe2","slug":"d3learn","title":"D3Learn","owner":{"id":"0fe483e8c08c0572","login":"onepisya","name":"onepisya"}},"type":"notebook","body":{"titling":"auto","title":"3_Learn D3: Data","cells":[{"id":105,"value":"# 3_Learn D3: Data\n\n在 `Observable` 中有许多种方法可以 [访问数据 access data](/@observablehq/introduction-to-data)。但是，由于我们刚刚开始，让我们使用最简单的： [文件附件 file attachments](/@observablehq/file-attachments).\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"$46","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":"`FileAttachment` 函数只返回一个句柄。允许您选择所需的表示形式，, 例如一个[blob](https://developer.mozilla.org/en-US/docs/Web/API/Blob), 一个 [buffer](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer), 或者 (UTF-8 encoded) 文本. For a text file, 对于文本(text) `文件`，我们可以调用 `file.text` 以作为字符串的字符串向文件内容提供承诺。\n\n比如下面的使用方法。","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":"当然，更有用的是将文本解析为具有命名日期 *date* 和温度 *temperature* 属性的对象 , 我们可以通过调用 *file*.csv (使用引擎盖下的 [d3.csvParse](https://github.com/d3/d3-dsv/blob/main/README.md#csvParse) ).\n\nclick 下面的数组来检查对象。","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":"而Observable隐式地 `await` 跨单元格的 `promises`, 我们必须 await *file*.csv promise，因为我们希望访问同一单元格内的 `promised value`。","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"CSV没有编码任何类型的信息，因此默认情况下，*date* and *temperature* properties(属性) 都是字符串。这使他们很棘手。例如，如果您尝试将两个温度相加，则会使它们连接。哎呀！😝","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":"要将这些字符串转换为日期和数字, 我们可以将 *file*.csv 的 *typed* option 设置为 `true` 。 (这等同于将 [d3.autoType](/@d3/d3-autotype) 作为第二个参数传递给 `d3.csvParse`, 该参数称为 `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":"如果您检查上面的数组, 您将会看到蓝绿色的 dates (2011-10-16) and numbers (61.6) 而不是蓝色的字符串 strings (\"2011-10-16\" and \"61.6\")","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":199,"value":"让我们简要介绍下 `Observable cells` 的语法。到目前为止，您只看到了可以命名或匿名的 [表达式 expression](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":"对于比简单表达式更复杂的代码，可以编写一个 `block`，它是用花括号括起来的一条或多条语句。\n与函数类似，`block` 单元格只有在 [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)值时才产生值。\n和 `express` cells 一样，可以从其他 `cells` 引用命名的 `block` 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":64,"value":"笔记本的其余部分不可见局部变量(`local variables`)，例如 *s*。只能从其他单元格访问命名单元格的返回值。\n这样 `Observable` 类似于电子表格：每个单元格都定义了一个单值。","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":895,"value":"sum","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":270,"value":"回到手头的任务，这是一种更明确的方法，可以在名为 `data` 的单元格中获取，解析和类型转换CSV文件。如果您的数据与 `D3.Autotype` 不兼容，则可以采用这种方法。（如果不确定，请不要依靠自动类型推导或[咨询文档 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":"通过方便地表示数据，我们现在可以开始工作了!例如，我们可以计算日期和温度的范围(extents)，以获得范围的感觉。","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":"正如我们之前看到的，我们可以注入到 [example histogram](/@d3/histogram) 中来快速地感受温度分布。","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":"温带气候！啊，旧金山。🌤\n\n在 `Observable` 中使用数据进行工作的时候，一个微妙的考虑是将代码放入单个单元格还是多个单元格中。一个好的经验法则是，一个单元格应定义要由其他单元引用的命名值（例如上面的 *data*），或者应该向读者显示信息（例如此散文，上面的图表以及检查数据的单元格）。","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":790,"value":"该规则的一个重要含义是，您应该避免单元格之间的隐式依赖:只依赖于您可以命名的名称。","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":791,"value":"为什么？笔记本的数据流[dataflow](/@observablehq/how-observable-runs) 是根据其单元格引用构建的。如果单元格没有名称，则不能引用它，并且隐式取决于其效果的单元可能会在其 `before` 之前运行。(单元格按拓扑顺序运行，而不是从上到下）\n隐性依赖性导致在开发过程中无确定性的行为😱，并在笔记本重新加载时可能出现错误！","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":46,"value":"例如，如果一个单元格定义了一个数组，而另一个单元格就地修改了它，其他单元格可能会在突变(mutation)之前或之后看到这个数组\n为了避免这种非确定性，请通过给第二个单元格一个名称并使用 [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) 复制数组来明确依赖关系。\n或组合两个单元，使其他单元格只能看到已经修改后的数组。","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":495,"value":"有了我们的数据，让我们迈向图形！\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":"$W47","stdlib":"1"}} 45:"$44:body"