44:["$","title",null,{"children":"Observable对于Jupyter用户 | 1907040109 | Observable"}] 4c:[{"id":"0b128af7ebd0e880b68101f514a120f60e0672cfa13ee9cdd7a968c282caa70542c55fed403cf3664586d93202df381fd28bfa1895dec93cd7e33a6ce1130b13","href":"https://static.observableusercontent.com/files/0b128af7ebd0e880b68101f514a120f60e0672cfa13ee9cdd7a968c282caa70542c55fed403cf3664586d93202df381fd28bfa1895dec93cd7e33a6ce1130b13","name":"jupyter.png","type":"image/png","lastModified":1636620123101.515,"size":117703},{"id":"78c5827477ecd1ce684a74324225a8cc7b2370a279dbe0892159bd52c60496207aabc8dfbf4f914e690761e18a344de8f3e5e03c440e18ee065e191c77b884f3","href":"https://static.observableusercontent.com/files/78c5827477ecd1ce684a74324225a8cc7b2370a279dbe0892159bd52c60496207aabc8dfbf4f914e690761e18a344de8f3e5e03c440e18ee065e191c77b884f3","name":"2020-03-02 10.29.45.gif","type":"image/gif","lastModified":1636620123101.515,"size":220653}] 48:{"id":"fc624d89ed3fa1f6","slug":"observable-jupyter","title":"Observable对于Jupyter用户","thumbnail":"609b42883e3fc04fbfd4cd805ac72fb449c733e720c658f690ed7797e073acc6","access_level":"public","create_time":"$D2021-11-11T08:42:03.101Z","update_time":"$D2021-11-12T04:01:16.141Z","view_time":null,"first_public_time":"$D2021-11-11T12:04:23.572Z","has_unpublished_edits":null,"fork":{"id":"b00406054cfb4875","slug":"observable-for-jupyter-users","title":"Observable for Jupyter Users","owner":{"id":"f35c755083683fe5","login":"observablehq","name":"Observable"}},"stars":0,"starred":false,"owner":{"type":"team","id":"26a284e1b2d5e24f","login":"1907040109","name":"","avatar_url":"https://avatars-next.observableusercontent.com/df574aac0d7c0bc868854c371534b5e60adbcd89d4eba288ffe34916b7b85336","tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":2772,"publish_version":2772,"role":null,"authored":false,"authors":[{"type":"individual","id":"3110ce52e2112fa1","login":"1907040109","name":"","avatar_url":"https://avatars-next.observableusercontent.com/df574aac0d7c0bc868854c371534b5e60adbcd89d4eba288ffe34916b7b85336","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"3110ce52e2112fa1","login":"1907040109","name":"","avatar_url":"https://avatars-next.observableusercontent.com/df574aac0d7c0bc868854c371534b5e60adbcd89d4eba288ffe34916b7b85336","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":{"id":"4c2bd110a5284e9f","slug":"observable-for-jupyter-users","title":"Observable for Jupyter users","owner":{"id":"26a284e1b2d5e24f","login":"1907040109","name":""}},"type":"notebook","body":{"titling":"auto","title":"Observable对于Jupyter用户","cells":[{"id":0,"value":"md`# Observable对于Jupyter用户\n\nObservable像Jupyter一样, 是一个计算的notebook，非常适合做数据科学和可视化，其中“notebook”是指包含prose，代码和可视化的一系列cell, \nObservable完全在您的浏览器中运行JavaScript超集，因此它使用的生态系统与您可能习惯的Python生态系统不同。本教程向Jupyter用户展示如何最大限度地利用Observable。\n\n让我们从最大的差异开始`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":674,"value":"md`## Observable是运行JavaScript的超集\n大多数Jupyter用户使用Python内核，尽管也有[JavaScript](https://github.com/yunabe/tslab)、[Julia](https://github.com/JuliaLang/IJulia.jl), [Haskell](https://github.com/gibiansky/IHaskell)内核。您也可以用Jupyter编写一些在浏览器中执行的JavaScript，但通常Jupyter notebook中的代码是用内核语言编写的，并在运行内核的远程进程中执行。在本教程的其余部分中，我将假定您熟悉Jupyter notebook中的Python。\n\n要最大限度地利用Observable的内容，您需要了解一些JavaScript。我们最喜欢的关于这门语言的完整课程是[Eloquent JavaScript](https://eloquentjavascript.net/2nd_edition/)，但是如果您想利用您的Python知识快速学习一些基本知识，下面是[两种语言之间的差异列表](https://observablehq.com/d/5e82392bae5fb729)。也就是说，如果您有使用Python的经验，那么您也许能够一步一个脚印地寻找不同之处。Observable的[JavaScript风格略有不同](https://observablehq.com/@observablehq/observables-not-javascript)，所以即使是熟悉JavaScript的人也需要学习一些东西。`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"md`## Cell 输出显示在代码*上面*`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1477,"value":"md`在“Observable”中，cell输出的是可视化、对象还是表达式的任何其他结果。生成它的代码将出现在下面。`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"2 ** 3","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"md`## 你可以隐藏或显示代码`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2476,"value":"{\n const text = '新创建的cell中的代码开始固定，这使其保持可见，但cell可以被解开，因此它们的代码被隐藏。要再次查看代码，请单击cell输出左侧的空格。'\n return md`${text}\n\n>

`\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1691,"value":"md`尝试一下：单击下面cell左侧的空格，查看代码，然后单击Pin标记图标，在打开另一个cell时保持可见。`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1489,"value":"9 + 8","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1545,"value":"md`这使您可以更好地控制notebook的显示方式：如果您想要引起人们对结果产生方式的注意，您可以将cell固定在一起，让所有人都能看到。否则，解开cell，以便代码仍然可用，等待好奇的查看者将其打开。`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2207,"value":"md`## 使用shift-enter来运行cell\n\n如果您习惯了在Jupyter中使用alt-enter运行cell，您可能会惊讶地发现它会在“Observable”中分割cell。有关更多信息查看[快捷键](https://observablehq.com/@observablehq/keyboard-shortcuts) 或者点击右侧的?按钮。\n\n您可以使用cmd-enter来获得在Jupyter中运行一个cell并直接在下面插入另一个cell的Option-Enter的行为.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1996,"value":"md`## Cells produce only one value`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1728,"value":"md`与JavaScript中的函数体一样，Observable单元中的cell要么是单个表达式，要么是语句块。具有单个表达的cell来评估该表达的结果。 \n与Jupyternotebook中只有最后一个表达式打印在cell下面的方式类似，只有一个表达式从具有多个状态的cell中返回。Observable使用返回语句来指定这个值，而不是类似于最终语句的隐式返回。如果没有返回任何值，类似于用分号结束Jupyter中的最后一个语句，则cell的计算结果为未定义。要在cell中编写多个语句，而不是单个表达式，您需要用大括号包围代码，以使其成为代码块。请使用return语句使代码块中输出一个值。\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1704,"value":"{\n const foo = (x) => x + 1;\n const arr = [1,2,3];\n return arr.map(foo);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2321,"value":"md`如果您只想要一个对象字面量，则必须用括号将其与块区分开来：`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2322,"value":"({hello: \"world\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":30,"value":"md`## 在块内定义的变量只能在该块内访问\n在块中，任何已声明的变量都将是局部变量，您需要使用let或const来声明它们。cell以这种方式类似于函数体。在这里，无法从其他cell获取radius：`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":32,"value":"{\n const radius = 12;\n return 2 * Math.PI * radius;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2117,"value":"Math.PI * radius ** 2","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1985,"value":"md`## Cells可以被命名`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1988,"value":"md`要使cell的返回值可以在其他cell中进行编码，您可以为该cell命名，即将其分配给一种特殊类型的全局变量。这不使用var、const或let；只需写下名称和赋值式：To make the return value of a cell available to code in other cells, you can name the cell, i.e. assign it to a special kind of global variable. This does not use \\`var\\`, \\`const\\`, or \\`let\\`; just write the name and equals:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1730,"value":"z = 123 + 456","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1965,"value":"md`该代码将 \\`z\\` 定义为 \\`123 + 456\\`。现在可以像notebook中的其他代码中的其他变量一样引用z。因为每个cell都只有一个返回值，所以你应该将大的cell分解成小而集中的cell。作为一种特殊的全局变量，它得到了一些特殊的处理。`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":36,"value":"md`## Observable is reactive\n这是Observable评估模型和Jupyter的最大不同之处。如果你与之抗争，你会头疼；如果你学会了，你会发现notebook的神奇之处：`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2138,"value":"{\n const str = \"Cells re-run automatically!\"\n return html`

\n ${str.split(\"\").map((char, i) => html`${char}`)}\n

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":44,"value":"md`在Observable中，每当引用的值发生更改时，这都会自动发生。您可以将Observable视为在每次编辑cell时终止内核并重新运行整个notebook，也可以将其视为仅重新运行依赖于您正在编辑的cell的cell(这正是实际发生的情况)。`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":88,"value":"md`这是一个与Jupyter做的非常不同的权衡！Observable的方法有助于在多个cell上构建的可视化或其他输出上快速迭代，以及在notebook中的多个位置使用某个值时。不需要记住重新运行正确的cell，在专注于notebook内容时就少了一件需要担心的事情。`\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":46,"value":"md`这些特殊的 Notebook-level变量只能定义一次，不能重新赋值：`\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":235,"value":"a = 10","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":236,"value":"a = 11","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":210,"value":"md`并且您不能循环地定义一个cell：`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":239,"value":"b = c + 1","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":240,"value":"c = b + 2","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1895,"value":"md`好处是用户交互和对代码的更改可以立即传播。没有必要重新运行其他cell！更改下面的bit，maxSignedInt也将更新。`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1766,"value":"bits = 18 // change this number and press shift-enter to run!","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1771,"value":"maxSignedInt = 2 ** (bits - 1) - 1","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1833,"value":"\nmd`## Cells不回从上到下运行\n\n因为notebook中cell的顺序不会影响执行顺序，所以可以观察到的notebook是按照作者认为最有意义的顺序来组织的。它们通常在顶部显示最终结果，并在下面的问题的子部分展开。`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":107,"value":"md`在这个改编自内德·巴切尔德(Ned Batchelder)的[pizza.py](https://nedbatchelder.com/blog/201210/pizzapy.html)中，顶部的购物列表使用了下面定义的输入滑块、常量和导入：`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":109,"value":"md`**We need ${'🍕'.repeat(meat)} meat, ${'🍕'.repeat(veggie)} veggie, ${'🍕'.repeat(vegan)} vegan.**`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":140,"value":"viewof rsvps = slider({\n min: 0, \n max: 100, \n step: 1,\n description: \"RSVPs\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":115,"value":"meat = Math.floor(0.4 * pies) || 1","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":122,"value":"vegan = Math.floor(0.15 * pies) || 1","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":148,"value":"veggie = Math.floor(0.45 * pies) || 1","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":49,"value":"pies = Math.round(people * 2.5 / 8);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":134,"value":"people = Math.round(rsvps * .65) // the Meetup Universal Constant","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":138,"value":"import {slider} from \"@jashkenas/inputs\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2235,"value":"md`## 只有一种cell\n\n与Jupyter单独的Markdown cell和代码 cell不同，Observable中的所有cell都包含JavaScript代码。此代码的求值结果基于其类型呈现。\n\nValues:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2274,"value":"\"hello world\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1503,"value":"md`Objects:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":641,"value":"({\n a: 100,\n b: 200,\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1507,"value":"md`HTML DOM nodes:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":621,"value":"{\n const div = document.createElement('div')\n div.innerText = 'This is a DIV'\n div.style.border = 'solid 10px gray';\n div.style.textAlign = 'center';\n div.style.width = '200px';\n return div;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"md`Observable includes [standard library](https://observablehq.com/@observablehq/standard-library) functions that return DOM nodes, to make it easy to create rich documents with text and graphics.\n可观察性包括返回DOM节点的[标准库函数](https://observablehq.com/@observablehq/standard-library)，便于使用文本和图形创建丰富的文档。\n使用html标记的模板文字编写HTML：`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"value":"html`

This is a DIV`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2305,"value":"md`用[\\`svg\\`](https://github.com/observablehq/stdlib/blob/master/README.md#svg)标记的模板文字编写SVG:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2306,"value":"svg``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2299,"value":"md`使用[\\`md\\`](https://github.com/observablehq/stdlib#markdown)标记的模板文字写下markdown:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":608,"value":"md`> This ~~txet~~ *text* is rendered as markdown`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1678,"value":"md`Write ${tex`\\LaTeX`} with the [\\`tex\\`](https://github.com/observablehq/stdlib#tex) tagged template literal:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1633,"value":"tex`-b \\pm \\sqrt{b^2 - 4ac} \\over 2a`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":622,"value":"md`如果您熟悉IPython[\\`display()\\`]()函数，该功能根据其类型向notebook呈现内容，那么可以想象上面显示的Observable cell的输出是根据运行单元格代码的结果调用display()的结果。`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1746,"value":"md` ## Notebooks存在在web上\n\nObservable notebook完全在网上编写、编辑、共享和发布。这使得:\n\n- **单击共享 ** 与远程托管的Jupyter notebook一样，Observable notebook可以通过点击“发布”与世界共享，或者通过在右上方的⋯菜单中启用链接共享来更有选择性地共享。用户可以尝试他们自己的更改，建议在原始版本中进行这些更改，或者分叉notebook来保存他们的更改，并按照他们自己的方式使用代码。也许他们会替换他们自己的数据!\n\n- **即时启动**与许多托管的Jupyter notebook平台不同，不需要等待内核和环境的初始化，例如需要等待Docker容器的旋转。由于在浏览器中运行，查看者可以立即运行它们，与输入交互，并尝试对代码的更改。\n\n- **下载或嵌入** 如果你想在不显示代码的情况下共享可视化内容，你可以在另一个不显示notebook编辑器UI的网站中嵌入一个cell。与将Jupyter notebook导出为.py文件类似，您可以将notebook代码作为模块下载，以便从其他JavaScript代码中使用。`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":658,"value":"md`## 代码将在浏览器中运行\n\n在浏览器的JavaScript引擎中运行的Observable代码与在单独内核进程中运行的Jupyter代码不同：例如，您可以使用浏览器的开发工具来调试代码。\n\n- **以毫秒为单位响应用户交互** 在没有客户端-服务器往返的情况下，notebook可以非常快速地对代码更改或交互式小部件更改做出反应。为了制作流畅的动画，每秒运行一段代码60次是非常正常的用例，就像根据用户来回摆动的滑块重新计算可视化效果一样。\n\n- **新的web超级大国.** 用D3等库和WebGL等浏览器API构建丰富的交互体验。视频流，对API进行HTTP调用，使用多点触摸控件，播放音频，使用WebAssembly等等！Observable是一个使用JavaScript、HTML、CSS和SVG的好平台，无需设置编辑器、模块捆绑器、编译器工具链等。\n\n- **我的ID进程是什么?** 您无法在Observable中获取当前进程ID。您不能直接打开TCP套接字，不能访问文件系统，不能通过shell运行bash命令，也不能动态加载二进制文件。有时这会改变你写笔记本的方式。你的浏览器供应商不想让你进行的系统调用是禁区。\n\n浏览器沙箱允许您运行您不信任的notebook代码，这与本地Jupyter内核不同(但类似于Docker容器或Binder等托管环境中的Jupyter)。`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1020,"value":"md`## 你可以从其他notebook导入cell\n\n尽管存在重用其他Jupyter Notebok中的值的工作流，但重用代码的惯用方式是从分解出的模块或从PyPI安装的包中导入功能。\n\n在Observable中，除了使用Require从NPM和GitHub等注册中心拉入JavaScript包之外，还经常使用IMPORT重用其他notebook中的函数和值。因为这些模块是从互联网上下载的，所以没有单独的安装步骤；只需要您需要的代码。\n\n在Python中导入模块意味着执行一个模块(文件)，然后将该名称空间中的特定对象分配给变量。在正常情况下，当其他模块都是函数和类定义时，这是很好的，但是notebook通常包含您不一定想要在导入时运行的代码顶层代码。从另一个可观察的notebook导入cell只会运行生成导入值所需的cell，例如，您可以只从另一个notebook导入文件附件，并且知道notebook中的数据处理和动画没有在后台运行。 \n\n此笔记本包含在Mac上不同的键盘快捷键，因此我们导入了一个辅助实用程序，用于检查查看器的浏览器是否有操作系统，以便我们可以在Mac上显示“Option”，在Windows和Linux上显示“meta”:\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":903,"value":"import {mac} from '@mbostock/keys'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2340,"value":"md`这只是一个简单的实用程序，但您也可以导入整个交互式可视化效果。例如，有数百个D3示例可供您导入。`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1074,"value":"md`---\n\n网络生活、反应性编码和cell导入的结合，使我们可以观察到一个独一无二的、充满活力的协作创意编码员社区。现在，您可以在Observable中导入、分析和可视化数据帧了。`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2356,"value":"html`Next`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4c","stdlib":"1"}} 24:null