25:["$","title",null,{"children":"Learning Observable 4：User Input & Interactivity | Xin Li | Observable"}] 4b:T87e,md`# Learning Observable 4：User Input & Interactivity 让我们来建立一个notebook来玩! Observable的notebook是在浏览器中运行的实时的、即时反馈的文档，所以它们非常适合制作交互式的、可探索性的内容，并让你亲身掌握你的数据并进行可视化！在这个视频中，Observable的开发者AnjanaVakil演示了如何使用具有输入元素的操作员的视图来创建响应的用户输入cell，又名“视图”，以及视图如何让您快速创建交互式图表、文本和其他对用户输入做出反馈的元素。 _看我们完成的notebook!_ #### 资料 & 进一步阅读: - 👀 [Introduction to Views](https://observablehq.com/@observablehq/introduction-to-views) - ✨ [New: Built-in Observable Inputs](https://observablehq.com/@observablehq/hello-inputs) - 🧰 [Legacy Inputs (\`@jashkenas/inputs\`)](https://observablehq.com/@jashkenas/inputs) - 📈 [Charting with Vega-Lite](https://observablehq.com/@observablehq/vega-lite?collection=@observablehq/observable-for-vega-lite) #### 视频中出现的Notebooks: - ☀️ ["Sequences Sunburst" by Kerry Rodden](https://observablehq.com/@kerryrodden/sequences-sunburst ) - 🖼️ ["Image distortion with Perlin noise" by Kerry Rodden](https://observablehq.com/@kerryrodden/image-distortion-with-perlin-noise) - 🏀 ["D3 Court" by Jimmy Zhang](https://observablehq.com/@jzhang/d3-court ) - 📊 ["Vega-Lite Chart Types" by Visnu Pitiyanuvath](https://observablehq.com/@observablehq/vega-lite-chart-types) - 🖌️ ["Brushable Scatterplot" by Mike Bostock](https://observablehq.com/@d3/brushable-scatterplot) - 🖍️ ["Draw Your Own Connected Scatterplot" by Mike Bostock](https://observablehq.com/@mbostock/draw-your-own-connected-scatterplot) - 👂 ["Audio Recognition with TensorFlow" by Mike Bostock](https://observablehq.com/@mbostock/audio-recognition-with-tensorflow) -------- `4c:[] 47:{"id":"097dbff81fea442b","slug":"learning-observable-4","title":"Learning Observable 4：User Input & Interactivity","thumbnail":"229efa66c089bfaad689cd9c125ad1f8461d44c1e0b96104421cd3ea7876fbc7","access_level":"public","create_time":"$D2021-11-11T04:35:35.736Z","update_time":"$D2021-11-12T07:43:30.560Z","view_time":null,"first_public_time":"$D2021-11-12T02:09:20.791Z","has_unpublished_edits":null,"fork":{"id":"405a61fb4968c146","slug":"untitled","title":"用户输入 & 交互","owner":{"id":"26a284e1b2d5e24f","login":"1907040109","name":""}},"stars":1,"starred":false,"owner":{"type":"team","id":"fd6705dc39f6f121","login":"lixin","name":"Xin Li","avatar_url":"https://avatars-next.observableusercontent.com/c4505b020f27848af3d300a6bb0a4ca758506e915d868c14f623c1185c3c5e4b","tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":200,"publish_version":200,"role":null,"authored":false,"authors":[{"type":"individual","id":"cdd2fcc7636494f4","login":"lixin","name":"Xin Li","avatar_url":"https://avatars-next.observableusercontent.com/c4505b020f27848af3d300a6bb0a4ca758506e915d868c14f623c1185c3c5e4b","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"cdd2fcc7636494f4","login":"lixin","name":"Xin Li","avatar_url":"https://avatars-next.observableusercontent.com/c4505b020f27848af3d300a6bb0a4ca758506e915d868c14f623c1185c3c5e4b","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":5,"collection":{"id":"0a1ec3da0382feaa","slug":"learning-observable/2","title":"Learning Observable","owner":{"id":"fd6705dc39f6f121","login":"lixin","name":"Xin Li"}},"type":"notebook","body":{"titling":"auto","title":"Learning Observable 4：User Input & Interactivity","cells":[{"id":0,"value":"$4b","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":182,"value":"交互，传统是使用HTML的控件，查看以下方式：","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":188,"value":"name = html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":190,"value":"html`

Hello, ${name.value}!

Hello, ${yourName}!

`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":63,"value":"viewof yourName = html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":43,"value":"myName = \"Anjana\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":124,"value":"viewof yourColor = color({value: \"#21abc0\", title:\"Your favorite color\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":130,"value":"import {color} from \"@jashkenas/inputs\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":133,"value":"letterFrequencyChart = vl.markBar() // Make a bar chart \n .data(yourLetters) // Using letter frequency data\n .encode(\n vl.x().fieldO(\"letter\"), // Show letters in sequential order on the x-axis\n vl.y().fieldQ(\"frequency\").axis({ format: \"%\" }), // Show frequency on the y-axis, formatted as percent\n vl.color().value(yourColor) // Set the bar color\n )\n .render()\n\n// Source: https://observablehq.com/@observablehq/vega-lite-chart-types#simpleBar","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":145,"value":"yourLetters = letterFrequencies.filter(row => yourName.toUpperCase().includes(row.letter))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":136,"value":"import {vl, alphabet as letterFrequencies} from '@observablehq/vega-lite-chart-types'","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":178,"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