25:["$","title",null,{"children":"Observable的交互作用 | 1907040109 | Observable"}] 4b:T621,md`回顾一下，对于一个Jupyter用户来说，要适应Observable，它是有帮助的：: * 了解一些JavaScript（这里有一个[不同之处的列表](https://observablehq.com/d/5e82392bae5fb729)） * 了解[与Jupyter的不同之处](https://observablehq.com/d/5e82392bae5fb729),尤其是[reactivity](https://observablehq.com/@observablehq/how-observable-runs) * 能够导入数据、使用可视化工具、共享笔记本和嵌入可视化（[本系列的上一教程](https://observablehq.com/d/eceaa744227c4fea)）在这一系列的教程之后，你就已经上路了. 现在是时候探索一些notebook了！这里有一些收藏的数据集。当你找到一个你喜欢的数据时，试着分叉它，做一些改变，甚至可以交换你自己的数据。 * [Visualization](https://observablehq.com/collection/@observablehq/visualization) * [Explorables](https://observablehq.com/collection/@observablehq/explorables) * [Art](https://observablehq.com/collection/@observablehq/generative-art) * [Maps](https://observablehq.com/collection/@observablehq/maps) 或者如果你想继续阅读，下面是一些步骤： * [Visualization with Vega Lite](https://observablehq.com/d/3c458cfcac4dbda8?collection=@observablehq/observable-for-charting) * [Getting Started with D3](https://observablehq.com/d/5a4c8ad2dcf5d2e1?collection=@d3/getting-started) * [Quick Start Tutorial](https://observablehq.com/collection/@observablehq/tutorial) * [Tutorials for all Observable features](https://observablehq.com/collection/@observablehq/introduction) `4c:[] 47:{"id":"fc8b42ce45e42cdf","slug":"observable","title":"Observable的交互作用","thumbnail":"5eb72f5d8e8e389ce1c1cc0eefe4caff603da992dba6474da81dd6ee08cf70c0","access_level":"public","create_time":"$D2021-11-11T08:42:29.749Z","update_time":"$D2021-11-14T12:35:14.717Z","view_time":null,"first_public_time":"$D2021-11-14T12:35:26.188Z","has_unpublished_edits":null,"fork":true,"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":764,"publish_version":764,"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的交互作用","cells":[{"id":0,"value":"md`# Observable的交互作用`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":218,"value":"md`交互使文档更加接近。\nnotebook通过显示代码中的每个步骤并鼓励读者自己运行它，使争论和探索更加可重复。能够观看通过分析传播代码的变化，或者尝试对不同数据进行同样的分析，使得notebook电脑强大而吸引人。\n但是观看和修改代码并不是所有人都喜欢做的事情。交互式输入使得插入不同的数据和质疑模型假设的行为对每个人都适用。当然，这可以是有趣的观看图表和数字变化，因为你来回滑动一个滑块! \n这个notebook通过使用互动部件在Observable的notebook以及动画的基础。`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":23,"value":"md`## Views\n\nObservable中的交互式输入，称为views，类似于Jupyter中的IPython小部件，但往往是 \n* 编写起来更简单(因为它们不需要处理跨越 python/javascript 边界) ,\n* 更快地响应用户的更改（因为它们不需要服务器往返），以及\n* 与notebook更集成（因为改变一个值会更新整个notebook的每个引用，而不仅仅是单个小部件）。\n\n添加一个滑动条，一个可点击的地图，一个文本框，或者其他输入来修改一个notebook使用的全局值，工作原理与正常的跨单元通信相同.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":183,"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":28,"value":"length = 100 // try changing this number and running the cell with shift-enter","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":29,"value":"height = 60 // or change this one, a cell can depend on lots of other cells","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":32,"value":"html`

`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":393,"value":"md`上面的cell和下面的两个cell会根据greenLength的新值进行更新。.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":187,"value":"greenLength + \" pixels wide\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":191,"value":"greenLength % 2 === 0 ? \"A nice even length.\" : \"What an odd length!\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":59,"value":"md`你可以编写你自己的输入，就像上面的html范围输入一样，但是输入notebook上有所有你可能想要开始的输入`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":401,"value":"md`*滑块函数采用可选参数(通过“选项对象”的JavaScript模式)来允许默认配置滑块。*`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":439,"value":"viewof simple = slider()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":444,"value":"simple","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":130,"value":"viewof money = slider({\n min: 0,\n max: 1e9,\n step: 1000,\n value: 3250000,\n format: \",\",\n description:\n \"0到10亿，分1000步，格式为（美国）数字\"\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":137,"value":"money","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":447,"value":"md`你可以通过点击下面的导入cell来阅读滑块功能的更多信息。`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":132,"value":"import {slider} from '@jashkenas/inputs'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":452,"value":"md`作为一个更奇特的例子，这里是我们在上一个教程中使用的范围滑块:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":654,"value":"import {rangeSlider} from '@mootari/range-slider'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":657,"value":"viewof range = rangeSlider({\n min: 0,\n max: 200,\n value: [50, 150],\n precision: 0, // how many decimal places\n title: 'Ranges of numbers between 0 and 200',\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":672,"value":"range","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":650,"value":"md`输入可以为非常特定的用例创建：这里有一个世界地图，它返回用户单击的点的纬度和经度.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":60,"value":"import {worldMapCoordinates} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":69,"value":"md`单击下面的地图以更改坐标变量的值`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":63,"value":"viewof coordinates = worldMapCoordinates([-122.27, 37.87])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":65,"value":"coordinates","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":79,"value":"md`你可以阅读更多关于视图和关键字视图的内容，但是如果你熟悉 ipythonwidgets，那么首先指出它们之间的一些差异可能会有所帮助。`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":169,"value":"md`## 将视图与IPythonWidgets比较\n\n在 jupyter 中，可以使用 [IPythonWidgets](https://ipywidgets.readthedocs.io/en/latest/examples/Using%20Interact.html#interactive) 功能(如 interact ()和 interactive ())来提供输入，这些输入会导致 python 函数在更改时被重新执行。\n\n在Observable, 输入可以修改变量，notebook中的任何其他cell都可以使用。引用这些变量的cell都会随着输入的改变而同步改变。\n\nIpythonwidgets 允许其他实现 widget 协议的对象链接到 javascript 端，跳过内核，所以 jslink 和 trailets 链接之间的区别很重要。这种区别在Observable中不存在，因为所有代码都在 javascript 中链接(链接是隐式的，基于代码中引用的cell，而不是在代码中创建的对象)。\n\nIpythonwidgets 通常使用回调来连接可变对象，而 observable 使用基于新值重新创建对象的反应模式。对于一些用户来说，这是一个显著的改进: 连接回调对于有经验的 python 用户来说是一个复杂性的跳跃，所以用户不需要使用它们来在Observable中创建交互式小部件。\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"md`与 ipythonwidgets 一样，widget 的状态(例如当前选择的值)不属于持久notebook状态。如果其他人正在查看相同的notebook，则不会在查看者之间共享对滑块值的更改，也不会保存。您可能希望在输入中设置一个默认值，这样当查看器首次加载notebook时，初始值是合理的.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":147,"value":"md`即使在你自己的notebook中，像这样的滑动条当前值的更改也不会被保存。` ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":129,"value":"viewof x = slider()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":96,"value":"md`## 动画\n\n一部分习惯于在Observable的客户机/服务器之间缺乏往返，是更频繁地使用动画。cell产生的值可以通过使用视图进行交互，同样，cell产生的值也可以在不需要用户输入的情况下进行更改以驱动动画\n\n更改cell的值可以由生成器驱动，该生成器是一种JavaScript语言的特性，与Python中的生成器非常相似。\n\n~~~py\ndef counter_generator():\n i = 0;\n while True:\n yield i\n i += 1\n~~~\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":602,"value":"counterGenerator = function*() {\n let i = 0;\n while (true) {\n yield i++;\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":606,"value":"md`当我们通过调用反生成器来实例化一个生成器时，我们可以看到每个浏览器动画帧中，观察到的运行时从生成器中提取的值，在大多数情况下是每秒60次。`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":610,"value":"counterGenerator()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":535,"value":"md`还有一个Observable的特定生成器文本语法。一旦你在一个代码块中使用 yield，你就把一个单元定义为一个生成器:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":528,"value":"i = {\n let i = 0;\n while (true) {\n yield i;\n i+= 3;\n if (i > 800) {\n i = 0;\n }\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":550,"value":"md`通过引用更改的值(在本例中是通过生成器) ，可以使单元格通过更改的值生成动画。`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":543,"value":"html`