36:["$","title",null,{"children":"Buttons to Control Color | Maya Gans | Observable"}] 3e:[] 3a:{"id":"3e31aa0792c12708","slug":"buttons-to-control-color/2","title":"Buttons to Control Color","thumbnail":"8d66d53680ee36f7b07c08ebccaad45807e167613e0de4d55f2eded4968a0793","access_level":"public","create_time":"$D2021-01-29T02:17:56.449Z","update_time":"$D2021-01-29T02:17:56.449Z","view_time":null,"first_public_time":"$D2021-01-30T17:30:22.888Z","has_unpublished_edits":null,"fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"cfa704f351f0d39f","login":"mayagans","name":"Maya Gans","avatar_url":"https://avatars-next.observableusercontent.com/106e9e9b89751753a8046f057b9b885e525e02d6deca7ef8b83b5b1f969a1f26","tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":708,"publish_version":708,"role":null,"authored":false,"authors":[{"type":"individual","id":"8a52a621b0b172dc","login":"mayagans","name":"Maya Gans","avatar_url":"https://avatars-next.observableusercontent.com/106e9e9b89751753a8046f057b9b885e525e02d6deca7ef8b83b5b1f969a1f26","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"8a52a621b0b172dc","login":"mayagans","name":"Maya Gans","avatar_url":"https://avatars-next.observableusercontent.com/106e9e9b89751753a8046f057b9b885e525e02d6deca7ef8b83b5b1f969a1f26","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Buttons to Control Color","cells":[{"id":1,"value":"md`# Buttons to Control Color\n\nTrying to understand the scope of observable functions has led me down a rabbit hole of what the heck viewof does. Time to actually read docs and not just copy and paste things!!`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":621,"value":"md `## Outside Observable`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":607,"value":"md `This chunk is my mental model of how we'd do it outside of observable - make a series of buttons where each button can call changing the color. I don't think this is appropriate for observable though.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":548,"value":"html`\n\n\n\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":671,"value":"function changeColor(color){\n d3.selectAll(\"circle\")\n .transition()\n .duration(2000)\n .style(\"fill\", color)\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":673,"value":"html `

clicking on a button above results in the error Uncaught ReferenceError: changeColor is not defined

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":623,"value":"md `## Observable-ify`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":665,"value":"viewof color_chart = {\n var svg = d3.select(DOM.svg(1000, 130));\n\n var data = [40, 120, 200];\n var circles = svg\n .selectAll('circle')\n .data(data)\n .enter()\n .append('circle')\n .attr('opacity', 1)\n .attr('cx', d => d)\n .attr('cy', 60)\n .attr('r', 10);\n\n // change circles' fill color and radius\n circles.attr(\"fill\", \"gray\");\n circles.attr(\"r\", 30);\n\n // Note that by putting the changeColor function inside this cell,\n // we can select from svg directly, instead of potentially selecting\n // all circles in the notebook.\n function changeColor(color) {\n svg\n .selectAll(\"circle\")\n .transition()\n .duration(2000)\n .style(\"fill\", color);\n }\n // export the changeColor function in the SVG's .value property\n svg.node().value = { changeColor };\n\n return svg.node();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":701,"value":"md`\\`color_chart\\` now consists of an Object containing the \\`changeColor\\` function:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":704,"value":"color_chart","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":586,"value":"{\n const form = html``;\n\n // each of these buttons calls the function in the value of the color_chart cell\n form.red.onclick = () => {\n color_chart.changeColor('#FF2400');\n };\n form.blue.onclick = () => {\n color_chart.changeColor('#000084');\n };\n form.yellow.onclick = () => {\n color_chart.changeColor('#FECC02');\n };\n return form;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":690,"value":"md `I'm still not sure I can succinctly describe what viewof does, but this example did help to show how we can pseudo replicate a global function and apply it to a control...?`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"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"}],"files":"$W3e","stdlib":"1"}} 35:null