3f:null 40:["$","title",null,{"children":"DataVizLog00 - Observable 入门 | 00 | Observable"}] 46:[{"id":"eba7f2fa8bd15489b65d256870bee46a1611128c52ee0f0486ca034c9562eaf53f6b576cc5155564a78b2bae8c316b79092fd9437a4ebbf37a71a4da9211d368","href":"https://static.observableusercontent.com/files/eba7f2fa8bd15489b65d256870bee46a1611128c52ee0f0486ca034c9562eaf53f6b576cc5155564a78b2bae8c316b79092fd9437a4ebbf37a71a4da9211d368","name":"Goodbye.jpg","type":"image/jpeg","lastModified":1605703457757.524,"size":59152}] 44:{"id":"c2481a46b70461aa","slug":"observable101","title":"DataVizLog00 - Observable 入门","thumbnail":"acc7ba26d6a85f2af7b397edc8c0522c7484bfc6d789e7144a78e1efc3bb7e6a","access_level":"public","create_time":"$D2020-11-14T08:51:58.334Z","update_time":"$D2021-12-22T11:41:23.280Z","view_time":null,"first_public_time":"$D2020-11-14T08:53:33.712Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"8f8e7a9cbffb4404","login":"kidult00","name":"00","avatar_url":"https://avatars-next.observableusercontent.com/28ebb4493f7a6493919dc8932e9a62f6b8a3e0b4dfd96b8640cfb28eee156c25","tier":"starter_2024","bio":"Interaction Designer. Maker.","following":false},"version":421,"publish_version":421,"role":null,"authored":false,"authors":[{"type":"individual","id":"5b3707f17329e902","login":"kidult00","name":"00","avatar_url":"https://avatars-next.observableusercontent.com/28ebb4493f7a6493919dc8932e9a62f6b8a3e0b4dfd96b8640cfb28eee156c25","tier":null,"bio":"Interaction Designer. Maker.","following":false}],"members":[{"type":"individual","id":"5b3707f17329e902","login":"kidult00","name":"00","avatar_url":"https://avatars-next.observableusercontent.com/28ebb4493f7a6493919dc8932e9a62f6b8a3e0b4dfd96b8640cfb28eee156c25","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":{"id":"cd92a2034655ca42","slug":"datavizlog","title":"DataVizLog 可视化系列教程","owner":{"id":"8f8e7a9cbffb4404","login":"kidult00","name":"00"}},"type":"notebook","body":{"titling":"auto","title":"DataVizLog00 - Observable 入门","cells":[{"id":0,"value":"md`# DataVizLog00 - Observable 入门\nby [00](http://uegeek.com/)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":282,"value":"canvas","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"md `---\n入门必看视频：\n- [An overview of working in the Observable Canvas - YouTube](https://www.youtube.com/watch?v=IeyD4aCjeUM&ab_channel=Observable)\n- [Learning Observable - Youtube](https://www.youtube.com/playlist?list=PLOHIJAFwtkEfEsafMd9BY3KWsRrz7FV5e)\n- [Open Vis 2017 Mike Bostock's Keynote - YouTube](https://www.youtube.com/watch?v=lNbqfQlGkzc&ab_channel=BocoupLLC)\n\nQuick Tips:\n- 跟 [Jupyter Notebook](https://jupyter.org/) 的使用方式类似\n- cell 支持 ${html`JavaScript、Mardown、HTML、LaTeX`} 和 ${html`SQL`} 语法\n- pin cell 可以默认展开源码\n- cell 的物理顺序不影响执行顺序，cell 运行后会自动更新相关联的其他 cells\n- 页面右侧的 minimap 展示了代码块的依赖关系（也可以用 [Notebook Visualizer](https://observablehq.com/@observablehq/notebook-visualizer) 分析）\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":143,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":345,"value":"Math.random()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":341,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":25,"value":"md `## View & Interaction`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":98,"value":"md`\n如果涉及用户交互的控件，可以在 html 代码前面加 \\`viewof\\`\n`\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":29,"value":"viewof userInput = html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":52,"value":"html`

Your input: ${userInput}

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":362,"value":"```\n```\n也可以用平台提供的控件 Inputs（[View](https://observablehq.com/@observablehq/introduction-to-views)）.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":393,"value":"viewof faint = Inputs.select([\"让我想想\", \"还没\", \"😵晕了\"], {label: \"你晕了吗？\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":397,"value":"你说：${faint}","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":146,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":111,"value":"md`## 引用库`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":119,"value":"md`### 1. [require](https://observablehq.com/@observablehq/introduction-to-require)\n引用 npm 的 js 库：\n- require(\"name@version\")\n- require(\"https://unpkg.com/d3@6.2.0/dist/d3.min.js\")\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":116,"value":"d3 = require(\"d3@6\"); ","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":212,"value":"require.resolve(\"d3-dsv@1\", \"d3-selection@1\") // Merge libraries","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":239,"value":"d3.create(\"svg\")\n .attr(\"width\", 128)\n .attr(\"height\", 128)\n .call(svg => svg.selectAll(\"circle\")\n .data(d3.range(128, 0, -8))\n .join(\"circle\")\n .attr(\"fill\", d3.scaleSequential(d3.interpolateViridis).domain([0, 128]))\n .attr(\"r\", d => d))\n .node()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":125,"value":"md`### 2. [import](https://observablehq.com/@observablehq/introduction-to-imports)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":54,"value":"md`使用其他 Notebook 里的 cell，可以 \n~~~js\nimport { cellName1 as myVariable, viewof cellName2 } with { myData as sourceData} \nfrom \"@username/notebook\"\n~~~\n例如：\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":64,"value":"import {coordinates} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":76,"value":"viewof coords1 = coordinates()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":149,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":164,"value":"md`## 引用数据`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":160,"value":"md`1.读取文件：[File Attachments](https://observablehq.com/@observablehq/file-attachments)\n~~~js\nflare = d3.csvParse(await FileAttachment(\"flare.csv\").text())\n~~~\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":170,"value":"md`2.读取 API： \\n\n~~~js\njsonData = (await fetch(url)).json()\n~~~\n或 \\n\n~~~js\nd3Fetch = require('d3-fetch')\nd3Fetch.json(url)\n~~~\n如果包含敏感信息（包括引用数据库），可以使用帐号设置中的 Secrets 功能：[Introduction to Secrets](https://observablehq.com/@observablehq/secrets)\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":101,"value":"md`---\n## 其他`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":108,"value":"md`js 代码需要包含在 {} 内`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":104,"value":"{\n let a = 5;\n let string = \"\";\n for (let i=0; i \n ${await FileAttachment(\"Goodbye.jpg\").image()}\n

Image: Shift-Command-U ⇧⌘U

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":267,"value":"Click here to download the JPG.","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":235,"value":"md`标准库`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":207,"value":"DOM","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":316,"value":"md `LaTeX`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":209,"value":"tex`E = mc^2`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":296,"value":"md`---\n## Utility`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":279,"value":"import {canvas} with {height} from \"@mbostock/connected-particles-iii\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":290,"value":"height = 300","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W46","stdlib":"1"}} 45:"$44:body"