31:[] 2f:{"title":"Non-Reactive Control Flow","cells":[{"id":0,"value":"md`# Non-Reactive Control Flow`","pinned":false,"hidden":false,"mode":"ojs"},{"id":157,"value":"md`## Inputs\nA change in any of these sliders won't automatically propagate to cells below the Generate Data button. It will however set a mutable variable \\`isUpdated\\` to \\`false\\`. \n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2,"value":"cubicFn = {\n const div = html`\n `;\n \n const inputs = div.querySelectorAll('div');\n inputs.forEach(d => {\n const input = d.querySelector('input'); \n const span = d.querySelector('span.value');\n input.oninput = () => {\n span.innerHTML = input.valueAsNumber;\n mutable isUpdated = false;\n };\n });\n \n return div;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":167,"value":"md`## Reactive Cell\nThis cell still gets re-evaluated automatically when \\`isUpdated\\` is mutated`","pinned":false,"hidden":false,"mode":"ojs"},{"id":152,"value":"{\n isUpdated;\n const inputs = [...cubicFn.querySelectorAll('input')].map(x => x.valueAsNumber);\n return tex`y = (${inputs[0]})x^3 + (${inputs[1]})x^2 + (${inputs[2]})x + (${inputs[3]}) + \\mathcal{N}(0, ${inputs[4]}^2)`\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":109,"value":"mutable isUpdated = true","pinned":false,"hidden":false,"mode":"ojs"},{"id":177,"value":"md`The button is **${isUpdated ? 'disabled' : 'enabled'}** as the data generated earlier is ${isUpdated ? 'updated' : 'no longer valid'}.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":62,"value":"update = {\n const button = html``;\n button.disabled = isUpdated; \n button.onclick = () => {\n const inputs = [...cubicFn.querySelectorAll('input')].map(x => x.valueAsNumber);\n mutable coeff = inputs.slice(0, 4);\n mutable sd = inputs[4];\n button.disabled = true; \n mutable isUpdated = true; \n }\n return button;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":73,"value":"mutable coeff = [-0.8, -0.2, 0.9, 0.5, 0.1]","pinned":false,"hidden":false,"mode":"ojs"},{"id":75,"value":"mutable sd = 0.1","pinned":false,"hidden":false,"mode":"ojs"},{"id":170,"value":"md`## Non-Reactive Cell\nThe operation in the cell below could be expensive and would slow down the browser significantly as users play with the sliders. Instead of using values generated from those inputs directly (e.g., \\`viewof\\`) in the code, we can create a new set of mutable variables (\\`coeff\\` and \\`sd\\`) that are updated only after the button is clicked. \n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":67,"value":"inputData = {\n const data = tf.tidy(() => {\n const numPoints = 200;\n const [a, b, c, d] = coeff.map(i => tf.scalar(i)); // a = tf.scalar(coeff[0]), and so on\n\n const x = tf.randomUniform([numPoints], -1, 1);\n const y = a.mul(x.pow(tf.scalar(3)))\n .add(b.mul(x.square()))\n .add(c.mul(x))\n .add(d)\n .add(tf.randomNormal([numPoints], 0, sd));\n\n return {x, y}; \n });\n yield data;\n \n // This cell is re-evaluated and creates new tensors as we interact with the sliders to adjust parameters.\n // We need to manually dispose them to avoid memory leak. \n // See: https://beta.observablehq.com/@nsthorat/clean-up-deeplearn-js-tensor-generator-cells\n try {\n yield invalidation;\n } finally {\n data.x.dispose();\n data.y.dispose();\n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":136,"value":"{\n const x = await inputData.x.data();\n const y = await inputData.y.data();\n \n const values = [...x].map((xVal, i) => { // Spread operator: [...x] = Array.from(x)\n return {\n \"x\": xVal,\n \"y\": y[i]\n };\n });\n \n return vegalite({\n width: 400,\n height: 300,\n \"data\": { values },\n \"layer\": [{\n \"mark\": \"circle\",\n \"encoding\": {\n \"x\": {\"field\": \"x\", \"type\": \"quantitative\"},\n \"y\": {\"field\": \"y\", \"type\": \"quantitative\"}\n }\n }],\n \"config\": {\n \"circle\": {\"color\": \"#1E4865\", \"size\": 50, \"opacity\": 0.6}\n }\n })\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":80,"value":"tf = require('@tensorflow/tfjs')","pinned":false,"hidden":false,"mode":"ojs"},{"id":132,"value":"vegalite = require('@observablehq/vega-lite')","pinned":false,"hidden":false,"mode":"ojs"},{"id":92,"value":"html`\n`","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}