2a:null 2b:["$","title",null,{"children":"Tensorflow.js Interactive Curve Fitting | Zihou Ng | Observable"}] 30:T431,plot = { const plot = svg.append('g').classed('plot', true) .attr('transform', `translate(${margins.left},${margins.top})`); const xAxis = d3.axisBottom(scales[0]).ticks(8).tickSizeOuter(0); const yAxis = d3.axisLeft(scales[1]); const rules = plot.append('g').classed('rules', true); const gridColor = 'rgb(230,230,230)'; rules.append('g').classed('x-grid', true) .attr('transform', `translate(0,${dim[1]})`) .call(d3.axisBottom(scales[0]).ticks(8).tickSize(-dim[1]).tickFormat('')) .call(g => { g.select('.domain').remove(); g.selectAll(".tick line").attr("stroke", gridColor) }); rules.append('g').classed('y-grid', true) .call(d3.axisLeft(scales[1]).ticks(10).tickSize(-dim[0]).tickFormat('')) .call(g => { g.select('.domain').remove(); g.selectAll(".tick line").attr("stroke", gridColor) }); rules.append('g').classed('x-axis', true) .attr("transform", `translate(0, ${dim[1]})`) .call(xAxis); rules.append('g').classed('y-axis', true) .call(yAxis); return plot; }31:T915,{ const n = network.length; const h = sizeSmall[1] * 0.8 / (units * 2); const radius = h * 0.7 const margin = h * 2, lw = 2; const w = sizeSmall[0] / (n + 1); const nodes = []; for (let i = 0; i < n; i++) { const layer = network[i]; const s = margin * (layer.length - 1); const res = []; for (let j = 0; j < layer.length; j++) { res.push({ x: (n - i) * w, y: j * margin - s * 0.5, bias: layer[j].bias }); } nodes.push(res); } const links = []; const weights = []; for (let i = 0; i < n - 1; i++) { const cur = network[i], next = network[i+1]; for (let j = 0; j < cur.length; j++) { for (let k = 0; k < cur[j].kernel.length; k++) { links.push({ x1: nodes[i][j].x, y1: nodes[i][j].y, x2: nodes[i+1][k].x, y2: nodes[i+1][k].y, weight: cur[j].kernel[k] }); weights.push(cur[j].kernel[k]); } } } const linkExt = d3.extent(links, d => d.weight); const weightScale1 = d3.scaleLinear().domain(linkExt).range([0.1,lw]); const weightScale2 = d3.scaleLinear().domain(linkExt).range([0,1]); plotNetwork.selectAll('.link').data(links).join('line').classed('link', true) .attr('x1', d => d.x1) .attr('y1', d => d.y1) .attr('x2', d => d.x2) .attr('y2', d => d.y2) .attr('stroke', d => d3.interpolateGreys(weightScale2(d.weight))) .attr('stroke-width', d => weightScale1(d.weight)); const nodesData = nodes.reduce((acc, val) => acc.concat(val), []); const biasScale = d3.scaleLinear().domain(d3.extent(nodesData, d => d.bias)).range([0,1]); plotNetwork.selectAll('.node').data(nodesData).join('circle').classed('node', true) .attr('cy', d => d.y) .attr('cx', d => d.x) .attr('r', radius) .attr('fill', d => d3.interpolateSpectral(biasScale(d.bias))) .attr('stroke', 'black') .attr('stroke-width', 0.5); svgNetwork.selectAll('.weight').data(weights).join('text').classed('weight', true) .attr('x', (d, i) => ((i / 10 | 0) + 1) * 30 - 10) .attr('y', (d, i) => (i % 10) * 12 + 18) .attr("font-family", "sans-serif") .attr('font-size', 10) .attr('text-anchor', 'end') .attr('fill', 'hsl(0,0%,20%)') .text(d => `${d.toFixed(2)}`); return 'plot network' }32:[] 2e:{"id":"cb3fd54065a7cf33","slug":"tensorflow-js-interactive-curve-fitting","title":"Tensorflow.js Interactive Curve Fitting","thumbnail":"f30db03e2933601bcc59c237fded010b1e0179df1b5eefad025ac1b015a24f6e","access_level":"public","create_time":"$D2019-06-19T04:30:56.763Z","update_time":"$D2019-06-21T06:32:05.665Z","view_time":null,"first_public_time":"$D2019-06-21T04:45:28.944Z","fork":false,"stars":4,"starred":false,"owner":{"type":"team","id":"7fad80bf128915e9","login":"stwind","name":"Zihou Ng","avatar_url":"https://avatars-next.observableusercontent.com/ff8a8f73ad220dcaec180c1e813951d692777837355004f062692b49042d2458","tier":"starter_2024"},"version":1614,"publish_version":1614,"role":null,"authored":false,"authors":[{"type":"individual","id":"dbb85afd665c9e5e","login":"stwind","name":"Zihou Ng","avatar_url":"https://avatars-next.observableusercontent.com/ff8a8f73ad220dcaec180c1e813951d692777837355004f062692b49042d2458","tier":null}],"members":[{"type":"individual","id":"dbb85afd665c9e5e","login":"stwind","name":"Zihou Ng","avatar_url":"https://avatars-next.observableusercontent.com/ff8a8f73ad220dcaec180c1e813951d692777837355004f062692b49042d2458","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":2,"collection":{"id":"bbe30167c2f9fa03","slug":"machine-learning","title":"Machine Learning","owner":{"id":"7fad80bf128915e9","login":"stwind","name":"Zihou Ng"}},"type":"notebook","body":{"title":"Tensorflow.js Interactive Curve Fitting","cells":[{"id":0,"value":"md`# Tensorflow.js Interactive Curve Fitting`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1595,"value":"md`A tiny curve fitting dashboard prototype for Tensorflow.js.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":369,"value":"html`\n\n

${svg.node()}

${svgNetwork.node()}

${svgLoss.node()}

${tex`y=${params.coef.a.toFixed(2)}sin(${params.coef.b.toFixed(2)}x)+${params.coef.c.toFixed(2)}x+\\epsilon`}

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1562,"value":"viewof params = makePanels({\n 'coef': {\n a: ui.slider(['amp',-10,10,0.01,2,7.0]),\n b: ui.slider(['freq',-1,1,0.01,2,0.75]),\n c: ui.slider(['slope',-1,1,0.01,2,0.5]),\n }\n});","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":722,"value":"viewof pauseBtn = button({ value: 'start / pause' })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1320,"value":"viewof resetBtn = button({ value: 'reset' })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1495,"value":"md`## Data`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":61,"value":"f = x => params.coef.a * Math.sin(params.coef.b * x) + params.coef.c * x + randNorm() * 0.8","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":479,"value":"xs = {\n const rand = d3.randomUniform(-15, 15);\n return d3.range(200).map(() => rand());\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":293,"value":"ys = xs.map(f)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":553,"value":"xsT = tensorOf(xs)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":536,"value":"ysT = tensorOf(ys)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":587,"value":"xsTest = d3.range(-15,15,30/100)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":661,"value":"xsTestT = tensorOf(xsTest)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":560,"value":"losses = {\n const res = this || [];\n if (paused) return yield res;\n while (true) {\n res.push(await model.trainOnBatch(xsT, ysT));\n if (res.length > epoch) res.shift();\n yield res;\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":351,"value":"predictions = {\n losses;\n const ret = model.predict(xsTestT);\n return Generators.disposable(ret.dataSync(), () => ret.dispose());\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":425,"value":"md`## Model`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1314,"value":"units = 10","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":306,"value":"model = {\n resetBtn;\n const model = tf.sequential();\n model.add(tf.layers.dense({\n units: units,\n batchInputShape: [null, 1],\n activation: 'tanh',\n kernelInitializer: 'randomNormal',\n biasInitializer: 'randomNormal'\n }));\n model.add(tf.layers.dense({\n units: 1,\n kernelInitializer: 'randomNormal',\n biasInitializer: 'randomNormal'\n }));\n await model.compile({\n optimizer: tf.train.rmsprop(0.1, 0.8),\n loss: 'meanSquaredError',\n });\n return model;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":423,"value":"md`## Diagrams`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":392,"value":"margins = ({ top: 10, right: 10, bottom: 20, left: 20 })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1519,"value":"md`### Data`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":361,"value":"size = [width * 0.75, 300]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":389,"value":"dim = [size[0] - margins.left - margins.right, size[1] - margins.top - margins.bottom]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":398,"value":"scales = {\n const x = d3.scaleLinear().domain([-15, 15]).range([0, dim[0]]);\n const y = d3.scaleLinear().domain([-25, 25]).range([dim[1], 0]);\n return [x, y];\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":364,"value":"svg = d3.select(DOM.svg(size[0], size[1]))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":374,"value":"$30","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":405,"value":"{\n const points = d3.zip(xs,ys).map(([xi, yi]) => [scales[0](xi), scales[1](yi)]);\n plot\n .selectAll('.origin').data(points).join('circle').classed(\"origin\", true)\n .attr('cx', d => d[0])\n .attr('cy', d => d[1])\n .attr('r', 6)\n .attr('stroke', 'none')\n .attr('fill', 'rgb(202,38,38)')\n .attr('fill-opacity', 0.2)\n return 'plot original'\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":431,"value":"{\n const points = d3.zip(xsTest,predictions).map(([xi, yi]) => [scales[0](xi), scales[1](yi)]);\n plot.selectAll('.predicted').data([points]).join('path').classed(\"predicted\", true)\n .attr('d', d3.line())\n .attr('stroke', 'blue')\n .attr('stroke-width', 2)\n .attr('fill', 'none');\n return 'plot predicted'\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1532,"value":"md`### Loss`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1176,"value":"sizeSmall = [width * 0.25, size[1] * 0.5];","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1209,"value":"scales1 = {\n const x = d3.scaleLinear().domain([0, epoch]).range([0, sizeSmall[0]]);\n const y = d3.scaleLinear().domain([0, 70]).range([sizeSmall[1]-margins.bottom-margins.top-7, 0]);\n return [x, y];\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1181,"value":"svgLoss = d3.select(DOM.svg(sizeSmall[0], sizeSmall[1]));","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1187,"value":"plotLoss = {\n const plot = svgLoss.append('g').classed('plot', true)\n .attr('transform', `translate(${margins.left},${margins.top})`);\n \n const xAxis = d3.axisBottom(scales1[0]).ticks(8).tickSizeOuter(0);\n const yAxis = d3.axisLeft(scales1[1]).ticks(7);\n\n const rules = plot.append('g').classed('rules', true);\n \n rules.append('g').classed('y-axis', true).call(yAxis);\n \n return plot;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1206,"value":"{\n plotLoss.selectAll('.loss')\n .data([losses.map((l, i) => [scales1[0](i), scales1[1](l)])])\n .join('path').classed('loss', true)\n .attr('stroke', 'red')\n .attr('fill', 'none')\n .attr('d', line);\n \n plotLoss.selectAll('.loss-val')\n .data([losses.length > 0 ? losses[losses.length-1] : 0])\n .join('text').classed('loss-val', true)\n .attr('x', sizeSmall[0]-95)\n .attr('y', margins.top)\n .attr(\"font-family\", \"sans-serif\")\n .attr('font-size', 12)\n .text(d => `loss: ${d.toFixed(4)}`);\n return 'plot loss'\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1536,"value":"md`### Network`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1008,"value":"network = {\n losses;\n const layers = [];\n const parseLayer = layer => {\n const nNodes = layer.shape[1];\n const weights = layer.sourceLayer.getWeights();\n \n if (weights.length > 0) {\n const biases = Array.from(weights[1].dataSync());\n const kernel = Array.from(weights[0].dataSync());\n layers.push({ biases, kernel });\n } else {\n layers.push({ biases: [0], kernel: [] });\n } \n \n if (layer.inputs.length > 0) parseLayer(layer.inputs[0])\n }\n \n parseLayer(model.layers[model.layers.length - 1].output);\n \n const nodes = [];\n for (let i = 0; i < layers.length - 1; i++) {\n const cur = layers[i], next = layers[i + 1];\n const res = [], w = next.biases.length;\n for (let j = 0; j < cur.biases.length; j++) {\n res.push({\n bias: cur.biases[j],\n kernel: cur.kernel.slice(j * w, (j + 1) * w)\n });\n }\n nodes.push(res);\n }\n nodes.push([[{ bias: 0, kernel: [] }]])\n \n return nodes;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1430,"value":"svgNetwork = d3.select(DOM.svg(sizeSmall[0], sizeSmall[1]));","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1433,"value":"plotNetwork = svgNetwork.append('g').classed('plot', true).attr('transform', `translate(20,${sizeSmall[1]*0.5})`);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1438,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":514,"value":"md`## Misc`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1213,"value":"line = d3.line()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":493,"value":"randNorm = d3.randomNormal()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":563,"value":"paused = {\n pauseBtn;\n return !this;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1193,"value":"epoch = 40","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":696,"value":"fps = {\n let last = [performance.now()];\n return cell => {\n if (last.length >= 10) {\n last.shift();\n }\n const delta = (performance.now() - last[0]) / last.length;\n last.push(performance.now());\n const fps = Math.round(1000 / delta);\n return fps;\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":543,"value":"tensorOf = (data, shape = [data.length, 1]) => {\n const tensor = tf.tensor(data, shape);\n return Generators.disposable(tensor, () => tensor.dispose());\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1556,"value":"ui = {\n const asDict = pairs => Object.assign({}, ...Array.from(pairs, ([key, val]) => ({ [key]: val}) ));\n const params = (keys, vals) => asDict(keys.map((key, i) => [key, vals[i]])); \n return {\n slider: vals => slider(params(['title','min','max','step','precision','value'], vals)),\n };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1559,"value":"makePanels = options => {\n const values = dict => Object.keys(dict).reduce((acc, k) => (acc.push(dict[k]), acc), []);\n const panels = Object.keys(options).map(k => html`

${values(options[k])}

`);\n const element = html`\n \n ${panels}\n `\n element.oninput = function() {\n element.value = Object.keys(options).reduce((acc, k) => {\n acc[k] = Object.keys(options[k]).reduce((acc1, n) => (acc1[n] = options[k][n].value, acc1), {});\n return acc;\n }, {});\n }\n element.oninput();\n return element;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":5,"value":"md`## Appendix`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":13,"value":"tf = require('@tensorflow/tfjs@1.2.1')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":16,"value":"d3 = require('d3@5')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":321,"value":"import {slider,button} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W32","stdlib":"1","titling":"auto"}} 2f:"$2e:body"