25:["$","title",null,{"children":"Learn D3: Data | 1907040205 | Observable"}] 4b:T526,这个notebook有一个temperature.csv文件，可以使用 ${keyStyled("Shift-Cmd-U")}[键盘快捷键](/@observablehq/keyboard-shortcuts)访问；也可以将文件拖放到文件附件窗格中来附加文件，该窗格可通过notebook菜单或单击屏幕右侧回形针访问4c:[{"id":"cb1fa9dc3147e810a19f64ff1808f3f0f71d9730b593e1e1ef22e22a1bd3392dba8c3ae7c8efd54726f420bba89fceffe247021605d9668f4d93cca500476986","href":"https://static.observableusercontent.com/files/cb1fa9dc3147e810a19f64ff1808f3f0f71d9730b593e1e1ef22e22a1bd3392dba8c3ae7c8efd54726f420bba89fceffe247021605d9668f4d93cca500476986","name":"temperature.csv","type":"text/csv","lastModified":1636537997443.075,"size":5873}] 47:{"id":"b2feab443d4b9213","slug":"learn-d3-data","title":"Learn D3: Data","thumbnail":"e6456d94e9810aba94c10a602485743b182c3212cc5230971b769a38253c7774","access_level":"public","create_time":"$D2021-11-10T09:53:17.443Z","update_time":"$D2021-11-18T11:26:05.650Z","view_time":null,"first_public_time":"$D2021-11-15T10:17:27.782Z","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":"a4b7eada444d9b53","login":"1907040205","name":"","avatar_url":null,"tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":919,"publish_version":919,"role":null,"authored":false,"authors":[{"type":"individual","id":"3fdc14ae238bd407","login":"1907040205","name":"","avatar_url":null,"tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"3fdc14ae238bd407","login":"1907040205","name":"","avatar_url":null,"tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Learn D3: Data","cells":[{"id":105,"value":"# Learn D3: Data\n\n在 Observable 中有多种[访问数据](/@observablehq/introduction-to-data)的方式。其中最简单的是：[文件附件](/@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":"$4b","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 编码）文本。对于文本文件，可以调用 *file*.text 来获得文件内容。","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":"我们可以通过调用 *file*.csv（使用 [d3.csvParse](https://github.com/d3/d3-dsv/blob/main/README.md#csvParse)）将文本解析为具有 *date* 和 *temperature* 属性的对象。","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 隐式等待跨cells的promises，但必须等待 *file*.csv promise，因为要访问同一cell内的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* 和 *temperature* 属性都是字符串。这样很难应用。如果添加两个温度，会将两个温度连接起来。 ","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* 选项设置为 true。（相当于将 [d3.autoType](/@d3/d3-autotype) 作为第二个参数传递给 d3.csvParse，它为每一行调用 d3.autoType。）","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":"可以看到日期 (2011-10-16) 和数字 (61.6) 而不是字符串（\"2011-10-16\" 和 \"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":"[expression](https://2ality.com/2012/09/expressions-vs-statements.html) cells，可以命名或不命名。这两种cells都可以运行，但是只有命名cells可以被其他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":"对于比简单表达式更复杂的代码，可以编写一个 *block*，它是用一个或多个大括号括起来的语句。块cell，类似于函数，只有在[return](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/return) 或 [yield](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/yield)时返回值。和expression cells一样，命名的cells可以被其他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":"上面的 *s*为局部变量，对 notebook 的其余部分不可见；只有命名cell的返回值才能从其他cells访问。通过这种方式的Observable类似于电子表格：每个cells定义一个奇异值。","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":"有一种更明确的方式来获取、解析和类型转换名为 *data* 的cell中的 CSV 文件。如果数据与 d3.autoType 不兼容，可以采用这种方法。（如果不确定，请不要依赖自动类型推断或 [查阅文档](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":"我们可以计算日期和温度的范围","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":"可以注入[示例直方图](/@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":"在 Observable 中处理数据时的是将代码放在单个cell中还是一整个cell中？一个好的经验法则是，cell应该定义一个命名值以供其他cells引用（例如上面的 *data*）","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":790,"value":"这个经验法则的一个重要含义是应该避免cells之间的隐式依赖关系：仅依赖于可以命名的内容。","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":791,"value":"notebook的 [数据流](/@observablehq/how-observable-runs) 是根据其cell引用构建的。如果cell没有名称，则无法引用它，并且隐式依赖其效果的cell可能会在它之前运行。（cells按拓扑顺序运行，而不是从上到下。）隐式依赖会导致开发过程中的不确定性行为，并且重新加载notebook时可能出现的错误！","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":46,"value":"如果一个cell定义了一个数组，而第二个cell对其进行了就地修改，则其他cells可能会在变化之前或者之后看到该数组。为避免这种不确定性，通过为第二个cell指定名称并使用 [Array.from](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/from) 或 [*array*.map](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map)。或者组合两个cells，以便只有已修改的数组对其他cells可见。","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":495,"value":"Next","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## 附录","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":"$W4c","stdlib":"1"}} 24:null