3e:null 3f:["$","title",null,{"children":"Visualizing Patterns in the MNIST Handwritten Digits Dataset | Tasneem Nora Khokhar | Observable"}] 45:T70f,The differences of each digit given these properties are still unclear. Clearly, through this short exploration, you should realize that counting the pixels in an image is simply not enough information to identify specific digits. What other ways can we try? A *better* idea is to use *neural networks*. ### What is a neural network? Neural networks (or more specifically, *Artificial Neural Networks*) are computer models that consist of *neurons*. Each neuron contains information of a *weight* and each layer has a *bias*. Weights help determine the importance of certain neurons, and the *bias* for each layer sets a threshold that must be passed for neurons in the next layer to receive a non-zero input. The first layer of a network is the input image. Preceding layers have neurons whose input is the sum of the product of all the inputs for the neurons in the previous layer with the weights for each of those respective neurons. If this isn't very clear, just skip this explanation (as this interactive focuses on the result not the process), or take a look at some resources below: - [Building Neural Networks from Scratch, JC-ProgJava](https://jc-progjava.github.io/Building-Neural-Networks-From-Scratch/content.html), a newer introduction to neural networks. Programming is done in Java, however, it is easy to follow along in other languages. - [Neural Networks and Deep Learning](http://neuralnetworksanddeeplearning.com/), a book written by Michael Nielsen. Programming is done in Python but again is quite easy to follow with other languages. A pre-trained network is given below. The network has 784 neurons for input (for our 28 x 28 image), a middle layer of 32 neurons, and an output layer of 10 neurons (1 for each digit). We can represent this structure as: ${tex`[784, 32, 10]`}.46:T18e2,{ var canvas, ctx, flag = false, prevX = 0, currX = 0, prevY = 0, currY = 0, dot_flag = false; var tempcanvas = html`

`; var count = 0; var x = "black", y = 30; init(); var w = 0; var h = 0; var inc = 0; var canvasimg = html` Display digit as PNG (portable network graphics)

`; function init() { canvas = html`

`; ctx = canvas.getContext("2d"); w = canvas.width; h = canvas.height; canvas.addEventListener("mousemove", function (e) { findxy('move', e) }, false); canvas.addEventListener("mousedown", function (e) { findxy('down', e) }, false); canvas.addEventListener("mouseup", function (e) { findxy('up', e) }, false); canvas.addEventListener("mouseout", function (e) { findxy('out', e) }, false); canvas.addEventListener("touchmove", function (e) { findxy('move', e) }, false); canvas.addEventListener("touchstart", function (e) { findxy('down', e) }, false); canvas.addEventListener("touchend", function (e) { findxy('up', e) }, false); } var testIMG = new Image() testIMG = await FileAttachment("brush.png").image() function draw() { currX -= 12; currY -= 12; ctx.drawImage(testIMG, currX, currY); ctx.drawImage(testIMG, currX, currY); } function erase() { buttonClear ctx.clearRect(0, 0, w, h); canvasimg.src = ""; } let decision = `

9` canvas.addEventListener('mousemove', e => { inc++; if (inc % 20 == 0) { canvasimg.style.border = "2px solid"; tempcanvas.getContext('2d').clearRect(0, 0, tempcanvas.width, tempcanvas.height); tempcanvas.getContext('2d').drawImage(canvas, 0, 0, canvas.width, canvas.height, 0, 0, 28, 28); var dataURL = tempcanvas.toDataURL(); canvasimg.src = dataURL; var data = []; var counter = 0; for (let y = 0; y < 28; y++) { for (let x = 0; x < 28; x++) { data[counter] = parseFloat(tempcanvas.getContext('2d').getImageData(x, y, 1, 1).data[3]) / 255.0; counter++; } } let outpercent = importedNetwork.test(data); for (let i = 0; i <= 9; i++) { document.getElementsByClassName("decision")[i].style.height = (Math.round(outpercent[i] * 100.0 * 100.0) / 100.0) + "px"; document.getElementsByClassName("decision")[i].style.marginTop = (100 - (Math.round(outpercent[i] * 100.0 * 100.0) / 100.0)) + "px"; } var max = 0; var indexMax = 0; for (let i = 0; i <= 9; i++) { var height = document.getElementsByClassName("decision")[i].style.height; if (parseFloat(height.substring(0, height.length - 2)) > max) { max = parseFloat(height.substring(0, height.length - 2)); indexMax = i; } } for (let i = 0; i <= 9; i++) { document.getElementsByClassName("decision")[i].style.backgroundColor = "black"; } document.getElementsByClassName("decision")[indexMax].style.backgroundColor = "#e6ae67"; }}); function findxy(res, e) { if (res == 'down') { prevX = currX; prevY = currY; currX = e.clientX - canvas.getBoundingClientRect().left; currY = e.clientY - canvas.getBoundingClientRect().top; flag = true; dot_flag = true; if (dot_flag) { ctx.beginPath(); ctx.fillStyle = x; ctx.fillRect(currX, currY, 2, 2); ctx.closePath(); dot_flag = false; } } if (res == 'up' || res == "out") { flag = false; } if (res == 'move') { if (flag) { prevX = currX; prevY = currY; currX = e.clientX - canvas.getBoundingClientRect().left; currY = e.clientY - canvas.getBoundingClientRect().top; draw(); } } } return html`

