29:null 2a:["$","title",null,{"children":"Views are Mutable Values | Mike Bostock | Observable"}] 2f:[] 2d:{"id":"2c8347d28a489864","slug":"views-are-mutable-values","title":"Views are Mutable Values","thumbnail":"8bf87e0933bdcb3e6bd6b1d7afd0b77b948c3f272ce5ff48f5504baf974941d3","access_level":"public","create_time":"$D2018-03-10T16:23:28.228Z","update_time":"$D2021-02-04T15:16:56.314Z","view_time":null,"first_public_time":"$D2018-03-10T17:57:07.868Z","has_unpublished_edits":null,"fork":false,"stars":33,"starred":false,"owner":{"type":"team","id":"8c2e47252fd4995c","login":"mbostock","name":"Mike Bostock","avatar_url":"https://avatars-next.observableusercontent.com/7dbba99ced40bd5ab8013c99b1a11da61231bce321ba1148a9d16ad0f121550a","tier":"pro_2026"},"version":441,"publish_version":441,"role":null,"authored":false,"authors":[{"type":"individual","id":"074c414ad1d825f5","login":"mbostock","name":"Mike Bostock","avatar_url":"https://avatars-next.observableusercontent.com/7dbba99ced40bd5ab8013c99b1a11da61231bce321ba1148a9d16ad0f121550a","tier":null}],"members":[{"type":"individual","id":"074c414ad1d825f5","login":"mbostock","name":"Mike Bostock","avatar_url":"https://avatars-next.observableusercontent.com/7dbba99ced40bd5ab8013c99b1a11da61231bce321ba1148a9d16ad0f121550a","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":12,"collection":null,"type":"notebook","body":{"title":"Views are Mutable Values","cells":[{"id":88,"value":"md`# Views are Mutable Values\n\n

***Update Feb. 2021:*** *Observable now supports [**synchronized inputs**](/@observablehq/synchronized-inputs)! This notebook will remain for history, but please upgrade to [Observable Inputs](/@observablehq/inputs).*

\n\n[A view](/@mbostock/introduction-to-views) conveniently defines an interactive value.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":104,"value":"viewof x = html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":108,"value":"x","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":111,"value":"md`While interactive values are often controlled only by interaction, sometimes you also want programmatic control. You can do this by assigning to the view’s value and then dispatching an *input* event to notify the [associated generator](https://github.com/observablehq/notebook-stdlib/blob/master/README.md#Generators_input). Try clicking the play button in the cell below to set *x* to a random value.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":370,"value":"{\n viewof x.value = Math.random() * 100;\n viewof x.dispatchEvent(new CustomEvent(\"input\"));\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":389,"value":"md`You can also animate a view’s value:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":269,"value":"{\n for (let i = 1; i <= 50; ++i) {\n viewof x.value = i;\n viewof x.dispatchEvent(new CustomEvent(\"input\"));\n yield;\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":411,"value":"x // The same x as above (and below)!","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":56,"value":"md`And here are some buttons that modify ${tex`x`} by adding or subtracting:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":61,"value":"{\n const form = html``;\n form.inc.onclick = () => {\n ++viewof x.value;\n viewof x.dispatchEvent(new CustomEvent(\"input\"));\n };\n form.dec.onclick = () => {\n --viewof x.value;\n viewof x.dispatchEvent(new CustomEvent(\"input\"));\n };\n return form;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":391,"value":"md`And we can use it to [synchronize views](/@mbostock/synchronized-views):`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"{\n const input = html``;\n input.oninput = () => {\n viewof x.value = input.valueAsNumber;\n viewof x.dispatchEvent(new CustomEvent(\"input\"));\n };\n const update = () => input.value = viewof x.value;\n viewof x.addEventListener(\"input\", update);\n invalidation.then(() => viewof x.removeEventListener(\"input\", update));\n return update(), input;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":165,"value":"x // The same x as above (and below)!","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W2f","stdlib":"1","titling":"auto"}} 2e:"$2d:body"