Run cell ⇧↩︎

3f:null 40:["$","title",null,{"children":"1-Observablehq-Getting Started | onepisya | Observable"}] 46:T9b3,👩‍💻 单元格可以包含用于 *styled* **text** 的 Markdown、用于代码的 JavaScript 等。编辑时，使用编辑器左边的 (*e.g.*, or )菜单更改语言 47:T521,🗃 加载数据, click 添加附件 (or shift-command-u). 你也可以[从一个 URL 或者查询数据库来 fetch 数据](https://observablehq.com/@observablehq/introduction-to-data?collection=@observablehq/working-with-data).48:[{"id":"bc7c1ea172d2e7ecb638dd379cc35232e80e272e668b3e8fee27378d5ab67f6be881ba9608040b699ffc3262cebbddd5defa9dcfbacd917353523c39f4972c67","href":"https://static.observableusercontent.com/files/bc7c1ea172d2e7ecb638dd379cc35232e80e272e668b3e8fee27378d5ab67f6be881ba9608040b699ffc3262cebbddd5defa9dcfbacd917353523c39f4972c67","name":"gistemp.csv","type":"text/csv","lastModified":1660369556478.646,"size":27014}] 44:{"id":"ff1ecd0e81cb29ba","slug":"getting-started","title":"1-Observablehq-Getting Started","thumbnail":"339600d9c7ba4b7f5b43d26b6a4ca0296c7b645da9b6ce8bd3b409b338ec0a7f","access_level":"public","create_time":"$D2022-08-13T05:45:56.478Z","update_time":"$D2022-08-15T14:15:45.914Z","view_time":null,"first_public_time":"$D2022-08-15T09:05:24.154Z","has_unpublished_edits":null,"fork":{"id":"2650817716b4d041","slug":"getting-started","title":"Getting Started","owner":{"id":"f35c755083683fe5","login":"observablehq","name":"Observable"}},"stars":0,"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":353,"publish_version":353,"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":true,"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":"1-Observablehq-Getting Started","cells":[{"id":0,"value":"# 1-Observablehq-Getting Started\n## 👋 Welcome to Observable, onepisya!\n这里是一些基础。","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":9,"value":"👈 单击左边的打开编辑器并开始输入。（或点击选项选项卡。）","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":107,"value":"🤔 一个单元格是一个内容块。编辑单元格时，蓝色文本框包含单元格的源代码。单元格的输出（或值）如上所示。","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":27,"value":"$46","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":32,"value":"▶️ 编辑后，点击查看您的更改（或按 shift-enter）刷新单元格的输出。如果您关闭单元格，您的代码也会自动运行。","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":14,"value":"🧱 要创建新单元格，请单击左上角的（或者，在编辑单元格时，按 command-enter。）","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":178,"value":"🚚 您可以通过拖动在左边的重新排列单元格, 或者在编辑单元格时 click or 工具条","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":46,"value":"$47","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":328,"value":"添加附件\n```js\ngistemp = FileAttachment(\"gistemp.csv\").csv({typed: true})\n// FileAttachment \n```","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":133,"value":"gistemp = FileAttachment(\"gistemp.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":165,"value":"有关数据的快速概述，请创建一个JavaScript单元格，然后使用[Inputs.table](https://observablehq.com/@observablehq/input-table?collection=@observablehq/inputs).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":163,"value":"Inputs.table(gistemp)\n// 这是一个使用的例子，将上面加载进来的 csv 文件，显示为表格。","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":94,"value":"📊 要可视化数据，请创建一个JavaScript单元格，然后使用[Plot](/@observablehq/plot), [Vega-Lite](/@observablehq/vega-lite), [D3](/@d3/gallery),或者你喜欢的 Library。如果单元格返回DOM，例如SVG，则会显示它。","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":135,"value":"// 使用例子，将我们之前加载的 csv 文件用 plot 函数显示出来。\nPlot.plot({\n marks: [Plot.dot(gistemp, { x: \"Date\", y: \"Anomaly\" })]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":100,"value":"🎚 要添加互动，请创建一个JavaScript单元格并使用 `viewof` 声明 [input](https://observablehq.com/@observablehq/inputs?collection=@observablehq/inputs) (您可以在右边的中浏览输入","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":147,"value":"viewof scheme = Inputs.select([\"rdbu\", \"piyg\", \"rdgy\"], {\n label: \"Color scheme\"\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":149,"value":"// 使用前面我们加载的 csv 进行画图。\n// 并且将上面我们下拉框中选择的内容用作 scheme 属性。\nPlot.plot({\n color: {\n type: \"diverging\",\n scheme: scheme,\n reverse: true\n },\n marks: [Plot.dot(gistemp, { x: \"Date\", y: \"Anomaly\", stroke: \"Anomaly\" })]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":157,"value":"🧙‍♀️ 借助数据流，当单元格更改时（或编辑时）时，单元格会自动重新运行！","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":232,"value":"See it in action:\n\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":192,"value":"🤔 Want to learn more? Open the help pane in the right margin, where you’ll find our quick guides and links to more resources.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"}],"files":"$W48","stdlib":"1"}} 45:"$44:body"