2d:null 2e:["$","title",null,{"children":"Self-Organizing Maps, Step-by-Step | Lee Mason | Observable"}] 33:Tb68,{ const weightPoints = convertVectorsToList(result.weights.map(d => ({vector: d}))) const dataPlot = Plot.plot({ width: 480, height: 480, grid: true, margin: 20, x: {tickFormat: d => null, label: null, tickSize: 0}, y: {tickFormat: d => null, label: null, tickSize: 0, domain: [-2,2]}, marks: [ Plot.lineY(convertVectorsToList(syntheticData), {x: "x", y: "y", z: "i", stroke: "cornflowerblue", opacity: d => d.i == result.inputIndex ? 1 : .2}), Plot.dot(convertVectorsToList(syntheticData), {x: "x", y: "y", z: "i", stroke: "cornflowerblue", opacity: d => d.i == result.inputIndex ? 1 : .2}), Plot.lineY(showWeights ? weightPoints : [], {x: "x", y: "y", z: "i", stroke: (d,i) => d3.schemeTableau10[d.i], opacity: d => d.i == result.bmuIndex ? 1 : .2, strokeWidth: 2, strokeDasharray: "2,4"}), ] }) const nodeGrid = htl.html`

` nodeGrid.style.display = "grid" nodeGrid.style.gridTemplateColumns = `repeat(${gridShape[1]}, 1fr)` nodeGrid.style.gridTemplateRows = `repeat(${gridShape[0]}, 1fr)` const plotSize = 0.8*(width - 480)/gridShape[0] nodeGrid.style.width = `${width-480}px` nodeGrid.style.height = `${width-480}px` const inputPoints = convertVectorsToList([{ vector: result.input }]) for (let i = 0; i < result.weights.length; i++) { const gridX = Math.floor(i / gridShape[0]) const gridY = i % gridShape[0] const previousWeights = subtract(result.weights[i], result.delta[i]) const previousPoints = convertVectorsToList([{vector: previousWeights}]) const points = convertVectorsToList([{vector: result.weights[i]}]) const color = i == result.bmuIndex ? d3.schemeTableau10[i] : "grey" const strokeWidth = i == result.bmuIndex ? 3 : 1.5 const plotDiv = htl.html`

` plotDiv.style.justifyContent = "center" plotDiv.style.alignContent = "center" plotDiv.style.display = "flex" plotDiv.appendChild(Plot.plot({ width: plotSize, height: plotSize, margin: 5, //grid: true, x: {tickFormat: d => null, label: null, tickSize: 0}, y: {tickFormat: d => null, label: null, tickSize: 0, domain: [-2,2]}, marks: [ Plot.lineY(inputPoints, {x: "x", y: "y", z: "i", stroke: "cornflowerblue", opacity: .8, strokeDasharray: "2,4"}), Plot.lineY(previousPoints, {x: "x", y: "y", z: "i", stroke: color, opacity: .3}), Plot.lineY(points, {x: "x", y: "y", z: "i", stroke: color, strokeWidth}), Plot.dot(points, {x: "x", y: "y", z: "i", stroke: color}), Plot.text(["Step Coef = " + result.localStep[i].toFixed(3)], {frameAnchor: "top", lineHeight: 2}), Plot.frame({stroke: "lightgrey"}) ] })) nodeGrid.appendChild(plotDiv) } const container = htl.html`

` container.style.display = "flex" container.appendChild(dataPlot) container.appendChild(nodeGrid) return container }34:Tca8,class SOM { shape; k; initialLr; lr; sigma; maxIter; distanceFunction; locations; dim = -1; weights; constructor(shape, opts = {}) { this.shape = shape; this.k = this.shape[0] * this.shape[1]; const defaults = { lr: 1, sigma: 1, maxIter: 3000, }; const args = { ...defaults, ...opts }; this.initialLr = args.lr; this.lr = args.lr; this.sigma = args.sigma; this.maxIter = args.maxIter; if (opts.distanceFunction != null) { this.distanceFunction = opts.distanceFunction; } else { this.distanceFunction = euclideanDistance; } this.locations = indices(this.shape[0], this.shape[1]); } *fit(vectors, epochs = 1, shuffle = true) { const n = vectors.length; this.dim = vectors[0].length; for (const vector of vectors) { if (vector.length != this.dim) { throw new Error("Vectors must be of equal length"); } } this.#initRandNormal(vectors); let globalIterCount = 0; const maxIter = Math.min(epochs * n, this.maxIter); console.log(epochs, n, maxIter) for (let epoch = 0; epoch < epochs; epoch++) { if (globalIterCount > this.maxIter) break; let indices = Array.from({ length: n }, (_, i) => i); if (shuffle) { d3.shuffle(indices); } for (const idx of indices) { if (globalIterCount > this.maxIter) break; const input = vectors[idx]; const step = this.#step(input); globalIterCount++; this.lr = (1 - (globalIterCount / maxIter)) * this.initialLr; yield {lr: this.lr, weights: this.weights, input, inputIndex: idx, ...step}; } } //yield {lr: this.lr, weights: this.weights} } getResult() { return { locations: this.locations, weights: this.weights }; } #step(input) { const bmuIndex = this.#findBmu(input); const bmuLocation = this.locations[bmuIndex]; const bmuDistances = this.locations.map(loc => d3.sum(subtract(loc, bmuLocation).map(d => d ** 2))); const neighborhood = bmuDistances.map(d => Math.exp((d / (this.sigma ** 2)) / -1)); const localStep = neighborhood.map(d => d * this.lr); const delta = this.weights.map((weight, i) => subtract(input, weight).map(d => d * localStep[i])); for (let i = 0; i < this.weights.length; i++) { this.weights[i] = add(this.weights[i], delta[i]); } return {bmuIndex, bmuLocation, bmuDistances, localStep, delta} } #findBmu(vector) { const distances = this.weights.map(d => this.distanceFunction(d, vector)); return d3.minIndex(distances); } #initRandNormal(vectors) { const distributions = []; for (let i = 0; i < this.dim; i++) { const dimMean = d3.mean(vectors, d => d[i]); const dimStd = d3.deviation(vectors, d => d[i]); distributions.push(d3.randomNormal(dimMean, dimStd)); } this.weights = []; for (let i = 0; i < this.k; i++) { this.weights.push(Array.from({ length: this.dim }, (_, i) => distributions[i]())); } } predict(vectors) { return vectors.map(vec => this.#findBmu(vec)); } }35:[] 31:{"id":"bc5b53194140217f","slug":"self-organizing-maps-step-by-step","title":"Self-Organizing Maps, Step-by-Step","thumbnail":"2705431d5102ea65e88fbd0db4829aa2fc3632b813e30291479f3f286b157022","access_level":"unlisted","create_time":"$D2023-10-17T17:28:54.233Z","update_time":"$D2023-10-18T13:49:42.018Z","view_time":null,"first_public_time":null,"fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"aeba13ccd439d1a5","login":"siliconjazz","name":"Lee Mason","avatar_url":"https://avatars-next.observableusercontent.com/c4c5a3e295d0725774878e8d8bc1675789d3ba7c1755c3f8ac1ba1b06c7c2b88","tier":"starter_2024"},"version":338,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"fbdd2b94d96f3c3c","login":"siliconjazz","name":"Lee Mason","avatar_url":"https://avatars-next.observableusercontent.com/6f7da31c0ab5d37355f81ae230a04aa4e504d6516803dba0ce51e12285aad934","tier":null}],"members":[{"type":"individual","id":"fbdd2b94d96f3c3c","login":"siliconjazz","name":"Lee Mason","avatar_url":"https://avatars-next.observableusercontent.com/6f7da31c0ab5d37355f81ae230a04aa4e504d6516803dba0ce51e12285aad934","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Self-Organizing Maps, Step-by-Step","cells":[{"id":0,"value":"# Self-Organizing Maps, Step-by-Step\n\nA slightly modified version of the self-organizing map class implemented in [EpiVECS](https://github.com/episphere/EpiVECS), to show off how SOMs work.\n\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":157,"value":"gridShape = [2,2]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":320,"value":"viewof epochs = Inputs.range([0, 10], {label: \"Epochs\", value: 3, step: 1})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":109,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":173,"value":"viewof nextButton = Inputs.button(\"Next Frame\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":295,"value":"viewof resetButton = Inputs.button(\"Reset\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":273,"value":"viewof showWeights = Inputs.toggle({label: \"Show Weight Vectors\", value: false})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":308,"value":"## Running","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":167,"value":"resultWrapper = {\n resetButton;\n const som = new SOM(gridShape)\n const fitGenerator = som.fit(syntheticData.map(d => d.vector), 5)\n return { fitGenerator }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":171,"value":"result = {\n nextButton;\n\n const result = resultWrapper.fitGenerator.next()\n if (!result.done && result.value) {\n resultWrapper.previousValue = result.value\n }\n return resultWrapper.previousValue\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":305,"value":"## Data","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":54,"value":"viewof noise = Inputs.range([0, .4], {label: \"Noise\", value: 0.3})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":105,"value":"syntheticData = {\n const baseVectors = [\n [0,1,-.7,0],\n [1,0,-1.4,.9],\n [-2,.5,.2,-1.5],\n [1.9,1.8,1.6,1.7],\n ]\n\n const n = 4\n const vectors = []\n baseVectors.forEach((baseVector, j) => {\n for (let i = 0; i < n; i++) {\n vectors.push({label: j, index: j*n+i, vector: baseVector.map(d => (d-noise/2)+Math.random()*noise)})\n }\n })\n \n\n return vectors\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":58,"value":"## Implementation","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":17,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":28,"value":"function subtract(a, b) {\n return a.map((d,i) => d-b[i])\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":31,"value":"function euclideanDistance(a, b) {\n let total = 0\n for (let i = 0; i < a.length; i++) {\n total += (a[i]-b[i])**2\n }\n return Math.sqrt(total)\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"value":"function add(a, b) {\n return a.map((d,i) => d+b[i])\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":35,"value":"function indices(m, n) {\n const indices = []\n for (let i = 0; i < m; i++) {\n for (let j = 0; j < n; j++) {\n indices.push([i,j])\n }\n }\n return indices\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":98,"value":"## Notebook Helper","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":62,"value":"function convertVectorsToList(inputList) {\n const outputList = [];\n\n inputList.forEach((item,i) => {\n const { label, vector } = item\n vector.forEach((value, index) => {\n outputList.push({ x: index, y: value, i, label })\n })\n })\n\n return outputList\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":85,"value":"inputPoints = convertVectorsToList(syntheticData)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W35","stdlib":"1","titling":"auto"}} 32:"$31:body"