29:null 2a:["$","title",null,{"children":"HINF 485 Demo: Self-organizing Maps | Adam Krawitz | Observable"}] 2f:T498,## Net 1. Color For our first self-organizing map, the inputs are colors defined in three dimensional red/green/blue (RGB) coordinates. The specific data points used are: - Red (1, 0, 0) - Yellow (1, 1, 0) - Green (0, 1, 0) - Cyan (0, 1, 1) - Blue (0, 0, 1) - Magenta (1, 0, 1) The outputs are organized in a 40 by 40 grid of units, which is presented in the visualization below. Each node is given its preferred color. Because of how the SOM works, this simply means coloring it based on the weights of the connections from the RGB input nodes. Initially, the weights are completely random, and thus colors are scattered randomly across the map. As the weights are updated based on experience, the map self-organizes...30:T81c,## Net 3. Similarity So far, the examples have used low dimensional input spaces, to aid us in visualizing how that space is mapped onto the grid of output units. Now we will look at an example with a higher-dimensional input space, so we will think about the input data points in terms of a more general concept of "similarity" (which really just means distance in the high-dimensional input space). For this example, each input dimension represents an attribute that animals may or may not have, and each data point is a particular type of animal (Ritter & Kohonen, 1989): | Animal | small | medium | big | 2 legs | 4 legs | hair | hooves | mane | feathers | hunt | run | fly | swim | | -------- | | dove | 1 | 0 | 0 | 1 | 0 | 0 | 0 | 0 | 1 | 0 | 0 | 1 | 0 | | hen | 1 | 0 | 0 | 1 | 0 | 0 | 0 | 0 | 1 | 0 | 0 | 0 | 0 | | duck | 1 | 0 | 0 | 1 | 0 | 0 | 0 | 0 | 1 | 0 | 0 | 0 | 1 | | goose | 1 | 0 | 0 | 1 | 0 | 0 | 0 | 0 | 1 | 0 | 0 | 1 | 1 | | owl | 1 | 0 | 0 | 1 | 0 | 0 | 0 | 0 | 1 | 1 | 0 | 1 | 0 | | eagle | 0 | 1 | 0 | 1 | 0 | 0 | 0 | 0 | 1 | 1 | 0 | 1 | 0 | | fox | 0 | 1 | 0 | 0 | 1 | 1 | 0 | 0 | 0 | 1 | 0 | 0 | 0 | | dog | 0 | 1 | 0 | 0 | 1 | 1 | 0 | 0 | 0 | 0 | 1 | 0 | 0 | | wolf | 0 | 1 | 0 | 0 | 1 | 1 | 0 | 1 | 0 | 1 | 1 | 0 | 0 | | cat | 1 | 0 | 0 | 0 | 1 | 1 | 0 | 0 | 0 | 1 | 0 | 0 | 0 | | tiger | 0 | 0 | 1 | 0 | 1 | 1 | 0 | 0 | 0 | 1 | 1 | 0 | 0 | | lion | 0 | 0 | 1 | 0 | 1 | 1 | 0 | 1 | 0 | 1 | 1 | 0 | 0 | | horse | 0 | 0 | 1 | 0 | 1 | 1 | 1 | 1 | 0 | 0 | 1 | 0 | 0 | | cow | 0 | 0 | 1 | 0 | 1 | 1 | 1 | 0 | 0 | 0 | 0 | 0 | 0 | There are 14 animals (input data points) with 13 attributes (input dimensions). The output grid is 10 by 10. The challenge for the network is to project the 13-dimensional input space onto the two-dimensional output grid. The visualization shows the *output* grid, with the winning node for each animal input labelled. Initially the weights are random, so the locations of the output nodes in the input space are random and completely scrambled. As the weights are updated based on experience, the map self-organizes...31:T693,function SOMSim(sim, controls, {rows = 40, columns = 40, depth = 3, data = [], timeConstant = 1000, learningFactor = 0.1, distanceFactor = 40} = {}) { if (controls.reset || !sim) { // (Re)set the simulation sim = {}; // Learning parameters sim.timeConstant = timeConstant; sim.learningFactor = learningFactor; sim.distanceFactor = distanceFactor; // Setup the SOM sim.rows = rows; sim.columns = columns; sim.depth = depth; sim.som = math.random([sim.rows, sim.columns, sim.depth], 0.05, 0.95); // Setup the Inputs sim.data = data; sim.inputs = data.length; // Setup the step count sim.step = 0; } else { // Update the step count sim.step++; // Pick random input const datum = sim.data[math.randomInt(0, sim.inputs)]; // Find best matching unit const best = bestMatchNode(datum, sim.som); // Update weights const stepUpdate = Math.exp(-sim.step / sim.timeConstant); const stepUpdate2 = Math.exp(-sim.step / (sim.timeConstant * 2)); const distanceRate = distanceFactor * stepUpdate; const learningRate = learningFactor * stepUpdate2; for (let row = 0; row < sim.rows; row++) { for (let column = 0; column < sim.columns; column++) { const nodeDistance = euclideanDistance([best.row, best.column], [row, column]); const influence = Math.exp(-Math.pow(nodeDistance, 2) / (2 * Math.pow(distanceRate, 2))); for (let depth = 0; depth < sim.depth; depth++) { sim.som[row][column][depth] += learningRate * influence * (datum[depth] - sim.som[row][column][depth]); } } } } return sim; }32:T65c,function SOMColorViz(viz, sim, controls, {size = 10} = {}) { if (controls.reset || !viz) { // (Re)set the simulation const vizContainer = d3.create('div') .classed('som', true); viz = vizContainer.node(); viz.value = { rowIndex: d3.local(), columnIndex: d3.local() }; vizContainer.append('span') .classed('step', true) .style('font-size', 'small'); const somSvg = vizContainer.append('svg') .attr('width', sim.columns * size + 1) .attr('height', sim.rows * size + 1) .attr('viewBox', `-0.5 -0.5 ${sim.columns * size + 1} ${sim.rows * size + 1}`) .attr('stroke', colors.gray) .style('display', 'block'); const rows = somSvg.selectAll('.row').data(sim.som).join('g') .classed('row', true) .property(viz.value.rowIndex, (row, rowIndex) => { return rowIndex; }) .attr('transform', (row, rowIndex) => { return `translate(0 ${rowIndex * size})`; }); rows.selectAll('.node').data((row) => { return row; }).join('rect') .classed('node', true) .property(viz.value.columnIndex, (node, nodeIndex) => { return nodeIndex; }) .attr('width', size) .attr('height', size) .attr('x', (node, nodeIndex) => { return nodeIndex * size; }) .attr('y', 0); } const vizContainer = d3.select(viz); // Update nodes vizContainer.selectAll('.row').selectAll('.node') .attr('fill', (node) => { return d3.rgb(node[0] * 255, node[1] * 255, node[2] * 255); }); // Update the step vizContainer.select('.step') .text(`Step: ${sim.step}`); return viz; }33:Tdcd,function SOMGridViz(viz, sim, controls, {size = 30, random = true} = {}) { const dataRadius = 2; const nodeRadius = 4; const maxDim = Math.max(sim.rows, sim.columns); const scale = size * maxDim; if (controls.reset || !viz) { // (Re)set the simulation const vizContainer = d3.create('div') .classed('som', true); viz = vizContainer.node(); viz.value = { rowIndex: d3.local(), columnIndex: d3.local(), }; vizContainer.append('span') .classed('step', true) .style('font-size', 'small'); const som = vizContainer.append('svg') .classed('som', true) .attr('width', maxDim * size + 1) .attr('height', maxDim * size + 1) .attr('viewBox', `-0.5 -0.5 ${maxDim * size + 1} ${maxDim * size + 1}`) .attr('stroke', colors.gray.darker(3)) .style('display', 'block'); const dataContainer = som.append('g') .classed('data', true); const data = dataContainer.selectAll('.datum').data(sim.data).join('circle') .classed('datum', true) .attr('opacity', 0.5) .attr('fill', colors.gray.darker(3)) .attr('r', dataRadius) .attr('cx', (datum) => { return datum[1] * scale; }) .attr('cy', (datum) => { return datum[0] * scale; }); const nodeContainer = som.append('g') .classed('nodes', true); const rows = nodeContainer.selectAll('.row').data(sim.som).join('g') .classed('row', true) .property(viz.value.rowIndex, (row, rowIndex) => { return rowIndex; }); const nodeGroups = rows.selectAll('.node-group').data((row) => { return row; }).join('g') .classed('node-group', true) .property(viz.value.columnIndex, (node, nodeIndex) => { return nodeIndex; }); nodeGroups.filter((node, nodeIndex, elements) => { return (viz.value.columnIndex.get(elements[nodeIndex]) < (sim.columns - 1)); }).append('line') .classed('link-east', true); nodeGroups.filter((node, nodeIndex, elements) => { return (viz.value.rowIndex.get(elements[nodeIndex]) < (sim.rows - 1)); }).append('line') .classed('link-south', true); nodeGroups.append('circle') .classed('node', true) .attr('fill', colors.white) .attr('r', nodeRadius); } const vizContainer = d3.select(viz); // Update nodes vizContainer.select('.som').selectAll('.row').selectAll('.node-group') .each((node, nodeIndex, elements) => { const element = elements[nodeIndex]; const rowIndex = viz.value.rowIndex.get(element); const columnIndex = viz.value.columnIndex.get(element); const item = d3.select(element); item.select('.node') .attr('cx', node[1] * scale) .attr('cy', node[0] * scale); if (columnIndex < (sim.columns - 1)) { item.select('.link-east') .attr('x1', node[1] * scale) .attr('y1', node[0] * scale) .attr('x2', sim.som[rowIndex][columnIndex + 1][1] * scale) .attr('y2', sim.som[rowIndex][columnIndex + 1][0] * scale); } if (rowIndex < (sim.rows - 1)) { item.select('.link-south') .attr('x1', node[1] * scale) .attr('y1', node[0] * scale) .attr('x2', sim.som[rowIndex + 1][columnIndex][1] * scale) .attr('y2', sim.som[rowIndex + 1][columnIndex][0] * scale); } }); // Update the step vizContainer.select('.step') .text(`Step: ${sim.step}`); return viz; }34:T171a,function SOMCategoryViz(viz, sim, controls, {size = 40, labels = null, mapData = true, mapNodes = true}) { const nodeRadius = 2; if (controls.reset || !viz) { // (Re)set the simulation const vizContainer = d3.create('div') .classed('som', true); viz = vizContainer.node(); viz.value = { rowIndex: d3.local(), columnIndex: d3.local(), }; vizContainer.append('span') .classed('step', true) .style('font-size', 'small'); const maps = vizContainer.append('div') .classed('maps', true) .style('display', 'flex'); if (mapData) { // Best node for each datum const dataMap = maps.append('div') .classed('data-map', true); const dataMapSvg = dataMap.append('svg') .attr('width', sim.columns * size + 1) .attr('height', sim.rows * size + 1) .attr('viewBox', `-0.5 -0.5 ${sim.columns * size + 1} ${sim.rows * size + 1}`) .style('display', 'block'); const dataMapNodeContainer = dataMapSvg.append('g') .classed('nodes', true); const dataMapRows = dataMapNodeContainer.selectAll('.row').data(sim.som).join('g') .classed('row', true) .property(viz.value.rowIndex, (row, rowIndex) => { return rowIndex; }); const dataMapNodes = dataMapRows.selectAll('.node').data((row) => { return row; }).join('circle') .classed('node', true) .property(viz.value.columnIndex, (node, nodeIndex) => { return nodeIndex; }) .attr('stroke', colors.gray.darker(3)) .attr('fill', colors.gray.darker(3)) .attr('r', nodeRadius) .attr('cx', (node, nodeIndex, elements) => { return (viz.value.columnIndex.get(elements[nodeIndex]) + 0.5) * size; }) .attr('cy', (node, nodeIndex, elements) => { return (viz.value.rowIndex.get(elements[nodeIndex]) + 0.5) * size; }); const dataMapDataContainer = dataMapSvg.append('g') .classed('data', true); const dataMapDatumGroups = dataMapDataContainer.selectAll('.datum-group').data(sim.data).join('g') .classed('datum-group', true); dataMapDatumGroups.append('circle') .classed('hider', true) .attr('stroke', colors.white) .attr('fill', colors.white) .attr('r', nodeRadius+1); dataMapDatumGroups.append('text') .classed('datum', true) .attr('fill', colors.gray.darker(3)) .attr('text-anchor', 'middle') .attr('dominant-baseline', 'middle') .style('font-size', 'small') .style('font-family', 'var(--sans-serif)') .text((datum, datumIndex) => { return labels[datumIndex]; }); } if (mapNodes) { // Best datum for each node const nodeMap = maps.append('div') .classed('node-map', true); const nodeMapSvg = nodeMap.append('svg') .attr('width', sim.columns * size + 1) .attr('height', sim.rows * size + 1) .attr('viewBox', `-0.5 -0.5 ${sim.columns * size + 1} ${sim.rows * size + 1}`) .style('display', 'block'); const nodeMapNodeContainer = nodeMapSvg.append('g') .classed('nodes', true); const nodeMapRows = nodeMapNodeContainer.selectAll('.row').data(sim.som).join('g') .classed('row', true) .property(viz.value.rowIndex, (row, rowIndex) => { return rowIndex; }); const nodeMapNodes = nodeMapRows.selectAll('.node').data((row) => { return row; }).join('text') .classed('node', true) .property(viz.value.columnIndex, (node, nodeIndex) => { return nodeIndex; }) .attr('fill', colors.gray.darker(3)) .attr('text-anchor', 'middle') .attr('dominant-baseline', 'middle') .style('font-size', 'small') .style('font-family', 'var(--sans-serif)') .attr('x', (node, nodeIndex, elements) => { return (viz.value.columnIndex.get(elements[nodeIndex]) + 0.5) * size; }) .attr('y', (node, nodeIndex, elements) => { return (viz.value.rowIndex.get(elements[nodeIndex]) + 0.5) * size; }); } } const vizContainer = d3.select(viz); if (mapData) { // Calculate best matching unit for each datum const dataMatches = math.zeros([sim.data.length, sim.data[0].length]); for (let datumIndex = 0; datumIndex < sim.data.length; datumIndex++) { dataMatches[datumIndex] = bestMatchNode(sim.data[datumIndex], sim.som); } // Update best nodes for data const dataMapDatumGroups = vizContainer.select('.data-map').selectAll('.datum-group'); dataMapDatumGroups.select('.datum') .attr('x', (datum, datumIndex) => { return (dataMatches[datumIndex].column + 0.5) * size; }) .attr('y', (datum, datumIndex) => { return (dataMatches[datumIndex].row + 0.5) * size; }); dataMapDatumGroups.select('.hider') .attr('cx', (datum, datumIndex) => { return (dataMatches[datumIndex].column + 0.5) * size; }) .attr('cy', (datum, datumIndex) => { return (dataMatches[datumIndex].row + 0.5) * size; }); } if (mapNodes) { // Calculate best matching unit for each node const nodeMatches = math.zeros([sim.rows, sim.columns]); for (let row = 0; row < sim.rows; row++) { for (let column = 0; column < sim.columns; column++) { nodeMatches[row][column] = bestMatchDatum(sim.som[row][column], sim.data); } } // Update best data for nodes vizContainer.select('.node-map').selectAll('.row').selectAll('.node') .text((node, nodeIndex, elements) => { const element = elements[nodeIndex]; const rowIndex = viz.value.rowIndex.get(element); const columnIndex = viz.value.columnIndex.get(element); return labels[nodeMatches[rowIndex][columnIndex]]; }); } // Update the step vizContainer.select('.step') .text(`Step: ${sim.step}`); return viz; }35:[] 2d:{"id":"b1352339a510b530","slug":"hinf-485-demo-self-organizing-maps","title":"HINF 485 Demo: Self-organizing Maps","thumbnail":"f8ba0d9809c9cf393552966fcf2a1b74e5c4e9022d0005741b0029cbfa9b0da1","access_level":"public","create_time":"$D2023-05-05T22:31:57.315Z","update_time":"$D2023-05-05T22:56:57.518Z","view_time":null,"first_public_time":"$D2023-05-10T18:32:17.960Z","has_unpublished_edits":null,"fork":true,"stars":1,"starred":false,"owner":{"type":"team","id":"3861495db0d6917b","login":"akrawitz","name":"Adam Krawitz","avatar_url":"https://avatars-next.observableusercontent.com/232e39a655b3dffeaad79a6e590471290f026876224f3f7c9825f12c3f0147bc","tier":"starter_2024"},"version":1361,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"f056c267619fba67","login":"akrawitz","name":"Adam Krawitz","avatar_url":"https://avatars-next.observableusercontent.com/8b0aba291db32e92917b2b37e94c3c5568c23f50e1e769e8f76508b16293220c","tier":null}],"members":[{"type":"individual","id":"f056c267619fba67","login":"akrawitz","name":"Adam Krawitz","avatar_url":"https://avatars-next.observableusercontent.com/8b0aba291db32e92917b2b37e94c3c5568c23f50e1e769e8f76508b16293220c","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":{"id":"8ee1672695697eae","slug":"uvic-hinf-485","title":"UVic HINF 485 Demonstrations","owner":{"id":"3861495db0d6917b","login":"akrawitz","name":"Adam Krawitz"}},"type":"notebook","body":{"title":"HINF 485 Demo: Self-organizing Maps","cells":[{"id":0,"value":"# HINF 485 Demo: Self-organizing Maps\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":680,"value":"assignmentToc()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":682,"value":"## Introduction\nIn this demonstration we will look at self-organizing maps of the sort pioneered by [Kohonen (1990)](https://doi.org/10.1109/5.58325). In these networks, a multi-dimensional input vector gets mapped to a particular node (location) in a grid-like two-dimensional output layer. Initially, the location of the winning node in the output layer is random, but after learning, similar inputs activate nearby output nodes. This organization-by-similarity emerges from repeated updating of the weights from inputs to outputs according to a Hebbian principle, without supervision. This similarity-based organization without a training signal is what is meant by \"self-organizing\".","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":772,"value":"### Architecture\nThe input layer has a vector of *N* nodes whose activation varies from 0 to 1. The output layer has an *X* by *Y* grid of nodes, all of which, but one, have 0 activation, while the other one has an activation of 1. Every input node is connected to every output node, thus there are *N* ⋅ *X* ⋅ *Y* connections, each with a weight.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":792,"value":"### Operation\nWhen an input vector, ***i*** = (*i*₁, *i*₂, ... *i*_*N*), is presented to the network, a single winning output node, *o*_{*x*_win, *y*_win} is selected. The winner is defined as the output node whose incoming weight vector, ***w***_*x*,*y* most closely matches the input vector. In other words, the difference, *δ*_*x*,*y*, is the smallest. We will use the Euclidean distance to find the closest node:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":809,"value":"\\min_{x,y}(\\delta_{x,y}) = \\min_{x,y}||\\bm{i}- \\bm{w_{x,y}}|| = \\min_{x,y}\\sqrt{\\sum_{n = 1}^{N} (i_n - w_{n,x,y})^2}","pinned":false,"hidden":false,"mode":"tex","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":852,"value":"### Training\nThe network is trained by adjusting the weights between the input layer and each output node to decrease the distance between the current input vector and the weight vectors. At the beginning of training, the weight changes are relatively large and influence a wide neighborhood of nodes around the winner. As time passes, the weight changes are smaller, and also the size of the neighborhood decreases. The update rule is:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":868,"value":"\\bm{w_{x,y}'} = \\bm{w_{x,y}} + \\alpha_t\\beta_{x,y,t}(\\bm{i} - \\bm{w_{x,y}})","pinned":false,"hidden":false,"mode":"tex","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":881,"value":"where the learning rate, *α*, decreases exponentially over time, *t*:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":887,"value":"\\alpha_t = \\alpha_0 \\cdot \\exp(\\frac{-t}{\\lambda})","pinned":false,"hidden":false,"mode":"tex","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":897,"value":"based on a starting learning rate, *α*₀, and a temporal decay rate, *λ*. And the influence of the training, *β*, diminishes with time, *t*, and with distance from the winning node, *d*_*x*,*y*:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":919,"value":"\\beta_{x,y,t} = \\exp(\\frac{-d_{x,y}^2}{2\\sigma_t^2})","pinned":false,"hidden":false,"mode":"tex","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":929,"value":"where *d*_*x*,*y* is the Euclidean distance between the coordinates of this node and the winning node:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":942,"value":"d_{x,y} = \\sqrt{(x_{win} - x)^2 + (y_{win} - y)^2}","pinned":false,"hidden":false,"mode":"tex","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":954,"value":"and *σ*_*t* is a time diminishing factor:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":955,"value":"\\sigma_t = \\sigma_0 \\cdot \\exp(\\frac{-t}{\\lambda})","pinned":false,"hidden":false,"mode":"tex","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":964,"value":"based on a starting distance factor, *σ*_*0*, and the same temporal decay rate, *λ*, used above.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":987,"value":"Thus there are three parameters that control training:\n* *α*₀, the starting **learning factor**\n* *σ*_*o*, the starting **distance factor**\n* *λ*, the **time constant**","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1022,"value":"(Note that while the general plan described above is common to Kohonen maps, the particulars can vary. For example, one can use a hexagonal grid instead of a square grid. One can use a different metric to determine the winning node. Or one can use a different learning rule to update the weights. These choices can make large practical differences in terms of efficiency and success, but they don't change the fundamental self-organizing nature of these networks.)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1002,"value":"## Running Networks\nWe can use our standard controls to run the network simulations:\n- To reset to an initial random state, click **Reset**. This will reset all of the connection weights to random values.\n- To advance the simulation one step, click **Step**. On each step, a single input vector is selected randomly, presented to the network, and the weights are updated accordingly.\n- To run lots of steps in succession, click **Start**, and then **Stop** when you want to stop it.\n- To run the simulation faster or slower, drag the **Speed** slider (leftward = slower, rightward = faster). The actual speed depends on both the speed setting and the size of the network. Larger networks generally run slower due to the complexity of the visualization.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":686,"value":"$2f","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":49,"value":"viewof conColor = controls()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":68,"value":"SOMColorViz(this, simColor, conColor)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":56,"value":"simColor = SOMSim(this, conColor, {data: SOMColorData({random: false}), timeConstant: 1000, learningFactor: 0.1, distanceFactor: 20})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":690,"value":"## Net 2. Space I\nFor this SOM, the inputs are two-dimensional coordinates in space. There are 100 input values used, which are spaced out evenly in a 10 by 10 grid. The 100 output nodes are also organized in a 10 by 10 grid.\n\nThe visualization shows the *input* space, with each input data point illustrated as a grey dot. The output nodes are displayed based on their preferred location in the input space. In other words, the two weights for each output node define its location in the input space. The output nodes are drawn as black circles filed with white. They are connected to their neighboring output nodes with black lines.\n\nInitially the weights are random, so the locations of the output nodes in the input space are random and completely scrambled. As the weights are updated based on experience, the map self-organizes...","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":186,"value":"viewof conGrid = controls()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":134,"value":"SOMGridViz(this, simGrid, conGrid, {random: false})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":130,"value":"simGrid = SOMSim(this, conGrid, {rows: 10, columns: 10, depth: 2, data: SOMGridData({random: false}), timeConstant: 1000, learningFactor: 0.25, distanceFactor: 5})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":705,"value":"$30","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":363,"value":"viewof conAnimal = controls()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":370,"value":"SOMCategoryViz(this, simAnimal, conAnimal, {labels: SOMAnimalLabels(), mapNodes: false})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":364,"value":"simAnimal = SOMSim(this, conAnimal, {rows: 10, columns: 10, depth: 13, data: SOMAnimalData(), timeConstant: 1000, learningFactor: 0.25, distanceFactor: 5})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":485,"value":"viewof conWord = controls()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":35,"value":"## Definitions","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":43,"value":"### Simulation","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":52,"value":"$31","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":316,"value":"function bestMatchNode(datum, som) {\n // Find best matching unit\n let bestRow = 0;\n let bestColumn = 0;\n let bestDistance = datum.length;\n for (let row = 0; row < som.length; row++) {\n for (let column = 0; column < som[0].length; column++) {\n const distance = euclideanDistance(datum, som[row][column]);\n if (distance < bestDistance) {\n bestDistance = distance;\n bestRow = row;\n bestColumn = column;\n }\n }\n }\n return {row: bestRow, column: bestColumn};\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":410,"value":"function bestMatchDatum(node, data) {\n // Find best matching unit\n let bestIndex = 0;\n let bestDistance = node.length;\n for (let index = 0; index < data.length; index++) {\n const distance = euclideanDistance(node, data[index]);\n if (distance < bestDistance) {\n bestDistance = distance;\n bestIndex = index;\n }\n }\n return bestIndex;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":516,"value":"function euclideanDistance (x, y) {\n const vectorSize = x.length\n let result = 0;\n let diff = 0;\n for (let i = 0; i < vectorSize; i++) {\n diff = x[i] - y[i];\n result += diff * diff;\n }\n return Math.sqrt(result)\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":40,"value":"### Visualization","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":58,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":124,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":368,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":146,"value":"### Data","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":137,"value":"function SOMColorData({random = true} = {}) { // Setup the Inputs\n let data = math.random([10, 3], 0, 1);\n\n if (!random) {\n data = [\n [1.0, 0.0, 0.0],\n [1.0, 1.0, 0.0],\n [0.0, 1.0, 0.0],\n [0.0, 1.0, 1.0],\n [0.0, 0.0, 1.0],\n [1.0, 0.0, 1.0],\n ];\n }\n \n return data;\n}\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":156,"value":"function SOMGridData({random = true} = {}) {\n const total = 100;\n const depth = 2;\n const data = math.random([total, depth], 0, 1);\n\n let datumIndex = 0;\n const size = 10;\n if (!random) {\n for (let row = 0; row < size; row++) {\n for (let column = 0; column < size; column++) {\n data[datumIndex][0] = (row + 0.5) / size;\n data[datumIndex][1] = (column + 0.5) / size;\n datumIndex++;\n }\n }\n }\n \n return data;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":361,"value":"function SOMAnimalLabels() {\n const labels = [\n 'dove',\n 'hen',\n 'duck',\n 'goose',\n 'owl',\n 'eagle',\n 'fox',\n 'dog',\n 'wolf',\n 'cat',\n 'tiger',\n 'lion',\n 'horse',\n 'cow',\n ];\n \n return labels;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":357,"value":"function SOMAnimalData() {\n const data = [\n [1, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 1, 0],\n [1, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0],\n [1, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 1],\n [1, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 1, 1],\n [1, 0, 0, 1, 0, 0, 0, 0, 1, 1, 0, 1, 0],\n [0, 1, 0, 1, 0, 0, 0, 0, 1, 1, 0, 1, 0],\n [0, 1, 0, 0, 1, 1, 0, 0, 0, 1, 0, 0, 0],\n [0, 1, 0, 0, 1, 1, 0, 0, 0, 0, 1, 0, 0],\n [0, 1, 0, 0, 1, 1, 0, 1, 0, 1, 1, 0, 0],\n [1, 0, 0, 0, 1, 1, 0, 0, 0, 1, 0, 0, 0],\n [0, 0, 1, 0, 1, 1, 0, 0, 0, 1, 1, 0, 0],\n [0, 0, 1, 0, 1, 1, 0, 1, 0, 1, 1, 0, 0],\n [0, 0, 1, 0, 1, 1, 1, 1, 0, 0, 1, 0, 0],\n [0, 0, 1, 0, 1, 1, 1, 0, 0, 0, 0, 0, 0],\n ];\n\n return data; \n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"## Resources","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":663,"value":"Load assignment styles.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":667,"value":"import {assignmentStyles} from '@akrawitz/assignment-styles'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":670,"value":"assignmentStyles","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":673,"value":"Load assignment table of contents.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":677,"value":"import {assignmentToc} from '@akrawitz/assignment-toc'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"Load simulation controls.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"import {controls} from '@akrawitz/simulation-controls'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"Load pleasant colors.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"import {colors} from '@akrawitz/pleasant-colors'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":23,"value":"Load [math.js](https://mathjs.org/), \"an extensive math library for JavaScript and Node.js\".","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":24,"value":"math = require(\"mathjs\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":26,"value":"Load [d3](https://d3js.org/), \"a JavaScript library for manipulating documents based on data\".","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":30,"value":"d3 = require('d3')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":253,"value":"Load [jStat](https://jstat.github.io/), \"a statistical library written in JavaScript that allows you to perform advanced statistical operations\".","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":230,"value":"jstat = require('jstat')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"## References\n* [Kohonen Self-Organizing Maps (Eklavya, 2019)](https://towardsdatascience.com/kohonen-self-organizing-maps-a29040d688da)\n* [Kohonen's self-organizing feature maps in Processing](http://jjguy.com/som/)\n* [Kohonen network - Scholarpedia (Kohonen & Honkela, 2007)](https://doi.org/10.4249/scholarpedia.1568)\n* [Self-organizing semantic maps (Ritter & Kohonen, 1989)](https://doi.org/10.1007/BF00203171)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W35","stdlib":"1","titling":"auto"}} 2e:"$2d:body"