2a:[] 29:{"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"},{"id":621,"value":"md `## Outside Observable`","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":548,"value":"html`\n\n\n\n`","pinned":true,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"id":623,"value":"md `## Observable-ify`","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":701,"value":"md`\\`color_chart\\` now consists of an Object containing the \\`changeColor\\` function:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":704,"value":"color_chart","pinned":true,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"id":6,"value":"d3 = require(\"d3@6\")","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W2a","stdlib":"1","titling":"auto"}