${buttonClear} ${canvas} ${tempcanvas} ${decision}

` }47:T4984,function trainNetwork() { const Error = Object.freeze({ MEAN_SQUARED: 0, BINARY_CROSS_ENTROPY: 1, CATEGORICAL_CROSS_ENTROPY: 2 }) const ActivationFunction = Object.freeze({ ELU: 3, IDENTITY: 4, LEAKY_RELU: 5, RELU: 6, SIGMOID: 7, SOFTMAX: 8, SOFTPLUS: 9, TANH: 10 }) class Vector { vector; constructor(length) { this.vector = new Array(length).fill(0) } setVector(values) { this.vector = values; } length() { return this.vector.length; } values() { return this.vector; } get(index) { return this.vector[index]; } set(index, value) { this.vector[index] = value; } total() { let sum = 0; for (let i = 0; i < this.length(); i++) { sum += this.get(i); } return sum; } add(anotherVector) { if (anotherVector.length() !== this.length()) { return } let output = new Vector(this.length()); for (let i = 0; i < output.length(); i++) { output.set(i, this.get(i) + anotherVector.get(i)); } return output; } mult(anotherVector) { if (anotherVector.length() !== this.length()) { return } let output = new Vector(this.length()); for (let i = 0; i < output.length(); i++) { output.set(i, this.get(i) * anotherVector.get(i)); } return output; } div(anotherVector) { if (anotherVector.length() !== this.length()) { return } let output = new Vector(this.length()); for (let i = 0; i < output.length(); i++) { output.set(i, this.get(i) / anotherVector.get(i)); } return output; } subtract(anotherVector) { if (anotherVector.length() !== this.length()) { return } let output = new Vector(this.length()); for (let i = 0; i < output.length(); i++) { output.set(i, this.get(i) - anotherVector.get(i)); } return output; } multConstant(value) { let output = new Vector(this.length()); for (let i = 0; i < output.length(); i++) { output.set(i, this.get(i) * value); } return output; } addConstant(value) { let output = new Vector(this.length()); for (let i = 0; i < output.length(); i++) { output.set(i, this.get(i) + value); } return output; } fill(value) { for (let i = 0; i < this.length(); i++) { this.set(i, value); } return this; } fillGaussian() { for (let i = 0; i < this.length(); i++) { this.set(i, (Math.random() - 0.5) / 5.0); } return this; } log() { let out = new Vector(this.length()); for (let i = 0; i < this.length(); i++) { out.set(i, Math.log(this.get(i))); } return out; } } class Layer { isOutputLayer = false; activationFunction; errorType; vectors; bias; error; displayError; BATCH_SIZE = 1; currentInputBatchId = 0; input; output; deltas; deltaBias; weightedSum; constructor(iol, af, e) { this.isOutputLayer = iol; this.activationFunction = af; this.errorType = e; } softmax(val) { let out = new Vector(val.length()); let total = 0.0; for (let i = 0; i < val.length(); i++) { total += Math.exp(val.get(i)); } if (total === 0.0) { return } for (let i = 0; i < val.length(); i++) { out.set(i, (Math.exp(val.get(i)) / total)); } return out; } elu(val) { return val > 0 ? val : Math.exp(val) - 1.0; } sigmoid(val) { return (1.0 / (1.0 + Math.exp(-val))); } relu(val) { return val <= 0 ? 0 : val; } leaky_relu(val) { return val <= 0 ? 0.01 * val : val; } softplus(val) { return Math.log(1.0 + Math.exp(val)); } tanh(val) { return (Math.exp(val) - Math.exp(-val)) / (Math.exp(val) + Math.exp(-val)); } initDeltaArray() { this.deltas = []; for (let i = 0; i < this.vectors.length; i++) { this.deltas.push(new Vector(this.vectors[i].length()).fill(0)); } this.deltaBias = new Vector(this.vectors.length); if (this.isOutputLayer) { this.displayError = new Vector(this.vectors.length); } } setBatchSize(BATCH_SIZE) { this.BATCH_SIZE = BATCH_SIZE; } length() { return this.vectors.length; } getError() { return this.error; } getDisplayError() { return this.displayError; } resetDisplayError() { if (this.displayError == null || !this.isOutputLayer) { return; } this.displayError = this.displayError.multConstant(0); } getOutput() { return this.output; } getErrorType() { return this.errorType; } getBias() { return this.bias; } getActivationFunction() { return this.activationFunction; } feed(input) { this.input = input; this.output = this.test(input); } test(input) { if (input.length() !== this.vectors[0].length()) { return } let output = new Vector(this.vectors.length); for (let i = 0; i < this.vectors.length; i++) { output.set(i, this.vectors[i].mult(input).total()); } output = output.add(this.bias); this.weightedSum = output; output = this.activation(this.weightedSum); return output; } activation(val) { let valSize = val.length(); let out = new Vector(valSize); for (let index = 0; index < valSize; index++) { switch (this.activationFunction) { case ActivationFunction.IDENTITY: return val; case ActivationFunction.TANH: out.set(index, this.tanh(val.get(index))); break; case ActivationFunction.RELU: out.set(index, this.relu(val.get(index))); break; case ActivationFunction.LEAKY_RELU: out.set(index, this.leaky_relu(val.get(index))); break; case ActivationFunction.SIGMOID: out.set(index, this.sigmoid(val.get(index))); break; case ActivationFunction.SOFTPLUS: out.set(index, this.softplus(val.get(index))); break; case ActivationFunction.ELU: out.set(index, this.elu(val.get(index))); break; case ActivationFunction.SOFTMAX: return this.softmax(val); default: return } } return out; } derivative(index) { let outLength = this.output.length(); let returnVector = new Vector(outLength); switch (this.activationFunction) { case ActivationFunction.IDENTITY: return new Vector(this.output.length()).fill(1.0); case ActivationFunction.TANH: for (let i = 0; i < outLength; i++) { returnVector.set(i, 1.0 - this.output.get(i) * this.output.get(i)); } return returnVector; case ActivationFunction.RELU: { for (let i = 0; i < outLength; i++) { returnVector.set(i, this.output.get(i) < 0.0 ? 0.0 : 1.0); } return returnVector; } case ActivationFunction.LEAKY_RELU: { for (let i = 0; i < outLength; i++) { returnVector.set(i, this.output.get(i) < 0.0 ? 0.01 : 1.0); } return returnVector; } case ActivationFunction.SIGMOID: return this.output.mult(this.output.multConstant(-1.0).addConstant(1.0)); case ActivationFunction.SOFTMAX: { for (let i = 0; i < outLength; i++) { if (i === index) { returnVector.set(i, this.output.get(i) * (1.0 - this.output.get(i))); } else { returnVector.set(i, -1.0 * this.output.get(i) * this.output.get(index)); } } return returnVector; } case ActivationFunction.SOFTPLUS: { for (let i = 0; i < outLength; i++) { returnVector.set(i, this.sigmoid(this.weightedSum.get(i))); } return returnVector; } case ActivationFunction.ELU: { for (let i = 0; i < outLength; i++) { if (this.output.get(i) >= 0) { returnVector.set(i, 1.0); } else { returnVector.set(i, Math.exp(this.weightedSum.get(i))); } } return returnVector; } default: return } } learn(targetOutput, nextLayer, alpha) { if (alpha === 0) { return } for (let index = 0; index < this.vectors.length; index++) { let error; if (this.isOutputLayer) { let errorCalc = this.calcError(this.output, targetOutput); error = errorCalc[0]; this.displayError = this.displayError.add(errorCalc[1]); } else { error = new Vector(this.vectors.length); for (let indice = 0; indice < nextLayer.vectors.length; indice++) { error.set(index, error.get(index) + nextLayer.vectors[indice].get(index) * nextLayer.getError().get(indice)); } } error = error.mult(this.derivative(index)); this.error = error; let delta = this.input.multConstant(error.get(index)); delta = delta.multConstant(alpha); this.deltas[index] = this.deltas[index].add(delta); this.deltaBias.set(index, this.deltaBias.get(index) + error.get(index) * alpha); } this.currentInputBatchId++; if (this.currentInputBatchId === this.BATCH_SIZE) { this.currentInputBatchId = 0; for (let index = 0; index < this.vectors.length; index++) { this.vectors[index] = (this.vectors[index].subtract(this.deltas[index])); this.deltas[index] = ( this.deltas[index].multConstant(0)); } this.bias = this.bias.subtract(this.deltaBias); this.deltaBias = this.deltaBias.multConstant(0); } } calcError(output, targetOutput) { switch (this.errorType) { case Error.MEAN_SQUARED: { let err = (output.subtract(targetOutput)); return [err.multConstant(2), err.mult(err)]; } case Error.BINARY_CROSS_ENTROPY: { let display = (targetOutput.mult(output.log()).add((targetOutput.multConstant(-1.0).addConstant(1.0))).mult(output.multConstant(-1.0).addConstant(1.0).log())).multConstant(-1.0); return [(output.subtract(targetOutput)).div(output.mult(output.multConstant(-1.0).addConstant(1.0))), display]; } case Error.CATEGORICAL_CROSS_ENTROPY: { let display = targetOutput.mult(output.log()).multConstant(-1.0); return [output.subtract(targetOutput), display]; } default: { return } } } fillGaussian(size, numVectors) { this.vectors = []; for (let i = 0; i < numVectors; i++) { this.vectors.push(new Vector(size).fillGaussian()); } this.bias = new Vector(numVectors).fillGaussian(); this.initDeltaArray(); return this; } } class Network { layers; constructor(config, activationFunctions, errorType) { if ((config.length() - 1) !== activationFunctions.length) { return } this.layers = []; for (let i = 0; i < config.length() - 1; i++) { if (i === activationFunctions.length - 1) { this.layers.push(new Layer(true, activationFunctions[i], errorType).fillGaussian(config.get(i), config.get(i + 1))); } else { this.layers.push(new Layer(false, activationFunctions[i], errorType).fillGaussian(config.get(i), config.get(i + 1))); } } } getMax(out) { let index = 0; let val = Number.NEGATIVE_INFINITY; for (let i = 0; i < out.length(); i++) { if (out.get(i) > val) { val = out.get(i); index = i; } } return index; } train(input, target, epoch, alpha, BATCH_SIZE) { if (input.length !== target.length) { return } if (BATCH_SIZE <= 0) { return } else if (input.length % BATCH_SIZE !== 0) { return } for (let i = 0; i < this.layers.length; i++) { this.layers[i].setBatchSize(BATCH_SIZE); } for (let iter = 1; iter <= epoch; iter++) { for (let i = 0; i < this.layers.length; i++) { this.layers[i].resetDisplayError(); } for (let index = 0; index < input.length; index++) { let i = new Vector(input[index].length) i.setVector(input[index]); this.layers[0].feed(i); for (let indice = 1; indice < this.layers.length; indice++) { this.layers[indice].feed(this.layers[indice - 1].getOutput()); } let j = new Vector(target[index].length) j.setVector(target[index]); this.layers[this.layers.length - 1].learn(j, null, alpha); for (let indice = 1; indice < this.layers.length; indice++) { this.layers[this.layers.length - indice - 1].learn(null, this.layers[this.layers.length - indice], alpha); } if (index % 10000 === 0) { let str = "Epoch: " + iter + " Error: " + this.layers[this.layers.length - 1].getDisplayError().total() / (index + 1); console.log(str) } } if (Number.isNaN(this.layers[this.layers.length - 1].getDisplayError().total())) { return } let corrects = 0; for (let i = 0; i < input.length; i++) { let x = this.getMax(this.test(input[i])); let actual = -1; for (let j = 0; j < input[i].length; j++) { if (target[i][j] === 1) { actual = j; break; } } corrects += x === actual ? 1 : 0; } let accuracyTrain = 100.0 * corrects / 60000.0; let str = "Epoch: " + iter + " Error: " + this.layers[this.layers.length - 1].getDisplayError().total() / (input.length); console.log(str + "\n"); console.log("\tTrain Acc. (%%): %.2f\n", accuracyTrain); console.log(this.layers) } } test(input) { let i = new Vector(input.length) i.setVector(input) let out = this.layers[0].test(i); for (let index = 1; index < this.layers.length; index++) { out = this.layers[index].test(out); } return out; } } let c = new Vector(3).fill(0); c.set(0, 784) c.set(1, 32) c.set(2, 10) let af = [ActivationFunction.SIGMOID, ActivationFunction.SIGMOID]; let net = new Network(c, af, Error.MEAN_SQUARED) let input = [] let target = [] let d = dataFormed.sort(() => Math.random() - 0.5); for (let i = 0; i < dataFormed.length; i++) { let ex = [] let tar = [] for (let j = 0; j < d[i].length; j++) { ex.push(d[i][j].value) } for (let k = 0; k < 10; k++) { if (d[i].number === k) { tar.push(1) } else { tar.push(0) } } input.push(ex) target.push(tar) } net.train(input, target, 5, 0.01, 1000) console.log("done!") }48:T763,class Layer { activationFunction; vectors; bias = []; constructor(vectorList, bias, activationFunction, errorType) { this.vectors = vectorList; this.activationFunction = activationFunction; this.bias = bias; } total(val) { let sum = 0; for (let v in val) { sum += parseFloat(val[v]); } return sum; } add(vec, vec2) { let size = vec.length; let sum = []; for (let i = 0; i < size; i++) { sum[i] = parseFloat(vec[i]) + parseFloat(vec2[i]); } return sum; } mult(vec, vec2) { let size = vec.length; let prod = []; for (let i = 0; i < size; i++) { prod[i] = parseFloat(vec[i]) * parseFloat(vec2[i]); } return prod; } get(index) { return this.vectors[index]; } getBias() { return this.bias; } getOutput() { return this.output; } test(input) { let output = []; for (let i = 0; i < this.vectors.length; i++) { output[i] = this.total(this.mult(this.vectors[i], input)); } output = this.activation(output); this.output = output; return output; } leaky_relu(val) { return val <= 0 ? 0.01 * val : val; } softmax(val) { let valLength = val.length; let out = []; let total = 0.0; for (let v in val) { total += Math.exp(parseFloat(val[v])); } for (let i = 0; i < valLength; i++) { out[i] = (Math.exp(val[i]) / total); } return out; } activation(val) { let valSize = val.length; let out = []; for (let index = 0; index < valSize; index++) { switch (this.activationFunction) { case "LEAKY_RELU": out[index] = this.leaky_relu(val[index]); break; case "SOFTMAX": return this.softmax(val); case "SIGMOID": out[index] = 1.0 / (1 + Math.exp(-val[index])) } } return out; } }49:T4be,importedNetwork = { let networkString = networkConfig; var layersNetwork = []; { let layerAndBiasString = networkString.split("bias:"); let layers = layerAndBiasString[0].split("!"); let weights = []; for (let i = 0; i < layers.length; i++) { layers[i] = layers[i].trim(); let toNeurons = layers[i].split("\n"); weights[i] = []; for (let j = 0; j < toNeurons.length; j++) { toNeurons[i] = toNeurons[i].trim(); let weightArray = toNeurons[j].split(","); weights[i][j] = []; for (let k = 0; k < weightArray.length; k++) { weights[i][j][k] = parseFloat(weightArray[k]); } } } let bias = layerAndBiasString[1].trim().split("\n"); let biases = []; for (let i = 0; i < bias.length; i++) { let toNeurons = bias[i].split(","); biases[i] = []; for (let j = 0; j < toNeurons.length; j++) { biases[i][j] = parseFloat(toNeurons[j]); } } var activate = ["LEAKY_RELU", "SOFTMAX"] for (let index = 0; index < weights.length; index++) { layersNetwork[index] = new Layer(weights[index], biases[index], activate[index]); } } return new Network(layersNetwork); }4a:[{"id":"03dac9e66e975932a520823be3447127bd47064276e3b15a55f124c7323788d8f5340f350571ccb088cfbadb9949883dad43efe290ef2db6a1e332264d7c0dea","href":"https://static.observableusercontent.com/files/03dac9e66e975932a520823be3447127bd47064276e3b15a55f124c7323788d8f5340f350571ccb088cfbadb9949883dad43efe290ef2db6a1e332264d7c0dea","name":"MnistExamples.png","type":"image/png","lastModified":1682964594349.461,"size":70938},{"id":"61b83208da75d48785850817e716c13eeffe35e4cdab287c2c6ac0e944df09e2ab313babc8a66eb259e6eb0e56af18aa48f0aae1163c8211305ce2685004ba01","href":"https://static.observableusercontent.com/files/61b83208da75d48785850817e716c13eeffe35e4cdab287c2c6ac0e944df09e2ab313babc8a66eb259e6eb0e56af18aa48f0aae1163c8211305ce2685004ba01","name":"mnist_extract.csv","type":"text/csv","lastModified":1682964594349.461,"size":18292736},{"id":"d9166b5ba7f8bf9a0e79023d12662eacfe45082d819c1c83b1f79ed862728b709167dfacc261d5da417eea46e9b10624dbd2332c905f62ed8d01b87748c8f70f","href":"https://static.observableusercontent.com/files/d9166b5ba7f8bf9a0e79023d12662eacfe45082d819c1c83b1f79ed862728b709167dfacc261d5da417eea46e9b10624dbd2332c905f62ed8d01b87748c8f70f","name":"brush.png","type":"image/png","lastModified":1682964594349.461,"size":859},{"id":"77d642d6f02f23cc2fc521243e24cace2ac07c258af8893398bbaac5fe759fe965f5de12bfbe1bf6c1c48208b0c5651202523c41f034c31debd84334003bce03","href":"https://static.observableusercontent.com/files/77d642d6f02f23cc2fc521243e24cace2ac07c258af8893398bbaac5fe759fe965f5de12bfbe1bf6c1c48208b0c5651202523c41f034c31debd84334003bce03","name":"784-32-10@1.txt","type":"text/plain","lastModified":1682964594349.461,"size":2060217}] 43:{"id":"33b8af82c8320a94","slug":null,"title":"Visualizing Patterns in the MNIST Handwritten Digits Dataset","thumbnail":"03a51c51d3d4551d4c3a037f80578b6e9bf60c13aebc3f3eff276ea073dad88f","access_level":"public","create_time":"$D2023-05-01T18:09:54.349Z","update_time":"$D2023-05-01T18:13:51.635Z","view_time":null,"first_public_time":"$D2023-05-01T18:09:54.349Z","has_unpublished_edits":null,"fork":{"id":"951348c2ef32c8cc","slug":"finding-patterns-in-the-mnist-handwritten-digits-data","title":"Finding Patterns in the MNIST Handwritten Digits Dataset","owner":{"id":"691ce3cf182c0bf2","login":"chjus","name":"Justin"}},"stars":0,"starred":false,"owner":{"type":"team","id":"ad169745263b5ca9","login":"khokhart","name":"Tasneem Nora Khokhar","avatar_url":"https://avatars-next.observableusercontent.com/37742b274faa573221a8c3e775bbc7c5f577e5b053aacf385ab2dc6e8f5be87b","tier":"starter_2024","bio":"","following":false},"version":2427,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"8827e25638a61404","login":"khokhart","name":"Tasneem Nora Khokhar","avatar_url":"https://avatars-next.observableusercontent.com/37742b274faa573221a8c3e775bbc7c5f577e5b053aacf385ab2dc6e8f5be87b","tier":null,"bio":"","following":false}],"members":[{"type":"individual","id":"8827e25638a61404","login":"khokhart","name":"Tasneem Nora Khokhar","avatar_url":"https://avatars-next.observableusercontent.com/37742b274faa573221a8c3e775bbc7c5f577e5b053aacf385ab2dc6e8f5be87b","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Visualizing Patterns in the MNIST Handwritten Digits Dataset","cells":[{"id":0,"value":"# Visualizing Patterns in the MNIST Handwritten Digits Dataset","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":3,"value":"What peculiarities and patterns are apparent in the well-used MNIST handwritten digits dataset?","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":26,"value":"FileAttachment(\"MnistExamples.png\").image()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":34,"value":"*Sample images from MNIST test dataset^{\n[\\[1\\]](https://en.wikipedia.org/wiki/MNIST_database#/media/File:MnistExamples.png)}*","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":6,"value":"## Introduction\n\nThe MNIST Dataset (*Modified* National Institute of Standards and Technology dataset) is a collection of 70,000 handwritten digits. The dataset is often used in as a \"Hello, world!\" task in the field of image recognition. What patterns can we observe from the data by using some filtering and visualization techniques?\n\n## Structure\nEach digit is represented in grayscale (with values from 0-255), and the dataset can be obtained in .csv, .txt, .png, and a multitude of other formats.\n\nFor the purposes of this exploration, 10,000 digits are taken (with 1,000 chosen from each digit from 0-9), and the file is stored as a .csv file. You can download the MNIST dataset directly from Yann LeCun's personal webpage, ^{[\\[2\\]](http://yann.lecun.com/exdb/mnist/)} or you could download the .csv file from this notebook.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":122,"value":"Here's the table consisting of our data with 10,000 digits:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":110,"value":"viewof table = Inputs.table(data, {})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":98,"value":"data = FileAttachment(\"mnist_extract.csv\").csv({typed: true})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":762,"value":"dataFormed = new function () {\n var dataFormed = []\n for (let index = 0; index < data.length; index++) {\n let digit = Array()\n let sum = 0\n let squaresFilled = 0\n for (let i = 0; i < 28; i++) {\n let row = Array()\n for (let j = 0; j < 28; j++) {\n let d = data[index]['pixel' + (i * 28 + j)]\n let item = Object()\n sum += d\n squaresFilled += d > 0 ? 1 : 0\n item.value = d\n item.row = i\n item.column = j\n digit.push(item)\n }\n }\n digit.coloredRatio = squaresFilled / 784\n digit.sumRatio = sum / (255 * 784)\n digit.number = data[index]['label']\n dataFormed[index] = digit\n }\n return dataFormed\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":215,"value":"function heatMap(values) {\n return Plot.plot({\n width: 500,\n height: 500,\n padding: 0.05,\n grid: false,\n color: {\n type: \"linear\",\n range: [\"white\", \"black\"]\n },\n marks: [\n Plot.cell(values, {\n x: \"column\",\n y: \"row\",\n fill: \"value\",\n rx: 2\n }),\n ],\n x: {\n axis: \"bottom\",\n label: \"\",\n ticks: 1,\n tickSize: 5,\n line: false,\n labelAnchor: \"center\"\n }, \n y: {\n label: \"\",\n ticks: 0,\n tickSize: 5,\n line: false\n },\n })\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":137,"value":"As a reference, here is how some digits might look like:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":975,"value":"function update() {\n button\n return [heatMap(dataFormed[Math.floor(Math.random() * dataFormed.length)]), \n heatMap(dataFormed[Math.floor(Math.random() * dataFormed.length)]), \n heatMap(dataFormed[Math.floor(Math.random() * dataFormed.length)]), \n heatMap(dataFormed[Math.floor(Math.random() * dataFormed.length)])]\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1531,"value":"arr = update()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1534,"value":"\n \n \n \n \n \n \n \n \n

${arr[0]}	${arr[1]}
${arr[2]}	${arr[3]}

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1590,"value":"viewof button = Inputs.button(\"✨ Load new digits\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1177,"value":"A naïve (yet the simplest) approach we can start with to look for patterns in our dataset is to see how the % of an image covered in ink (all non-white pixels are counted equally weighted) correlates with the density of all pixels (in consideration of tone) for all the different digits. This gives us a representation of our data across two-axis.\n\nLogically, some digits fill up more space than others, and when writing some digits the varying pressure applied to the pen may gives certain pixels a grayish color. This can also be used to identify certain digits apart from the rest.\n\nThe scatter plot below represents the relationship between the average shade of a digit and the % of non-white pixels.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":777,"value":"Plot.plot({\n color: {\n legend: true\n },\n marks: [\n Plot.dot(dataFormed, {x: \"sumRatio\", y: \"coloredRatio\", stroke: \"number\"})\n ]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1213,"value":"We can also just visualize the `sumRatio`, as it better takes into account gray pixels, which may be useful for identifying curves or lines that aren't vertical/horizontal.\n\n(You can toggle whether the histogram is stacked or not)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1241,"value":"viewof stackToggle = Inputs.toggle({label: \"Stacked\", value: true})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":822,"value":"histogram = toggle()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1263,"value":"function toggle() {\n if (stackToggle) {\n return Plot.plot({\n color: {\n legend: true,\n ticks: 10,\n scale: 1\n },\n marks: [\n Plot.frame(),\n Plot.rectY(dataFormed, Plot.binX({y: \"count\"}, {x: \"sumRatio\", fill: \"number\"}))\n ]\n })\n } else {\n return Plot.plot({\n color: {\n legend: true,\n ticks: 10,\n scale: 1\n },\n facet: {\n data: dataFormed,\n y: \"number\",\n },\n marks: [\n Plot.frame(),\n Plot.rectY(dataFormed, Plot.binX({y: \"count\"}, {x: \"sumRatio\", fill: \"number\"}))\n ]\n })\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1219,"value":"Notice how the digit '1' appears to be the majority when `coloredRatio` < 5%. We can thus use this the identify a majority of '1's, however it won't necessarily be helpful for identifying other digits. Additionally, the images in this dataset are denoised, and centered, so if we were to try identifying unseen digits in the future, we'll have to do a bunch of preprocessing as well.\n\nYou can play around and toggle the `sumRatio` to see the % of all samples that have `sumRatio` which match each digit.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1312,"value":"viewof userRatio = Inputs.range([0.03, 0.34], {value: 0.11, step: 0.01, label: \"Sum Ratio\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1302,"value":"viewof frequencyChart = new function(){\n let temp = dataFormed.filter(entry => Math.round(entry['sumRatio'] * 100) / 100 == userRatio)\n let dat = Array()\n for (let i = 0; i < 10; i++) {\n let entry = Array()\n entry.number = i\n entry.count = 0\n for (let j = 0; j < temp.length; j++) {\n if (temp[j].number == i) {\n entry.count++\n }\n }\n dat.push(entry)\n }\n\n for (let i = 0; i < 10; i++) {\n dat[i].count /= temp.length\n dat[i].count *= 100.0\n }\n \n return Plot.plot({\n color: {\n legend: true,\n ticks: 10,\n scale: 1\n },\n x: {\n label: \"Number\"\n },\n y: {\n label: \"%\",\n domain: [0, 100]\n },\n marks: [\n Plot.barY(dat, {x: \"number\", y: \"count\", fill: \"number\"})\n ]\n })\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1405,"value":"You'll begin to notice that 0s and 8s dominate when `sumRatio` is approximately bigger than 20%, and 1s dominate when `sumRatio` is smaller than 9%.\n\nIt's probably also more interesting if we can define a range of `sumRatio` that digits fit in. The graph below represents the percentage of samples fitting in the range for `sumRatio` that are of each digit.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1409,"value":"viewof srMin = Inputs.range([0.03, 0.34], {value: 0.11, step: 0.01, label: \"Min\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1414,"value":"viewof srMax = Inputs.range([0.03, 0.34], {value: 0.34, step: 0.01, label: \"Max\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1420,"value":"viewof rangeChart = new function(){\n let temp = dataFormed.filter(entry => Math.round(entry['sumRatio'] * 100) / 100 <= srMax && Math.round(entry['sumRatio'] * 100) / 100 >= srMin)\n let dat = Array()\n for (let i = 0; i < 10; i++) {\n let entry = Array()\n entry.number = i\n entry.count = 0\n for (let j = 0; j < temp.length; j++) {\n if (temp[j].number == i) {\n entry.count++\n }\n }\n dat.push(entry)\n }\n\n for (let i = 0; i < 10; i++) {\n dat[i].count /= temp.length\n dat[i].count *= 100.0\n }\n \n return Plot.plot({\n color: {\n legend: true,\n ticks: 10,\n scale: 1\n },\n x: {\n label: \"Number\"\n },\n y: {\n label: \"%\",\n domain: [0, 100]\n },\n marks: [\n Plot.barY(dat, {x: \"number\", y: \"count\", fill: \"number\"})\n ]\n })\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1441,"value":"By specifying a target digit for looking for patterns (i.e., the digit to distinguish from the rest), see if you can find particular patterns with the range of `sumRatio` that would help distinguish particular digits.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1450,"value":"viewof srMinFinal = Inputs.range([0.03, 0.34], {value: 0.11, step: 0.01, label: \"Min\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1456,"value":"viewof srMaxFinal = Inputs.range([0.03, 0.34], {value: 0.34, step: 0.01, label: \"Max\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1461,"value":"viewof userTargetDigit = Inputs.range([0, 9], {value: 0, step: 1, label: \"Target Digit\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1464,"value":"new function(){\n let temp = dataFormed.filter(entry => Math.round(entry['sumRatio'] * 100) / 100 <= srMaxFinal && Math.round(entry['sumRatio'] * 100) / 100 >= srMinFinal)\n let dat = Array()\n\n let entry = Array()\n entry.number = userTargetDigit\n entry.count = 0\n for (let j = 0; j < temp.length; j++) {\n if (temp[j].number == userTargetDigit) {\n entry.count++\n }\n }\n dat.push(entry)\n\n let other = Array()\n other.number = 10\n other.count = temp.length - entry.count\n \n dat.push(other)\n\n for (let i = 0; i < 2; i++) {\n dat[i].count /= temp.length\n dat[i].count *= 100.0\n }\n\n console.log(dat)\n \n return Plot.plot({\n x: {\n label: \"Number (10: other numbers)\"\n },\n y: {\n label: \"%\",\n domain: [0, 100]\n },\n marks: [\n Plot.barY(dat, {x: \"number\", y: \"count\", fill: \"number\"})\n ]\n })\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1497,"value":"*Note: `10` represents other numbers' percentage in that range (equal to `100% - targetNumberPercentage`)*","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1663,"value":"What if this time, we count the number of gray pixels given a minimum and maximum bound? Counting gray pixels is a way of finding out properties about the edges in a digit.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1627,"value":"viewof boundMin = Inputs.range([0, 255], {value: 0, step: 1, label: \"Min\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1631,"value":"viewof boundMax = Inputs.range([0, 255], {value: 255, step: 1, label: \"Max\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1657,"value":"viewof tog = Inputs.toggle({label: \"Stacked\", value: true})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1612,"value":"{\n let temp = dataFormed\n let dat = Array()\n for (let j = 0; j < temp.length; j++) {\n let entry = Array()\n entry.sumRatio = 0;\n for (let i = 0; i < temp[j].length; i++) {\n if (temp[j][i].value > (boundMin) && temp[j][i].value < (boundMax)) {\n entry.sumRatio++;\n }\n }\n entry.sumRatio /= 784.0;\n entry.number = temp[j].number\n dat.push(entry)\n }\n if (tog) {\n return Plot.plot({\n color: {\n legend: true,\n ticks: 10,\n scale: 1\n },\n marks: [\n Plot.frame(),\n Plot.rectY(dat, Plot.binX({y: \"count\"}, {x: \"sumRatio\", fill: \"number\"}))\n ]\n })\n } else {\n return Plot.plot({\n color: {\n legend: true,\n ticks: 10,\n scale: 1\n },\n facet: {\n data: dat,\n y: \"number\",\n },\n marks: [\n Plot.frame(),\n Plot.rectY(dat, Plot.binX({y: \"count\"}, {x: \"sumRatio\", fill: \"number\"}))\n ]\n })\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1605,"value":"$45","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":2099,"value":"viewof buttonClear = Inputs.button(\"Clear\", {})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2016,"value":"$46","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2114,"value":"Try drawing some digits above! See whether the network is able to recognize your handwriting.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":2120,"value":"A good way to see the accuracy of the network is to test its ability to recognize our 10,000 images. Below is a matrix that shows the network's accuracy.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":2173,"value":"viewof shuffle = Inputs.button(\"Test batch\", {})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2167,"value":"\n \n \n \n

${\n Plot.plot({\n width: 600,\n height: 600,\n padding: 0.05,\n grid: false,\n color: {\n scheme: \"blues\"\n },\n marks: [\n Plot.cell(matrix, {\n x: \"row\",\n y: \"column\",\n fill: \"number\",\n rx: 2\n })\n ],\n x: {\n axis: \"top\",\n label: \"actual\",\n ticks: 1,\n tickSize: 5,\n line: false,\n labelAnchor: \"center\"\n }, \n y: {\n label: \"prediction\",\n ticks: 0,\n tickSize: 5,\n line: false\n },\n })}\n

${Plot.plot({\n x: {\n label: \"\"\n },\n y: {\n label: \"%\",\n domain: [0, 100]\n },\n marks: [\n Plot.barY(pieDat, {x: \"name\", y: \"value\", fill: \"name\"}),\n \n ]\n })}