2b:null 2c:["$","title",null,{"children":"Visualizing Machine Learning(mco.fyi/vml) | Marc Cohen | Observable"}] 31:T498,md`Do you remember functions from high school math? A [function](https://en.wikipedia.org/wiki/Function_%28mathematics%29) is a relationship that maps an arbitrary input (technically a set of inputs, for now let's keep it simple and assume one variable) ${tex`x`} to a unique computed result ${tex`y`}. [Polynomials](https://nebusresearch.wordpress.com/2016/04/04/a-leap-day-2016-mathematics-a-to-z-polynomials/) are a special case of a function, which have a prescribed form: they involve constant values, called coefficients, multiplied by the input value ${tex`x`} raised to a non-negative exponent, for example ${tex`y = ax^3 + bx^2 +cx + d`}. Here, the coefficients are ${tex`a`}, ${tex`b`}, ${tex`c`}, and ${tex`d`}. The order of a polynomial is the largest power to which ${tex`x`} is raised in this expression so the example just shown would be a third order polynomial. In this notebook you'll specify your own polynomial by selecting an order N and coefficients c₀, c₁, ..., c_N-1. Then, we'll start with a random guess and use gradient descent to find a successively closer approximation of your polynomial. Let's get started...`32:T40d,async function learn() { Data.state = 'learning'; // Define our optimizer, which will use stochastic gradient descent and pass the desired learning rate. const optimizer = tf.train.sgd(learningRate); // Define our training function, which takes the target points and a number of iterations. async function train(xs, ys, numIterations) { if (Data.iter == 0) Data.iter++; let i = Data.iter; for (i = 0; i < numIterations; i++, Data.iter++) { optimizer.minimize(() => { // Define our loss function, the quantity we want TensorFlow to optimize. Data.learnedChanged = true; drawGraph(); // Display the current learned curve. updateTable(); // refresh iteration num and loss value for current iteration return calcLoss(xs, ys); }); await tf.nextFrame(); // Wait for a convenient time to proceed; don't block main thread. } } // Run our train function for the requested number of iterations. await train(Data.xvals, Data.target, numIterations); }33:T74e,md`So what is this code doing? Basically, we're telling TensorFlow to measure the error or loss in our current guess using a metric called [root mean square](https://en.wikipedia.org/wiki/Root_mean_square) (RMS). You can think of the RMS as a measure of how far away we are, with our current guess, from where we want to be, as defined by the actual y values for your selected polynomial. Our loss function tells TensorFlow that we want to keep moving toward a polynomial with the smallest possible RMS. We describe this requirement to TensorFlow in the definition of *optimizer.minimize*. At the end of each iteration, TensorFlow adjusts the learned coefficients so as to achieve a smaller RMS. But there are several coeffients (and in a real-world machine learning model there could be millions) so how does TensorFlow know how much, and in which direction, to adjust each of these values? The answer is TensorFlow does something called symbolic differentiation, which is a tool from calculus that tells us how rapidly your function's y values change with respect to small changes in the x values. In other words, it gives us a sense of the slope or steepness of a function's graph for a given x value. With this analysis in hand, TensorFlow can apply a numerical optimization technique called [gradient descent](https://en.wikipedia.org/wiki/Gradient_descent) to figure out how to fine tune the coefficients so as to nudge the learned polynomial in the right direction. The learning rate parameter can be thought of as a way tell TensorFlow how hard to do this nudging, i.e. how far to move the curve toward the target on each iteration. The cool thing is you don't really need to be able to perform the differentiation or the gradient descent algorithms -- TensorFlow takes care of all the gory details so you can just say, effectively, "optimize my function!".`34:T45a,md`## How does this relate to machine learning? When we build a machine learning model, we are attempting to find a function which provides the best answers (the smallest error) for a broad range of input values. These best answers could be classifying images, assessing the sentiment of a text string, or predicting the future price of a financial investment. Solving those problems involves a similar approach to the process we implemented here - machine learning is about trying to find a function that gives us the best answers for data the model hasn't seen. In this case, the "best answers" correspond to how closely our learned polymonial's y values are to the values produced by the actual polynomial we're trying to learn. The cool thing about Tensorflow is that it gives you the ability to express your problem (training data, the problem you're trying to solve, and how you want to learn the target function) symbolically, without having to implement the optimization logic. **It's a nice example of a programming paradigm that enables you to specify "the what" without worrying about "the how"**. `35:T510,// drawGraph() plots the target, initial, and learned graphs, respectively, based on // the input value of the polynomial order, and the corresponding coefficients. function drawGraph() { // Gen X values if not already done. if (Data.xvals.length == 0) { genX(numPoints); } var coeffs; // Generate target curve if needed. if (Data.targetChanged) { coeffs = []; for (let i = 0; i <= polynomialOrder; i++) { coeffs.push(coeff[i]); } Data.target = genY(numPoints, coeffs); Data.targetChanged = false; } // Generate guessed curve if needed. if (Data.guessChanged) { coeffs = []; Data.Q.length = 0; for (let i = 0; i <= polynomialOrder; i++) { Data.Q.push(tf.variable(tf.scalar())); Data.Q[i].assign(tf.scalar((Math.random() * Data.max * 2) - Data.max)); coeffs.push(Data.Q[i].dataSync()[0]); } Data.guess = genY(numPoints, coeffs); Data.guessChanged = false; } // Generate learned curve if needed. if (Data.learnedChanged) { coeffs = []; for (let i = 0; i <= polynomialOrder; i++) { coeffs.push(Data.Q[i].dataSync()[0]); Data.learned = genY(numPoints, coeffs); } Data.learnedChanged = false; } plot('progress-graph', Data.xvals, Data.target, Data.guess, Data.learned); }36:T8ff,// plot() takes a destination graph and up to three collection of points // (corresponding to the target, initial, and learned polynomials), and // graphs those curves using the plotly.js library. This function also // draws the visual loss surface for first order polynomials. function plot(dest, x, d1, d2, d3) { let l1 = d1? {x: x, y: d1, mode: 'lines', name: 'Target'} : {}; let l2 = d2? {x: x, y: d2, mode: 'lines', name: 'Guess'} : {}; let l3 = d3? {x: x, y: d3, mode: 'lines+markers', name: 'Learned', marker: {size: 12, color: '#00E676'}} : {}; const layout = { margin: {l: 20, r: 20, b: 20, t: 20, pad:0}, legend: {xanchor:"left", yanchor:"top", y: 1, x: 0, orientation: "v"}, xaxis: {range: [-Data.max, Data.max], showgrid: true}, yaxis: {range: [-Data.max, Data.max], showgrid: true}, height: 300, width: 500 }; Plotly.newPlot(dest, [l1, l2, l3], layout, {displayModeBar: false}); if (polynomialOrder == 1) { // For first order polynomials (only) draw the loss surface. if (Data.iter == 0) { let a = []; let delta = .1; for (let next = -Data.max; next <= Data.max; next += delta) { a.push(next); } Data.loss = genLossSurface(a); let data = [ {x: a, y: a, z: Data.loss, type: 'surface'} ]; const layout = { margin: {l: 20, r: 20, b: 20, t: 20, pad:0}, legend: {xanchor:"left", yanchor:"top", y: 1, x: 0, orientation: "v"}, xaxis: {range: [-Data.max, Data.max], showgrid: true}, yaxis: {range: [-Data.max, Data.max], showgrid: true}, height: 300, width: 500 } Plotly.newPlot('loss-graph', data, layout); let x = Data.Q[0].dataSync()[0]; let y = Data.Q[1].dataSync()[0]; let loss = calcLoss(Data.xvals, Data.target); Plotly.addTraces('loss-graph', { x: [x], y: [y], z: [loss.dataSync()[0]], type: 'scatter3d' }); } else { Plotly.deleteTraces('loss-graph', 1); let x = Data.Q[0].dataSync()[0]; let y = Data.Q[1].dataSync()[0]; let loss = calcLoss(Data.xvals, Data.target); Plotly.addTraces('loss-graph', { x: [x], y: [y], z: [loss.dataSync()[0]], type: 'scatter3d' }); } }; }37:[{"id":"319b209d64b0279ee0dcbdf27140ae305892433502f7d346a0aa881c4f46582e4c5c917478c70ea83cefa6173858ae4067c73c70bf825fdee4fb7dd4bde05e41","href":"https://static.observableusercontent.com/files/319b209d64b0279ee0dcbdf27140ae305892433502f7d346a0aa881c4f46582e4c5c917478c70ea83cefa6173858ae4067c73c70bf825fdee4fb7dd4bde05e41","name":"valley.jpg","type":"image/jpeg","lastModified":1584983855401.416,"size":3301547}] 2f:{"id":"ab903886a25280e5","slug":"visualizing-gradient-descent","title":"Visualizing Machine Learning(mco.fyi/vml)","thumbnail":"8b956e45d8282c59db6dfa1404e850e584bd5c2678edbc6ede6323b0db251c0e","access_level":"public","create_time":"$D2020-03-23T16:05:21.515Z","update_time":"$D2020-05-26T19:27:25.497Z","view_time":null,"first_public_time":"$D2020-03-23T16:05:25.679Z","fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"38db1b1d629ae050","login":"marcacohen","name":"Marc Cohen","avatar_url":"https://avatars-next.observableusercontent.com/2f6bd09d7657329e8545e215a2854a50460b2f998137331f55f12458367f82ab","tier":"starter_2024"},"version":446,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"fcc9e87b8e140b44","login":"marcacohen","name":"Marc Cohen","avatar_url":"https://avatars-next.observableusercontent.com/2f6bd09d7657329e8545e215a2854a50460b2f998137331f55f12458367f82ab","tier":null}],"members":[{"type":"individual","id":"fcc9e87b8e140b44","login":"marcacohen","name":"Marc Cohen","avatar_url":"https://avatars-next.observableusercontent.com/2f6bd09d7657329e8545e215a2854a50460b2f998137331f55f12458367f82ab","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Visualizing Machine Learning(mco.fyi/vml)","cells":[{"id":0,"value":"md`# Visualizing Machine Learning
([mco.fyi/vml](https://mco.fyi/vml))\nby [Marc Cohen](https://mco.dev)\n\n

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":9,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":15,"value":"md`\n## Choose a Function\nExperiment with the sliders below to choose a polynomial order and corresponding coefficients. Each time you change a coefficient, the notebook draws a two dimensional graph to illustrate the function's output values (the y axis) for a range of input values (the x axis).\n\nOnce you're happy with your selection, click the *Generate* button to create a random guess at your coefficients. You can generate as many initial guesses as you like, don't worry, we'll keep making more. When you're ready to start the learning process, click the **Learn** button. This uses Tensorflow.js \nto successively improve the initial approximation.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":161,"value":"viewof numIterations = slider({\n min: 1, \n max: 200, \n step: 1, \n value: 100, \n title: \"Iterations\", \n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":19,"value":"viewof polynomialOrder = slider({\n min: 1,\n max: 10,\n step: 1,\n value: 3,\n precision: 1,\n title: \"Polynomial Order (N)\"\n});","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":109,"value":"{\n let z = coeff;\n let eqn = '## y = ';\n for (let i = 0; i <= polynomialOrder; i++) {\n if (coeff[i] == 0) {\n continue;\n }\n if (i > 0) {\n if (coeff[i] >= 0) {\n eqn += ' + ';\n } else {\n eqn += ' - ';\n }\n } else if (coeff[i] < 0) {\n eqn += ' - ';\n }\n let term = ' x^{' + (polynomialOrder - i) + '}'\n if (i == polynomialOrder - 1) {\n term = 'x';\n } else if (i == polynomialOrder) {\n term = '';\n }\n eqn += ' ' + Math.abs(coeff[i]) + term;\n } \n const out = md`${eqn}`\n return out;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":96,"value":"viewof coeff = {\n let formHTML = 'Coefficients';\n for (let i = 0; i <= polynomialOrder; i++) {\n formHTML += '

c' + i + '

'\n }\n const form = html``;\n form.oninput = () => {\n form.value = [];\n form.refresh = true;\n for (let i = 0; i <= polynomialOrder; i++) {\n let elem = document.getElementById('c' + i); \n if (elem) {\n form.value.push(elem.valueAsNumber);\n } else {\n form.value.push(0);\n }\n };\n Data.targetChanged = true;\n }\n //form.oninput();\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":112,"value":"html`\n \n \n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":234,"value":"{\n let graph = `

`\n return html`${graph}`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":115,"value":"{\n let table = `Iteration = , Loss =
\n `;\n for (let i = 0; i <= polynomialOrder; i++) {\n table += ''\n }\n table += '

Coefficient	Target	Predicted
Coefficient ' + i + '	' + coeff[i] + '

';\n return html`${table}`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":118,"value":"md`As you can see, the learned polynomial starts out following the initial curve, and fairly quickly moves to minimize the error between it and the target polynomial. The green dots you see are reminding you that we're using a discrete set of points to perform these calculations (the number of which you can vary in the appendix).`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":121,"value":"md`## How does it work?\nThanks to TensorFlow, this process of successfuly learning your polynomial requires\nonly about 25 lines of JavaScript code. Expand the definition of the next cell to see how we do this.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":125,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":129,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":132,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":135,"value":"md`## Conclusion\nHopefully this notebooks gives you a taste of the power of TensorFlow.js -- despite the simplicity of this example, __you've just run a numerical machine learning algorithm in ~25 lines of JavaScript code right in your browser!__\n\nThanks to:\n- The [Observables](https://beta.observablehq.com/) team for making these lovely reactive notebooks.\n- Monica Dinculescu's brilliant [Hello Tensorflow](https://hello-tensorflow.glitch.me/), which inspired this notebook.\n- The [Fitting a Curve to Synthetic Data](https://js.tensorflow.org/tutorials/fit-curve.html) Tensorflow.js example.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":59,"value":"md`## Appendix A - Supporting Functions\nThis section defines some supporting JavaScript functions. You can skip over this section \nif you don't want to know about the low level details but feel free to examine the code here if you \nwant to understand more completely how this notebook works.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":62,"value":"// genX() randomly generates the requested number of X values from a uniform\n// distribution between -1 and 1 and returns a sorted list of the results.\nfunction genX(numPoints) {\n const xs = tf.randomUniform([numPoints], -Data.max, Data.max);\n for (let i = 0; i < numPoints; i++) {\n Data.xvals[i] = xs.get(i);\n }\n Data.xvals.sort(function(a,b){return a - b})\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":65,"value":"// genY() generates a number of Y values by applying the user's\n// chosen function coefficients over a collection of X values.\nfunction genY(numPoints, coeffs) {\n let Y = [];\n for (let i = 0; i < numPoints; i++) {\n Y[i] = 0;\n for (let j = 0; j < coeffs.length; j++) {\n Y[i] += coeffs[j] * (Data.xvals[i]**(coeffs.length-j-1));\n }\n }\n return Y;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":278,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":73,"value":"// genLossSurface() generates the 3D loss surface for a first order polynomial. This function\n// is the partial derivatives associated with the two free parameters, coefficients c0 and c1.\nfunction genLossSurface(a) {\n Data.minLoss = {x: 999999, y: 999999, z: 999999};\n let n = a.length;\n let loss = new Array(n);\n for (let i = 0; i < n; i++) {\n loss[i] = new Array(n).fill(0);\n }\n for (let i = 0; i < n; i++) {\n for (let j = 0; j < n; j++) {\n let guessed = genY(numPoints, [a[i], a[j]]);\n for (let k = 0; k < numPoints; k++) { \n loss[j][i] += (Data.target[k] - guessed[k]) ** 2;\n }\n loss[j][i] /= numPoints;\n if (loss[j][i] < Data.minLoss.z) {\n Data.minLoss = {x: a[i], y: a[j], z: loss[j][i]};\n }\n }\n }\n return loss;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":76,"value":"// calcLoss() calculates the numerical loss between a set of (X,Y) pairs\n// and the currently learned values for the same X values.\nfunction calcLoss(X, Y) {\n let pred = tf.variable(tf.scalar(0, 'float32'));\n for (let j = 0; j < Data.Q.length; j++) {\n pred = pred.add(Data.Q[j].mul(tf.tensor1d(X).pow(tf.scalar(Data.Q.length-j-1), 'int32')));\n }\n return pred.sub(tf.tensor1d(Y)).square().mean();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":81,"value":"// updateTable() performs a real time update of the display statistics: the current \n// prediction loss, the iteration number, and the currently predicted coefficient set.\nfunction updateTable() {\n let precision = 5;\n let loss = calcLoss(Data.xvals, Data.target);\n document.getElementById(\"pred-loss\").textContent = loss.get().toPrecision(precision); \n document.getElementById(\"iter-num\").textContent = Data.iter; \n for (let i = 0; i <= polynomialOrder; i++) {\n document.getElementById(\"pred\"+i).textContent = Data.Q[i].dataSync()[0].toPrecision(precision);\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":88,"value":"// reset() reinitializes the notebook state, which clears the initial and learned curves, \n// and redraws the graph to show only the target polynomial.\nfunction reset() {\n Data.init = true;\n viewof coeff.dispatchEvent(new CustomEvent(\"input\"));\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":268,"value":"// guess() makes a random guess at the target polynomial.\nfunction guess() {\n Data.guessChanged = true;\n viewof coeff.dispatchEvent(new CustomEvent(\"input\"));\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":85,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":93,"value":"// redraw() initializes the notebook when first loaded and when requested and then draws the current graph.\nredraw = function() {\n if (Data.init) {\n Data.init = false; \n Data.guess.length = 0;\n Data.learned.length = 0;\n Data.Q.length = 0;\n Data.iter = 0;\n }\n document.getElementById('reset').onclick = reset;\n document.getElementById('guess').onclick = guess;\n document.getElementById('learn').onclick = learn;\n Data.mutate++; \n drawGraph(); \n return Data.mutate; \n}()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":21,"value":"md`## Appendix B - Settings and Imports\nThe rest of this section defines some global data, configuration settings, and import dependencies.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":38,"value":"// Number of points to generate for each graphed curve.\nviewof numPoints = slider({\n min: 10, \n max: 200, \n step: 1, \n value: 100, \n title: \"Number of points for function generation\", \n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":39,"value":"// Rate at which we update our coeffiecient estimates during the learning process.\nviewof learningRate = slider({\n min: 0, \n max: 1, \n step: .1, \n value: .5, \n title: \"Learning Rate\",\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":44,"value":"// Store global state data.\nData = ({\n mutate: 0,\n init: true,\n targetChanged: false,\n guessChanged: false,\n learnedChanged: false,\n max: 1,\n Q: [],\n xvals: [],\n target: [],\n guess: [], \n learned: [],\n iter: 0,\n minLoss: {\n x: 999999,\n y: 999999,\n z: 999999,\n }\n});","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":50,"value":"// Import tensorflow.js.\ntf = require(\"@tensorflow/tfjs@0.8.0\");","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":47,"value":"// Import plotly.js.\nPlotly = require(\"https://cdn.plot.ly/plotly-latest.min.js\");","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":34,"value":"// Import some Observable UI widgets.\nimport {button, slider, input} from \"@jashkenas/inputs\";","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W37","stdlib":"1","titling":"auto"}} 30:"$2f:body"