40:null 41:["$","title",null,{"children":"SOM (Self Organizing Maps): Opening the black box | Mathias Tiberghien | Observable"}] 47:T936,md`# SOM (Self Organizing Maps): Opening the black box If you don't know about SOM algorithm have a look [here](https://en.wikipedia.org/wiki/Self-organizing_map), otherwise you can just know that SOM is a competitive unsupervised neural network. As a data science student I had to implement such an algorithm. the current document won't focus on the code behind but try to show what is happening when it is running. As I think that visualization is really helpful to understand what is going on, I used [Vega](https://vega.github.io/vega/) to create som tools showing the algorithm in action. I first used [iris.data](http://archive.ics.uci.edu/ml/machine-learning-databases/iris/) file which is convenient because have very few data and few parameter so you can project it easily in 2D then I worked with [mnist_train.csv](https://www.kaggle.com/oddrationale/mnist-in-csv) which has much more entries and paramaters and is image based. The SOM implementation had to support 1D, 2D and 3D topologies: I represented each dimensions using same data source (iris.data) for the training. Then I created a 2D umatrix visualization and finally a MNIST neuron viewer where you can admire the beauty behind the numbers. **Notes:** 1. To be able to reprensent the training in action i did the following: - Each time a vector is presented to the network, I scored the entire network to get the following information - How many and which vectors (among the dataset) activated a neurons - What is the class (label of the vector) for each neuron - What is the optional secondary class for each neuron (when vectors with different labels are activating the neuron) - I saved for each step for each neuron: - the coordinates of the neuron - the neuron vector - the index of entries that have activated the vector - the total score (number of entries that activated the vector) - the number of entries of dominant class - the number of entries of secondary class - the id of the step - The training with iris.data used 1500 steps 2. The U-Matrix is generated inside the visualization (thanks to Vega transormations) 3. The Mnist viewer is using a the final step (when the network is trained) to avoid having too big file I have attached the input files used by the different visualizations in case you want to watch the file structure `48:T287c,embed({ "$schema": "https://vega.github.io/schema/vega/v5.json", "width": 700, "height": 525, "padding": 5, "background": "black", "signals": [ { "name": "current_step", "value": -1, "bind": {"input": "range", "min": -1, "max": 1500, "step": 1}, "on": [ { "events": "timer{100}", "update": "autoplay ? (current_step >= steps[1] ? -1 :current_step + 1 ): current_step" } ] }, { "name": "neuronscale", "init": "min(2,min(width,height)/400)", "bind": {"input": "range", "min": 0.5, "step": 0.1, "max": 2} }, {"name": "autoplay", "value": false, "bind": {"input": "checkbox"}}, {"name": "showrealdata", "value": true, "bind": {"input": "checkbox"}}, {"name": "showneurons", "value": true, "bind": {"input": "checkbox"}}, {"name": "showlinks", "value": true, "bind": {"input": "checkbox"}}, { "name": "scale", "value": 0.8, "bind": {"input": "range", "step": 0.05, "min": 0, "max": 1}, "on": [ { "events": "view:mousewheel", "update": "max(0, min(1, scale + (event.wheelDelta > 0 ? 0.1 : -0.1)))" } ] }, { "name": "selectedNeuron", "init": "{}", "on": [ {"events": "@neuron:mouseover", "update": "datum"}, {"events": "@neuron:mouseout", "update": "{}"} ] } ], "data": [ { "name": "labels", "values": [ {"id": -1, "name": "None"}, {"id": 0, "name": "Iris-setosa"}, {"id": 1, "name": "Iris-versicolor"}, {"id": 2, "name": "Iris-virginica"} ] }, { "name": "iris", "transform": [ {"type": "filter", "expr": "isValid(datum.pw)"}, {"type": "formula", "expr": "datum.pl+datum.pw", "as": "x"}, {"type": "formula", "expr": "datum.sl+datum.sw", "as": "y"}, {"type": "formula", "expr": "scale('id', datum.class)", "as": "class"}, {"type": "window", "ops": ["row_number"], "as": ["id"]}, {"type": "formula", "expr": "datum.id - 1", "as": "id"} ], "format": { "type": "csv", "parse": { "sl": "number", "sw": "number", "pl": "number", "pw": "number" }, "header": ["sl", "sw", "pl", "pw", "class"], "delimiter": "," }, "url": iris_data }, { "name": "neurons", "format": { "type": "dsv", "delimiter": ";", "parse": { "x": "number", "y": "number", "z": "number", "step": "number", "score": "number", "secondary": "number", "class": "number", "score1": "number", "score2": "number" }, "header": [ "vector", "x", "y", "z", "step", "score", "class", "secondary", "score1", "score2", "entries" ] }, "url": await FileAttachment("som1D.data").url(), "transform": [ {"type": "extent", "signal": "steps", "field": "step"}, {"type": "extent", "signal": "scores", "field": "score"}, {"type": "filter", "expr": "datum.step === current_step"}, { "type": "formula", "expr": "split(replace(replace(datum.vector, '[',''),']',''),',')", "as": "vector" }, { "type": "formula", "expr": "[toNumber(datum.vector[0]),toNumber(datum.vector[1]),toNumber(datum.vector[2]),toNumber(datum.vector[3])]", "as": "vector" }, { "type": "formula", "expr": "datum.vector[0]+datum.vector[1]", "as": "y" }, { "type": "formula", "expr": "datum.vector[2]+datum.vector[3]", "as": "x" }, {"type": "window", "ops": ["row_number"], "as": ["id"]}, {"type": "formula", "expr": "datum.id - 1", "as": "id"} ] }, { "name": "entries", "source": "neurons", "transform": [ {"type": "filter", "expr": "datum.id === selectedNeuron.id"}, {"type": "project", "fields": ["entries"]}, { "type": "formula", "expr": "split(replace(replace(datum.entries, '[',''),']',''),',')", "as": "entries" }, {"type": "flatten", "fields": ["entries"]}, {"type": "formula", "expr": "toNumber(datum.entries)", "as": "entries"}, { "type": "lookup", "from": "iris", "key": "id", "fields": ["entries"], "values": ["x", "y"] } ] }, { "name": "links", "source": "neurons", "transform": [ { "type": "project", "fields": ["id", "x", "y"], "as": ["s_id", "sx", "sy"] }, {"type": "formula", "expr": "datum.s_id + 1", "as": "t_id"}, { "type": "lookup", "from": "neurons", "key": "id", "fields": ["t_id"], "values": ["x", "y"], "as": ["tx", "ty"] }, {"type": "filter", "expr": "isValid(datum.tx) && isValid(datum.ty)"} ] } ], "scales": [ { "name": "xscale", "type": "linear", "domain": {"data": "iris", "field": "x"}, "zero": false, "range": [ {"signal": "width*(1-scale)/2"}, {"signal": "width*(scale+1)/2"} ] }, { "name": "yscale", "type": "linear", "domain": {"data": "iris", "field": "y"}, "range": [ {"signal": "height*(1-scale)/2"}, {"signal": "height*(1+scale)/2"} ], "zero": false }, { "name": "color", "type": "ordinal", "domain": {"data": "labels", "field": "id", "sort": true}, "range": ["#555", "red", "yellow", "blue"] }, { "name": "id", "type": "ordinal", "domain": {"data": "labels", "field": "name"}, "range": {"data": "labels", "field": "id"} }, { "name": "label", "type": "ordinal", "domain": {"data": "labels", "field": "id", "sort": true}, "range": {"data": "labels", "field": "name"} }, { "name": "score", "type": "linear", "domain": {"signal": "scores"}, "range": [{"signal": "50*neuronscale"}, {"signal": "300*neuronscale"}] } ], "legends": [ { "orient": "right", "fill": "color", "labelColor": "#fff", "encode": { "labels": {"update": {"text": {"signal": "scale('label',datum.value)"}}} } } ], "axes": [ { "orient": "left", "scale": "yscale", "title": "Sepal.Width + Sepal.Length", "titleColor": "#fff", "domain": false, "labels": false, "ticks": false }, { "orient": "bottom", "scale": "xscale", "titleColor": "#fff", "title": "Petal.Width + Petal.Length", "domain": false, "labels": false, "ticks": false } ], "marks": [ { "type": "text", "encode": { "enter": { "fontSize": {"value": 14}, "fontWeight": {"value": "bold"}, "xc": {"signal": "width/2"}, "align": {"value": "center"}, "fill": {"value": "#eee"} }, "update": {"text": {"signal": "'SOM 1D step: ' + current_step"}} } }, { "type": "symbol", "from": {"data": "iris"}, "encode": { "enter": {"stroke": {"value": "#555"}}, "update": { "size": {"value": 30, "mult": {"signal": "neuronscale"}}, "opacity": {"signal": "showrealdata ? 0.6 : 0"}, "fill": {"field": "class", "scale": "color"}, "xc": {"field": "x", "scale": "xscale"}, "yc": {"field": "y", "scale": "yscale"} } } }, { "type": "symbol", "from": {"data": "entries"}, "encode": { "enter": {"stroke": {"value": "#555"}}, "update": { "size": {"value": 30, "mult": {"signal": "neuronscale"}}, "fill": {"value": "white"}, "xc": {"field": "x", "scale": "xscale"}, "yc": {"field": "y", "scale": "yscale"} } } }, { "type": "rule", "from": {"data": "links"}, "encode": { "update": { "stroke": {"value": "#bbb"}, "strokeWidth": {"value": 0.5}, "opacity": {"signal": "showlinks && showneurons ? 1 :0"}, "x": [{"field": "sx", "scale": "xscale"}], "y": [{"field": "sy", "scale": "yscale"}], "x2": [{"field": "tx", "scale": "xscale"}], "y2": [{"field": "ty", "scale": "yscale"}] } } }, { "type": "symbol", "name": "neuron", "from": {"data": "neurons"}, "encode": { "enter": {"stroke": {"field": "secondary", "scale": "color"}}, "update": { "tooltip": { "signal": "{'score max':datum.score1, 'score 2':datum.score2,'coords':'['+datum.id+']'}" }, "strokeWidth": {"signal": "datum.secondary >-1 ? 3:1"}, "opacity": { "signal": "showneurons ? ((!isDefined(selectedNeuron.id) || selectedNeuron.id === datum.id || datum.class !== selectedNeuron.class) ? (datum.stabilized ? 0.5: 1): 0.3) : 0" }, "size": [ {"field": "score", "scale": "score", "mult": {"signal": "2*scale"}} ], "fill": [ {"test": "selectedNeuron.id == datum.id", "value": "white"}, {"field": "class", "scale": "color"} ], "xc": [{"field": "x", "scale": "xscale"}], "yc": [{"field": "y", "scale": "yscale"}] } } }, { "type": "text", "from": {"data": "neuron"}, "encode": { "enter": { "fill": {"value": "white"}, "text": {"field": "datum.score"}, "baseline": {"value": "bottom"}, "align": {"value": "right"} }, "update": { "xc": { "signal": "datum.bounds.x1", "offset": {"signal": "-min(4, 3*scale)"} }, "yc": {"field": "yc"}, "opacity": {"signal": "datum.datum.id === selectedNeuron.id ? 1 :0"} } } } ] });49:T477,interactions = md`Here are listed the different interactions in the visualization: - current_step allows you to navigate manually trough the 1500 iterations of the algorithm - neuronscale allows to change the size of elements - autoplay allows you to see the algorithm in action - showrealdata allows you to display/hide the real data projections - showneurons allows you to display/hide the SOM neurons - showlinks allows you to display/hide the SOM neuron-to-neuron links - scale allows you to modify the global scale of the visualization (works with mousewheel) - hovering over a neuron (larger symbols) should display: - The number of entries that activated the neuron (appearing in white on the left of the neuron) - The entries that activated the neuron (they become white) - A tooltip displaying: - The number of entries of the same class that matched the most with that neuron - The number of entries of the same class that matched the second most with the neuron - The coordinates of the node according to the dimension `4a:T32d4,embed({ "$schema": "https://vega.github.io/schema/vega/v5.json", "width": 700, "height": 525, "padding": 5, "background": "black", "signals": [ { "name": "current_step", "value": -1, "bind": {"input": "range", "min": -1, "max": 1500, "step": 1}, "on": [ { "events": "timer{100}", "update": "autoplay ? (current_step >= steps[1] ? -1 :current_step + 1 ): current_step" } ] }, { "name": "neuronscale", "init": "min(2,min(width,height)/400)", "bind": {"input": "range", "min": 0.5, "step": 0.1, "max": 2} }, {"name": "autoplay", "value": false, "bind": {"input": "checkbox"}}, {"name": "showmap", "value": false, "bind": {"input": "checkbox"}}, {"name": "showrealdata", "value": true, "bind": {"input": "checkbox"}}, {"name": "showlinks", "value": true, "bind": {"input": "checkbox"}}, { "name": "scale", "value": 0.8, "bind": {"input": "range", "step": 0.05, "min": 0, "max": 1}, "on": [ { "events": "view:mousewheel", "update": "max(0, min(1, scale + (event.wheelDelta > 0 ? 0.1 : -0.1)))" } ] }, { "name": "selectedNeuron", "init": "{}", "on": [ {"events": "@neuron:mouseover", "update": "datum"}, {"events": "@neuron:mouseout", "update": "{}"} ] } ], "data": [ { "name": "labels", "values": [ {"id": -1, "name": "None"}, {"id": 0, "name": "Iris-setosa"}, {"id": 1, "name": "Iris-versicolor"}, {"id": 2, "name": "Iris-virginica"} ] }, { "name": "iris", "transform": [ {"type": "filter", "expr": "isValid(datum.pw)"}, {"type": "formula", "expr": "datum.pl+datum.pw", "as": "x"}, {"type": "formula", "expr": "datum.sl+datum.sw", "as": "y"}, {"type": "formula", "expr": "scale('id', datum.class)", "as": "class"}, {"type": "window", "ops": ["row_number"], "as": ["id"]}, {"type": "formula", "expr": "datum.id - 1", "as": "id"} ], "format": { "type": "csv", "parse": { "sl": "number", "sw": "number", "pl": "number", "pw": "number" }, "header": ["sl", "sw", "pl", "pw", "class"], "delimiter": "," }, "url": iris_data }, { "name": "neurons", "format": { "type": "dsv", "delimiter": ";", "parse": { "x-grid": "number", "y-grid": "number", "z-grid": "number", "step": "number", "score": "number", "score1": "number", "score2": "number", "secondary": "number", "class": "number" }, "header": [ "vector", "x-grid", "y-grid", "z-grid", "step", "score", "class", "secondary", "score1", "score2", "entries" ] }, "url": som_2D_data, "transform": [ {"type": "extent", "signal": "steps", "field": "step"}, {"type": "extent", "signal": "scores", "field": "score"}, {"type": "filter", "expr": "datum.step === current_step"}, { "type": "formula", "expr": "split(replace(replace(datum.vector, '[',''),']',''),',')", "as": "vector" }, { "type": "formula", "expr": "[toNumber(datum.vector[0]),toNumber(datum.vector[1]),toNumber(datum.vector[2]),toNumber(datum.vector[3])]", "as": "vector" }, { "type": "formula", "expr": "datum.vector[0]+datum.vector[1]", "as": "y" }, { "type": "formula", "expr": "datum.vector[2]+datum.vector[3]", "as": "x" }, { "type": "formula", "expr": "{x:datum['x-grid'], y:datum['y-grid'],z:datum['z-grid']}", "as": "neuron" }, { "type": "formula", "expr": "datum.neuron.x+'.'+datum.neuron.y+'.'+datum.neuron.z", "as": "id" } ] }, { "name": "entries", "source": "neurons", "transform": [ {"type": "filter", "expr": "datum.id === selectedNeuron.id"}, {"type": "project", "fields": ["entries"]}, { "type": "formula", "expr": "split(replace(replace(datum.entries, '[',''),']',''),',')", "as": "entries" }, {"type": "flatten", "fields": ["entries"]}, {"type": "formula", "expr": "toNumber(datum.entries)", "as": "entries"}, { "type": "lookup", "from": "iris", "key": "id", "fields": ["entries"], "values": ["x", "y"] } ] }, { "name": "dimensions", "source": "neurons", "transform": [ { "type": "aggregate", "fields": ["x-grid", "y-grid", "z-grid"], "ops": ["max", "max", "max"], "as": ["dx", "dy", "dz"] }, { "type": "formula", "expr": "[datum.dx+1, datum.dy+1, datum.dz+1]", "as": "d" } ] }, { "name": "links", "source": "neurons", "transform": [ { "type": "project", "fields": ["neuron", "id"], "as": ["source", "s_id"] }, {"type": "formula", "expr": "data('dimensions')[0].d", "as": "dim"}, { "type": "formula", "expr": "[min(datum.dim[0]-1,datum.source.x+1)+'.'+datum.source.y +'.'+datum.source.z,datum.source.x+'.'+min(datum.dim[1]-1,datum.source.y+1)+'.'+datum.source.z,datum.source.x+'.'+datum.source.y+'.'+min(datum.dim[2]-1,datum.source.z+1)]", "as": "target" }, {"type": "flatten", "fields": ["target"]}, { "type": "lookup", "from": "neurons", "key": "id", "fields": ["s_id"], "values": ["x", "y", "z"], "as": ["s_x", "s_y", "s_z"] }, { "type": "lookup", "from": "neurons", "key": "id", "fields": ["target"], "values": ["x", "y", "z", "neuron"], "as": ["t_x", "t_y", "t_z", "target"] } ] } ], "legends": [ { "orient": "right", "fill": "color", "labelColor": "#fff", "encode": { "labels": {"update": {"text": {"signal": "scale('label',datum.value)"}}} } } ], "scales": [ { "name": "xscale", "type": "linear", "domain": {"data": "iris", "field": "x"}, "zero": false, "range": [ {"signal": "width*(1-scale)/2"}, {"signal": "width*(scale+1)/2"} ] }, { "name": "yscale", "type": "linear", "domain": {"data": "iris", "field": "y"}, "range": [ {"signal": "height*(1-scale)/2"}, {"signal": "height*(1+scale)/2"} ], "zero": false }, { "name": "xscale-grid", "type": "linear", "domain": {"data": "neurons", "field": "x-grid"}, "range": [ {"signal": "width*(1-scale)/2"}, {"signal": "width*(scale+1)/2"} ] }, { "name": "yscale-grid", "type": "linear", "domain": {"data": "neurons", "field": "y-grid"}, "range": [ {"signal": "height*(1-scale)/2"}, {"signal": "height*(1+scale)/2"} ], "zero": false }, { "name": "color", "type": "ordinal", "domain": {"data": "labels", "field": "id", "sort": true}, "range": ["#555", "red", "yellow", "blue"] }, { "name": "label", "type": "ordinal", "domain": {"data": "labels", "field": "id"}, "range": {"data": "labels", "field": "name"} }, { "name": "id", "type": "ordinal", "domain": {"data": "labels", "field": "name"}, "range": {"data": "labels", "field": "id"} }, { "name": "score", "type": "linear", "domain": {"signal": "scores"}, "range": [{"signal": "50*neuronscale"}, {"signal": "300*neuronscale"}] } ], "axes": [ { "orient": "left", "scale": "yscale", "title": {"signal": "showmap ? 'Rows':'Sepal.Width + Sepal.Length'"}, "titleColor": "#fff", "domain": false, "labels": false, "ticks": false }, { "orient": "bottom", "scale": "xscale", "titleColor": "#fff", "title": {"signal": "showmap ? 'Columns':'Petal.Width + Petal.Length'"}, "domain": false, "labels": false, "ticks": false } ], "marks": [ { "type": "text", "encode": { "enter": { "fontSize": {"value": 14}, "fontWeight": {"value": "bold"}, "xc": {"signal": "width/2"}, "align": {"value": "center"}, "fill": {"value": "#eee"} }, "update": { "text": { "signal": "(showmap ? 'SOM 2D map: ':'SOM 2D step: ') + current_step" } } } }, { "type": "symbol", "from": {"data": "iris"}, "encode": { "enter": {"stroke": {"value": "#555"}}, "update": { "size": {"value": 30, "mult": {"signal": "neuronscale"}}, "opacity": {"signal": "showrealdata && !showmap ? 0.5 : 0"}, "fill": {"field": "class", "scale": "color"}, "xc": {"field": "x", "scale": "xscale"}, "yc": {"field": "y", "scale": "yscale"} } } }, { "type": "symbol", "from": {"data": "entries"}, "encode": { "enter": {"stroke": {"value": "#555"}}, "update": { "size": {"value": 30, "mult": {"signal": "neuronscale"}}, "opacity": {"signal": "showrealdata && !showmap ? 1 : 0"}, "fill": {"value": "white"}, "xc": {"field": "x", "scale": "xscale"}, "yc": {"field": "y", "scale": "yscale"} } } }, { "type": "rule", "from": {"data": "links"}, "encode": { "update": { "stroke": {"value": "#bbb"}, "strokeWidth": {"value": 0.5}, "opacity": {"signal": "showlinks ? 1 :0"}, "x": [ {"test": "showmap", "field": "source.x", "scale": "xscale-grid"}, {"field": "s_x", "scale": "xscale"} ], "y": [ {"test": "showmap", "field": "source.y", "scale": "yscale-grid"}, {"field": "s_y", "scale": "yscale"} ], "x2": [ {"test": "showmap", "field": "target.x", "scale": "xscale-grid"}, {"field": "t_x", "scale": "xscale"} ], "y2": [ {"test": "showmap", "field": "target.y", "scale": "yscale-grid"}, {"field": "t_y", "scale": "yscale"} ] } } }, { "type": "symbol", "name": "neuron", "from": {"data": "neurons"}, "encode": { "enter": {"stroke": {"field": "secondary", "scale": "color"}}, "update": { "tooltip": { "signal": "{'score max':datum.score1, 'score 2':datum.score2,'coords':'['+datum['x-grid']+','+datum['y-grid']+']'}" }, "strokeWidth": {"signal": "datum.secondary >-1 ? 3:1"}, "opacity": [ { "test": "!showmap", "signal": "((!isDefined(selectedNeuron.id) || selectedNeuron.id === datum.id || datum.class !== selectedNeuron.class) ? (datum.stabilized ? 0.5: 1): 0.3)" } ], "size": [ { "test": "showmap", "field": "score", "scale": "score", "mult": {"signal": "15*scale*neuronscale"} }, {"field": "score", "scale": "score", "mult": {"signal": "2*scale"}} ], "fill": [ {"test": "selectedNeuron.id == datum.id", "value": "white"}, {"field": "class", "scale": "color"} ], "xc": [ {"test": "showmap", "field": "x-grid", "scale": "xscale-grid"}, {"field": "x", "scale": "xscale"} ], "yc": [ {"test": "showmap", "field": "y-grid", "scale": "yscale-grid"}, {"field": "y", "scale": "yscale"} ] } } }, { "type": "text", "from": {"data": "neuron"}, "encode": { "enter": { "fill": {"value": "white"}, "text": {"field": "datum.score"}, "baseline": {"value": "bottom"}, "align": {"value": "right"} }, "update": { "xc": { "signal": "datum.bounds.x1", "offset": {"signal": "-min(4, 3*scale)"} }, "yc": {"field": "yc"}, "opacity": {"signal": "datum.datum.id === selectedNeuron.id ? 1 :0"} } } } ] });4b:T57a2,embed({ "$schema": "https://vega.github.io/schema/vega/v5.json", "width": 700, "height": 525, "padding": 5, "background": "black", "signals": [ { "name": "size_g", "init": "[data('dimensions')[0].dx,data('dimensions')[0].dy,data('dimensions')[0].dz]" }, {"name": "size_i", "init": "[ext_sl[1],ext_pl[1],ext_sw[1]]"}, { "name": "selectedNeuron", "init": "{}", "on": [ {"events": "@neuron:mouseover", "update": "datum"}, {"events": "@neuron:mouseout", "update": "{}"} ] }, { "name": "selectedNeuron_m", "init": "{}", "on": [ {"events": "@neuron_m:mouseover", "update": "datum"}, {"events": "@neuron_m:mouseout", "update": "{}"} ] }, { "name": "current_step", "value": -1, "bind": {"input": "range", "min": -1, "max": 1500, "step": 1}, "on": [ { "events": "timer{100}", "update": "autoplay ? (current_step >= steps[1] ? -1 :current_step + 1 ): current_step" } ] }, {"name": "autoplay", "value": false, "bind": {"input": "checkbox"}}, { "name": "neuronscale", "init": "min(width,height)/400", "bind": {"input": "range", "min": 0.5, "step": 0.1, "max": 2} }, {"name": "showmap", "value": true, "bind": {"input": "checkbox"}}, {"name": "showrealdata", "value": true, "bind": {"input": "checkbox"}}, {"name": "colors", "value": ["#77A7FB", "#E57368", "#FBCB43"]}, {"name": "size", "init": "min(width,height)"}, { "name": "angle_HOR", "on": [ { "events": { "source": "view", "type": "mousemove", "filter": "event.buttons === 1" }, "update": "rotation_HOR + (event.movementX > 0 ? -5 : event.movementX < 0 ? 5 : 0)" } ] }, { "name": "validAngle_HOR", "update": "angle_HOR % 360 <0 ? 360 + angle_HOR % 360 : angle_HOR % 360" }, { "name": "angle_VER", "on": [ { "events": { "source": "view", "type": "mousemove", "filter": "event.buttons === 1" }, "update": "rotation_VER + (event.movementY < 0 ? 5 : event.movementY > 0 ? -5 : 0)" } ] }, { "name": "validAngle_VER", "update": "angle_VER % 360 <0 ? 360 + angle_VER % 360 : angle_VER % 360" }, { "name": "rotation_HOR", "value": 305, "bind": {"input": "range", "min": 0, "max": 360, "step": 1}, "on": [ {"events": {"signal": "validAngle_HOR"}, "update": "validAngle_HOR"} ] }, { "name": "rotation_VER", "value": 55, "bind": {"input": "range", "min": 0, "max": 360, "step": 1}, "on": [ {"events": {"signal": "validAngle_VER"}, "update": "validAngle_VER"} ] }, { "name": "scale", "value": 1, "bind": {"input": "range", "min": 0, "max": 2, "step": 0.1}, "on": [ { "events": "view:mousewheel", "update": "max(0, min(2, scale + (event.wheelDelta > 0 ? 0.1 : -0.1)))" } ] }, { "name": "qrAngle_HOR", "init": "PI*rotation_HOR/360.0", "on": [ { "events": {"signal": "rotation_HOR"}, "update": "PI*rotation_HOR/360.0" } ] }, { "name": "qrAngle_VER", "init": "PI*rotation_VER/360.0", "on": [ { "events": {"signal": "rotation_VER"}, "update": "PI*rotation_VER/360.0" } ] }, {"name": "qrw0", "update": "cos(qrAngle_VER)"}, {"name": "qrw1", "update": "cos(qrAngle_HOR)"}, {"name": "qrx0", "update": "sin(qrAngle_VER)"}, {"name": "qrz1", "update": "sin(qrAngle_HOR)"}, { "name": "q", "update": "{x:qrx0*qrw1, y:-qrx0*qrz1, z:qrw0*qrz1, w: qrw0*qrw1}" }, {"name": "q_1", "update": "{x:-q.x, y:-q.y, z: -q.z, w: q.w}"}, {"name": "isYZBack", "update": "{z: 2*(q.x * q.z) - 2*(q.w * q.y)}.z < 0"}, {"name": "isXZBack", "update": "{z: 2*(q.y * q.z) + 2 *(q.w * q.x)}.z < 0"}, { "name": "isXYBack", "update": "{z: (q.z*q.z) - (q.y*q.y) - (q.x*q.x) + (q.w*q.w)}.z < 0" } ], "legends": [ { "orient": "right", "fill": "color", "labelColor": "#fff", "encode": { "labels": {"update": {"text": {"signal": "scale('label',datum.value)"}}} } } ], "data": [ { "name": "labels", "values": [ {"id": -1, "name": "None"}, {"id": 0, "name": "Iris-setosa"}, {"id": 1, "name": "Iris-versicolor"}, {"id": 2, "name": "Iris-virginica"} ] }, { "name": "iris", "transform": [ {"type": "filter", "expr": "isValid(datum.pw)"}, {"type": "extent", "field": "pl", "signal": "ext_pl"}, {"type": "extent", "field": "sl", "signal": "ext_sl"}, {"type": "extent", "field": "sw", "signal": "ext_sw"}, {"type": "formula", "expr": "datum.pl+datum.pw", "as": "x"}, {"type": "formula", "expr": "datum.sl+datum.sw", "as": "y"}, {"type": "formula", "expr": "scale('id', datum.class)", "as": "class"}, {"type": "window", "ops": ["row_number"], "as": ["id"]}, {"type": "formula", "expr": "datum.id - 1", "as": "id"} ], "format": { "type": "csv", "parse": { "sl": "number", "sw": "number", "pl": "number", "pw": "number" }, "header": ["sl", "sw", "pl", "pw", "class"], "delimiter": "," }, "url": iris_data }, { "name": "iris_p", "source": "iris", "transform": [ { "type": "formula", "expr": "{x:datum.sl -size_i[0]/2, y: datum.pl- size_i[1]/2, z:datum.sw-size_i[2]/2 , w:0}", "as": "qp" }, { "type": "formula", "expr": "{x:q.w * datum.qp.x + q.y*datum.qp.z- q.z * datum.qp.y, y:q.w * datum.qp.y - q.x * datum.qp.z + q.z*datum.qp.x, z:q.w * datum.qp.z + q.x*datum.qp.y - q.y * datum.qp.x, w: -q.x * datum.qp.x - q.y * datum.qp.y - q.z * datum.qp.z }", "as": "q1" }, { "type": "formula", "expr": "{x:datum.q1.w * q_1.x + datum.q1.x * q_1.w + datum.q1.y * q_1.z - datum.q1.z * q_1.y, y:datum.q1.w * q_1.y - datum.q1.x * q_1.z + datum.q1.y * q_1.w + datum.q1.z * q_1.x}", "as": "q2" }, {"type": "formula", "expr": "2*(datum.q2.x)/size_i[0]", "as": "px"}, {"type": "formula", "expr": "2*(datum.q2.y)/size_i[1]", "as": "py"}, {"type": "extent", "field": "px", "signal": "ext_px"}, {"type": "extent", "field": "py", "signal": "ext_py"} ] }, { "name": "neurons", "format": { "type": "dsv", "delimiter": ";", "parse": { "x": "number", "y": "number", "z": "number", "step": "number", "score": "number", "secondary": "number", "class": "number", "score1": "number", "score2": "number" }, "header": [ "vector", "x", "y", "z", "step", "score", "class", "secondary", "score1", "score2", "entries" ] }, "url": await FileAttachment("som3D.data").url(), "transform": [ {"type": "extent", "signal": "steps", "field": "step"}, {"type": "extent", "signal": "scores", "field": "score"}, {"type": "filter", "expr": "datum.step === current_step"}, { "type": "formula", "expr": "split(replace(replace(datum.vector, '[',''),']',''),',')", "as": "vector" }, { "type": "formula", "expr": "[toNumber(datum.vector[0]),toNumber(datum.vector[1]),toNumber(datum.vector[2]),toNumber(datum.vector[3])]", "as": "vector" }, { "type": "formula", "expr": "{x:datum.x, y:datum.y,z:datum.z}", "as": "neuron" }, { "type": "formula", "expr": "datum.neuron.x+'.'+datum.neuron.y+'.'+datum.neuron.z", "as": "id" } ] }, { "name": "projection", "source": "neurons", "transform": [ { "type": "formula", "expr": "{x:datum.x -size_g[0]/2, y: datum.y- size_g[1]/2, z:datum.z-size_g[2]/2.0 , w:0}", "as": "qp" }, { "type": "formula", "expr": "{x:q.w * datum.qp.x + q.y*datum.qp.z- q.z * datum.qp.y, y:q.w * datum.qp.y - q.x * datum.qp.z + q.z*datum.qp.x, z:q.w * datum.qp.z + q.x*datum.qp.y - q.y * datum.qp.x, w: -q.x * datum.qp.x - q.y * datum.qp.y - q.z * datum.qp.z }", "as": "q1" }, { "type": "formula", "expr": "{x:datum.q1.w * q_1.x + datum.q1.x * q_1.w + datum.q1.y * q_1.z - datum.q1.z * q_1.y, y:datum.q1.w * q_1.y - datum.q1.x * q_1.z + datum.q1.y * q_1.w + datum.q1.z * q_1.x}", "as": "q2" }, {"type": "formula", "expr": "(datum.q2.x)/size_g[0]", "as": "px"}, {"type": "formula", "expr": "(datum.q2.y)/size_g[1]", "as": "py"} ] }, { "name": "projection_n", "source": "neurons", "transform": [ { "type": "formula", "expr": "{x:datum.vector[0] -size_i[0]/2, y: datum.vector[2]- size_i[1]/2, z:datum.vector[1]-size_i[2]/2.0 , w:0}", "as": "qp" }, { "type": "formula", "expr": "{x:q.w * datum.qp.x + q.y*datum.qp.z- q.z * datum.qp.y, y:q.w * datum.qp.y - q.x * datum.qp.z + q.z*datum.qp.x, z:q.w * datum.qp.z + q.x*datum.qp.y - q.y * datum.qp.x, w: -q.x * datum.qp.x - q.y * datum.qp.y - q.z * datum.qp.z }", "as": "q1" }, { "type": "formula", "expr": "{x:datum.q1.w * q_1.x + datum.q1.x * q_1.w + datum.q1.y * q_1.z - datum.q1.z * q_1.y, y:datum.q1.w * q_1.y - datum.q1.x * q_1.z + datum.q1.y * q_1.w + datum.q1.z * q_1.x}", "as": "q2" }, {"type": "formula", "expr": "2*(datum.q2.x)/size_i[0]", "as": "px"}, {"type": "formula", "expr": "2*(datum.q2.y)/size_i[1]", "as": "py"} ] }, { "name": "entries", "source": "neurons", "transform": [ {"type": "filter", "expr": "datum.id === selectedNeuron.id"}, {"type": "project", "fields": ["entries"]}, { "type": "formula", "expr": "split(replace(replace(datum.entries, '[',''),']',''),',')", "as": "entries" }, {"type": "flatten", "fields": ["entries"]}, {"type": "formula", "expr": "toNumber(datum.entries)", "as": "entries"}, { "type": "lookup", "from": "iris_p", "key": "id", "fields": ["entries"], "values": ["px", "py"] } ] }, { "name": "dimensions", "source": "neurons", "transform": [ { "type": "aggregate", "fields": ["x", "y", "z"], "ops": ["max", "max", "max"], "as": ["dx", "dy", "dz"] }, { "type": "formula", "expr": "[datum.dx+1, datum.dy+1, datum.dz+1]", "as": "d" } ] }, { "name": "links", "source": "neurons", "transform": [ { "type": "project", "fields": ["neuron", "id"], "as": ["source", "s_id"] }, {"type": "formula", "expr": "data('dimensions')[0].d", "as": "dim"}, { "type": "formula", "expr": "[min(datum.dim[0]-1,datum.source.x+1)+'.'+datum.source.y +'.'+datum.source.z,datum.source.x+'.'+min(datum.dim[1]-1,datum.source.y+1)+'.'+datum.source.z,datum.source.x+'.'+datum.source.y+'.'+min(datum.dim[2]-1,datum.source.z+1)]", "as": "target" }, {"type": "flatten", "fields": ["target"]}, { "type": "lookup", "from": "neurons", "key": "id", "fields": ["s_id"], "values": ["x", "y", "z", "vector"], "as": ["s_x", "s_y", "s_z", "s_v"] }, { "type": "lookup", "from": "neurons", "key": "id", "fields": ["target"], "values": ["x", "y", "z", "neuron", "vector"], "as": ["t_x", "t_y", "t_z", "target", "t_v"] } ] }, { "name": "projection_l", "source": "links", "transform": [ { "type": "formula", "expr": "[{x:datum.s_x - size_g[0]/2, y: datum.s_y- size_g[1]/2, z:datum.s_z-size_g[2]/2, w:0},{x:datum.t_x-size_g[0]/2, y: datum.t_y-size_g[1]/2, z:datum.t_z-size_g[2]/2, w:0}]", "as": "qp" }, { "type": "formula", "expr": "[{x:q.w * datum.qp[0].x + q.y*datum.qp[0].z- q.z * datum.qp[0].y, y:q.w * datum.qp[0].y - q.x * datum.qp[0].z + q.z*datum.qp[0].x, z:q.w * datum.qp[0].z + q.x*datum.qp[0].y - q.y * datum.qp[0].x, w: -q.x * datum.qp[0].x - q.y * datum.qp[0].y - q.z * datum.qp[0].z },{x:q.w * datum.qp[1].x + q.y*datum.qp[1].z- q.z * datum.qp[1].y, y:q.w * datum.qp[1].y - q.x * datum.qp[1].z + q.z*datum.qp[1].x, z:q.w * datum.qp[1].z + q.x*datum.qp[1].y - q.y * datum.qp[1].x, w: -q.x * datum.qp[1].x - q.y * datum.qp[1].y - q.z * datum.qp[1].z }]", "as": "q1" }, { "type": "formula", "expr": "[{x:datum.q1[0].w * q_1.x + datum.q1[0].x * q_1.w + datum.q1[0].y * q_1.z - datum.q1[0].z * q_1.y, y:datum.q1[0].w * q_1.y - datum.q1[0].x * q_1.z + datum.q1[0].y * q_1.w + datum.q1[0].z * q_1.x},{x:datum.q1[1].w * q_1.x + datum.q1[1].x * q_1.w + datum.q1[1].y * q_1.z - datum.q1[1].z * q_1.y, y:datum.q1[1].w * q_1.y - datum.q1[1].x * q_1.z + datum.q1[1].y * q_1.w + datum.q1[1].z * q_1.x}]", "as": "q2" }, {"type": "formula", "expr": "(datum.q2[0].x)/size_g[0]", "as": "psx"}, {"type": "formula", "expr": "(datum.q2[0].y)/size_g[1]", "as": "psy"}, {"type": "formula", "expr": "(datum.q2[1].x)/size_g[0]", "as": "ptx"}, {"type": "formula", "expr": "(datum.q2[1].y)/size_g[1]", "as": "pty"} ] }, { "name": "projection_ln", "source": "links", "transform": [ { "type": "formula", "expr": "[{x:datum.s_v[0] - size_i[0]/2, y: datum.s_v[2]- size_i[1]/2, z:datum.s_v[1]-size_i[2]/2, w:0},{x:datum.t_v[0]-size_i[0]/2, y: datum.t_v[2]-size_i[1]/2, z:datum.t_v[1]-size_i[2]/2, w:0}]", "as": "qp" }, { "type": "formula", "expr": "[{x:q.w * datum.qp[0].x + q.y*datum.qp[0].z- q.z * datum.qp[0].y, y:q.w * datum.qp[0].y - q.x * datum.qp[0].z + q.z*datum.qp[0].x, z:q.w * datum.qp[0].z + q.x*datum.qp[0].y - q.y * datum.qp[0].x, w: -q.x * datum.qp[0].x - q.y * datum.qp[0].y - q.z * datum.qp[0].z },{x:q.w * datum.qp[1].x + q.y*datum.qp[1].z- q.z * datum.qp[1].y, y:q.w * datum.qp[1].y - q.x * datum.qp[1].z + q.z*datum.qp[1].x, z:q.w * datum.qp[1].z + q.x*datum.qp[1].y - q.y * datum.qp[1].x, w: -q.x * datum.qp[1].x - q.y * datum.qp[1].y - q.z * datum.qp[1].z }]", "as": "q1" }, { "type": "formula", "expr": "[{x:datum.q1[0].w * q_1.x + datum.q1[0].x * q_1.w + datum.q1[0].y * q_1.z - datum.q1[0].z * q_1.y, y:datum.q1[0].w * q_1.y - datum.q1[0].x * q_1.z + datum.q1[0].y * q_1.w + datum.q1[0].z * q_1.x},{x:datum.q1[1].w * q_1.x + datum.q1[1].x * q_1.w + datum.q1[1].y * q_1.z - datum.q1[1].z * q_1.y, y:datum.q1[1].w * q_1.y - datum.q1[1].x * q_1.z + datum.q1[1].y * q_1.w + datum.q1[1].z * q_1.x}]", "as": "q2" }, {"type": "formula", "expr": "2*(datum.q2[0].x)/size_i[0]", "as": "psx"}, {"type": "formula", "expr": "2*(datum.q2[0].y)/size_i[1]", "as": "psy"}, {"type": "formula", "expr": "2*(datum.q2[1].x)/size_i[0]", "as": "ptx"}, {"type": "formula", "expr": "2*(datum.q2[1].y)/size_i[1]", "as": "pty"} ] } ], "scales": [ { "name": "xscale", "type": "linear", "domain": [-1, 1], "range": [ {"signal": "width/2 - (0.5*size*scale)"}, {"signal": "width/2 + (0.5*size*scale)"} ] }, { "name": "yscale", "type": "linear", "domain": [-1, 1], "range": [ {"signal": "height/2 - (0.5*size*scale)"}, {"signal": "height/2 + (0.5*size*scale)"} ] }, { "name": "color", "type": "ordinal", "domain": {"data": "labels", "field": "id"}, "range": ["#555", "red", "yellow", "blue"] }, { "name": "score", "type": "linear", "domain": {"signal": "scores"}, "range": [{"signal": "50*neuronscale"}, {"signal": "300*neuronscale"}] }, { "name": "id", "type": "ordinal", "domain": {"data": "labels", "field": "name"}, "range": {"data": "labels", "field": "id"} }, { "name": "label", "type": "ordinal", "domain": {"data": "labels", "field": "id"}, "range": {"data": "labels", "field": "name"} } ], "marks": [ { "type": "text", "encode": { "enter": { "fontSize": {"value": 14}, "fontWeight": {"value": "bold"}, "xc": {"signal": "width/2"}, "yc": {"value": 15}, "baseline": {"value": "top"}, "align": {"value": "center"}, "fill": {"value": "#eee"} }, "update": {"text": {"signal": "'SOM 3D map: ' + current_step"}} } }, { "type": "symbol", "from": {"data": "iris_p"}, "encode": { "update": { "opacity": {"signal": "showmap || !showrealdata ? 0:0.6"}, "size": {"value": 30, "mult": {"signal": "neuronscale"}}, "fill": [{"field": "class", "scale": "color"}], "xc": [{"field": "px", "scale": "xscale"}], "yc": [{"field": "py", "scale": "yscale"}] } } }, { "type": "symbol", "from": {"data": "entries"}, "encode": { "enter": {"stroke": {"value": "#555"}}, "update": { "size": {"value": 30, "mult": {"signal": "neuronscale"}}, "opacity": {"signal": "showrealdata && !showmap ? 1 : 0"}, "fill": {"value": "white"}, "xc": {"field": "px", "scale": "xscale"}, "yc": {"field": "py", "scale": "yscale"} } } }, { "type": "rule", "from": {"data": "projection_ln"}, "encode": { "enter": {"stroke": {"value": "#bbb"}, "strokeWidth": {"value": 0.5}}, "update": { "opacity": {"signal": "showmap? 0 :1"}, "x": {"field": "psx", "scale": "xscale"}, "y": {"field": "psy", "scale": "yscale"}, "x2": {"field": "ptx", "scale": "xscale"}, "y2": {"field": "pty", "scale": "yscale"} } } }, { "type": "symbol", "name": "neuron", "from": {"data": "projection_n"}, "encode": { "update": { "stroke": {"field": "secondary", "scale": "color"}, "strokeWidth": {"signal": "datum.secondary >-1 ? 3:1"}, "opacity": { "signal": "showmap ? 0:((!isDefined(selectedNeuron.id) || selectedNeuron.id === datum.id || datum.class !== selectedNeuron.class) ? (datum.stabilized ? 0.5: 1): 0.3)" }, "size": { "field": "score", "scale": "score", "mult": {"signal": "2*scale"} }, "fill": [ {"test": "selectedNeuron.id == datum.id", "value": "white"}, {"field": "class", "scale": "color"} ], "xc": [{"field": "px", "scale": "xscale"}], "yc": [{"field": "py", "scale": "yscale"}] } } }, { "type": "text", "from": {"data": "neuron"}, "encode": { "enter": { "fill": {"value": "white"}, "text": {"field": "datum.score"}, "baseline": {"value": "bottom"}, "align": {"value": "right"} }, "update": { "xc": {"field": "bounds.x1", "offset": {"signal": "-min(4,3*scale)"}}, "yc": {"field": "yc"}, "opacity": { "signal": "!showmap && datum.datum.id === selectedNeuron.id ? 1 :0" } } } }, { "type": "rule", "from": {"data": "projection_l"}, "encode": { "enter": {"stroke": {"value": "#bbb"}, "strokeWidth": {"value": 0.5}}, "update": { "opacity": {"signal": "showmap? 1 :0"}, "x": {"field": "psx", "scale": "xscale"}, "y": {"field": "psy", "scale": "yscale"}, "x2": {"field": "ptx", "scale": "xscale"}, "y2": {"field": "pty", "scale": "yscale"} } } }, { "type": "symbol", "name": "neuron_m", "from": {"data": "projection"}, "encode": { "update": { "stroke": {"field": "secondary", "scale": "color"}, "opacity": {"signal": "showmap ? 1:0"}, "tooltip": [ { "test": "showmap", "signal": "{'score max':datum.score1, 'score 2': datum.score2,'coords':'['+datum.x+','+datum.y+','+datum.z+']'}" } ], "strokeWidth": {"signal": "datum.secondary >-1 ? 3:1"}, "size": [ { "field": "score", "scale": "score", "mult": {"signal": "4*scale*neuronscale"} } ], "fill": {"field": "class", "scale": "color"}, "xc": {"field": "px", "scale": "xscale"}, "yc": {"field": "py", "scale": "yscale"} } } }, { "type": "text", "from": {"data": "neuron_m"}, "encode": { "enter": { "fill": {"value": "white"}, "text": {"field": "datum.score"}, "baseline": {"value": "bottom"}, "align": {"value": "right"} }, "update": { "xc": {"field": "bounds.x1", "offset": {"signal": "-min(4,3*scale)"}}, "yc": {"field": "yc"}, "opacity": { "signal": "showmap && datum.datum.id === selectedNeuron_m.id ? 1 :0" } } } } ] });4c:T2902,embed( { "$schema": "https://vega.github.io/schema/vega/v5.json", "width": 700, "height": 525, "padding": 5, "background": "black", "signals": [ { "name": "current_step", "value": -1, "bind": {"input": "range", "min": 0, "max": 1500, "step": 1}, "on": [ { "events": "timer{100}", "update": "autoplay ? (current_step >= steps[1] ? -1 :current_step + 1 ): current_step" } ] }, {"name": "autoplay", "value": false, "bind": {"input": "checkbox"}}, {"name": "rows", "init": "y_extent[1]+1"}, {"name": "columns", "init": "x_extent[1]+1"}, { "name": "scale", "init": "round(100*max(1,width/height))/100", "bind": {"input": "range", "min": 0, "max": 2}, "on": [ { "events": "view:mousewheel", "update": "round(max(0, min(2, scale + (event.wheelDelta > 0 ? 0.1 : -0.1)))*100)/100" } ] }, {"name": "hexalength", "update": "sin(PI)"}, {"name": "sizeref", "init": "min(width,height)"}, {"name": "sizeSymbol", "update": "bandwidth('hscale')"}, {"name": "hcl_white", "init": "hcl('white')"}, { "name": "visualization", "value": "umatrix", "bind": {"input": "select", "options": ["iso", "umatrix", "classes"]} }, {"name": "showClasses", "update": "visualization === 'classes'"}, {"name": "showIso", "update": "visualization === 'iso'"}, {"name": "hivewidth", "update": "sizeSymbol*columns"}, { "name": "umatrixScheme", "value": "greys", "bind": {"input": "select", "options": ["greys", "viridis"]} }, {"name": "umatrixInverted", "value": false, "bind": {"input": "checkbox"}} ], "data": [ { "name": "neurons", "format": { "type": "dsv", "delimiter": ";", "parse": { "x": "number", "y": "number", "z": "number", "step": "number", "score": "number", "secondary": "number", "class": "number", "score1": "number", "score2": "number" }, "header": [ "vector", "x", "y", "z", "step", "score", "class", "secondary", "score1", "score2", "entries" ] }, "url": som_2D_data, "transform": [ {"type": "extent", "signal": "steps", "field": "step"}, {"type": "filter", "expr": "datum.step === current_step"}, {"type": "extent", "field": "y", "signal": "y_extent"}, {"type": "extent", "field": "x", "signal": "x_extent"}, {"type": "extent", "field": "score", "signal": "scores"}, { "type": "formula", "expr": "split(replace(replace(datum.vector, '[',''),']',''),',')", "as": "vector" }, {"type": "formula", "expr": "datum.x+'.'+datum.y", "as": "id"} ] }, { "name": "umatrix", "source": "neurons", "transform": [ {"type": "project", "fields": ["x", "y", "vector"]}, { "type": "formula", "expr": "sequence(datum.x-1,datum.x+2,1)", "as": "nx" }, { "type": "formula", "expr": "sequence(datum.y-1,datum.y+2,1)", "as": "ny" }, {"type": "flatten", "fields": ["ny"]}, {"type": "flatten", "fields": ["nx"]}, { "type": "filter", "expr": "datum.nx >= 0 && datum.ny >=0 && datum.nx < columns && datum.ny < rows && (((datum.y%2 === 1 && datum.nx < (datum.x+1)) || (datum.y%2 === 0 && datum.nx > (datum.x-1))) || datum.ny === datum.y) && (datum.nx !== datum.x || datum.ny !== datum.y)" }, {"type": "formula", "expr": "datum.nx+'.'+datum.ny", "as": "nid"}, { "type": "lookup", "key": "id", "from": "neurons", "fields": ["nid"], "values": ["vector"], "as": ["nvector"] }, {"type": "flatten", "fields": ["vector", "nvector"]}, { "type": "formula", "expr": "pow(datum.vector - datum.nvector, 2)", "as": "d" }, { "type": "aggregate", "fields": ["d"], "ops": ["sum"], "groupby": ["x", "y", "nx", "ny"], "as": ["d"] }, {"type": "formula", "expr": "sqrt(datum.d)", "as": "d"}, { "type": "aggregate", "fields": ["d"], "ops": ["mean"], "groupby": ["x", "y"], "as": ["d"] }, {"type": "formula", "expr": "datum.x+'.'+datum.y", "as": "id"}, { "type": "lookup", "from": "neurons", "key": "id", "fields": ["id"], "values": ["class", "secondary", "score", "score1", "score2"] } ] }, { "name": "contours", "values": [ { "width": 10, "height": 10, "values": [] } ], "transform": [ {"type": "formula", "expr": "columns", "as": "width"}, {"type": "formula", "expr": "rows", "as": "height"}, { "type": "formula", "expr": "pluck(data('umatrix'),'d')", "as": "values" }, { "type": "isocontour", "scale": {"expr": "hivewidth/datum.width"}, "translate": [ {"signal": "(width - hivewidth)/2"}, {"signal": "(height - (hivewidth*rows/columns))/2"} ] } ] } ], "legends": [ { "title": "Classes", "orient": "right", "fill": "color", "labelColor": "#eee", "titleColor": "#eee", "encode": { "labels": {"update": {"opacity": {"signal": "showClasses ? 1 :0"}}}, "symbols": {"update": {"opacity": {"signal": "showClasses ? 1 :0"}}}, "title": {"update": {"opacity": {"signal": "showClasses ? 1 :0"}}} } } ], "scales": [ { "name": "hscale", "type": "band", "domain": {"signal": "sequence(0,max(rows,columns)+1,1)"}, "range": [0, {"signal": "sizeref*scale"}] }, { "name": "g-color", "domain": [0,1], "range": {"scheme": {"signal": "umatrixScheme"}}, "reverse": {"signal": "umatrixScheme === 'viridis' ? !umatrixInverted : umatrixInverted"} }, { "name": "color", "type": "ordinal", "domainMin": 0, "domain": {"data": "umatrix", "field": "class", "sort": true}, "range": ["red","yellow","blue","green","magenta","cyan"] }, { "name": "iso-color", "type": "linear", "domain": {"data": "umatrix", "field": "d"}, "range": {"scheme": "blueorange"} } ], "marks": [ { "type": "text", "encode": { "enter": { "fontSize": {"value": 14}, "fontWeight": {"value": "bold"}, "xc": {"signal": "width/2"}, "align": {"value": "center"}, "fill": {"value": "#eee"} }, "update": {"text": {"signal": "'SOM Topology step: ' + current_step"}} } }, { "type": "path", "from": {"data": "contours"}, "encode": { "enter": { "stroke": {"value": "#ccc"}, "strokeWidth": {"value": 1}, "fill": {"scale": "iso-color", "field": "contour.value"} }, "update": {"opacity": {"signal": "showIso ? 1 :0"}} }, "transform": [{"type": "geopath", "field": "datum.contour"}] }, { "type": "symbol", "from": {"data": "umatrix"}, "encode": { "enter": { "shape": {"value": "m0,-1 l1,.5 v1 l-1,.5 l-1,-.5 v-1 l1,-.5"}, "stroke": {"value": "#777"} }, "update": { "size": {"signal": "pow(sizeSymbol,2)"}, "tooltip": [ { "test": "!showIso && !showClasses", "signal": "{'class':datum.class,'score':datum.score,'score max':datum.score1, 'score 2':datum.score2,'coords':[datum.x,datum.y]}" } ], "opacity": {"signal": "showIso ? 0 : 1"}, "xc": { "field": "x", "scale": "hscale", "offset": { "signal": "(datum.y%2==1 ? 0 : sizeSymbol/2) + (width - sizeSymbol*columns)/2 + sizeSymbol/4" } }, "fill": [ { "test": "showClasses && datum.class >-1", "signal": "datum.secondary > -1 ? datum.secondary : datum.class", "scale": "color" }, {"test": "showClasses && datum.class == -1", "value": "#555"}, {"field": "d", "scale": "g-color"} ], "yc": { "field": "y", "scale": "hscale", "offset": { "signal": "(datum.y > 0 ? -datum.y*sizeSymbol/4 : 0) +(height - (sizeSymbol*rows - (rows-1)*sizeSymbol/4))/2 + sizeSymbol/2" } } } } }, { "type": "symbol", "from": {"data": "umatrix"}, "encode": { "enter": { "shape": {"value": "m0,-1 l1,.5 v1 l-1,.5 l-1,-.5 v-1 l1,-.5"} }, "update": { "opacity": {"signal": "showIso || !showClasses ? 0 :1"}, "tooltip": [ { "test": "showClasses", "signal": "{'class':datum.class,'score':datum.score,'score max':datum.score1, 'score 2':datum.score2,'coords':[datum.x,datum.y]}" } ], "size": { "signal": "pow(0.95*sizeSymbol * (datum.score1/(datum.score || 1)||1),2)" }, "xc": { "field": "x", "scale": "hscale", "offset": { "signal": "(datum.y%2==1 ? 0 : sizeSymbol/2) + (width - sizeSymbol*columns)/2 + sizeSymbol/4" } }, "fill": [ { "test": "showClasses && datum.class > -1", "field": "class", "scale": "color" }, {"test": "showClasses && datum.class == -1", "value": "#555"}, {"value": null} ], "yc": { "field": "y", "scale": "hscale", "offset": { "signal": "(datum.y > 0 ? -datum.y*sizeSymbol/4 : 0) +(height - (sizeSymbol*rows - (rows-1)*sizeSymbol/4))/2 + sizeSymbol/2" } } } } } ] } )4d:T80c,md`The U-Matrix is a common and useful way to represent SOM 2D maps. Using the means of distance to each neighbours (using hexagons so a neuron has at maximum 6 neighbours), we can display a grey scale of density. Darker neurons are isolated and brighter are densily grouped. The U-Matrix represents unlabelled neurons, showing borders between areas. It's not always easy to interpret the results of such a map but some clusters are emerging. As [Vega](https://vega.github.io/vega/docs/transforms/) allows a lot of transformation on data, I choose to implement the umatrix calculation directly in the specification. The visualisation takes a list of neurons as an input containing the x and y coodinates of the neuron and its vector (as an array). The specification will normalize the data and calculates the mean of distance for each hexagonal neighbour. Additionaly to the current_step, autoplay and scale, that have been used in other visualizations, are now the following inputs: - visualization allows to select between **iso**, **umatrix** and **classes** visualizations: - **iso** shows the distances using isocontours - **usmatrix** is the U-Matrix - **classes** displays the labelled neuron map - umatrixScheme allows to select between a grey scale and a blue-green scale - umatrixInverted allows to invert the scale (dark neurons are close to each other and bright are isolated) The current visualization is displaying the same data that the [SOM 2](#som_2) visualization. We can see that: - **iso** representation and **umatrix** are displaying the same information in different styles - The Iris-setosa class is clearly separated from the others - The Iris-versicolor and Iris-virginica are not clearly emerging from the U-Matrix - In **classes** representation, when multiples classes are activating the node, the size of second class border is proportional to the number of entries of the dominant class. We can then directly watch the most 'confusing' nodes `4e:T156e,embed({ "$schema": "https://vega.github.io/schema/vega/v5.json", "width": 700, "height": 800, "background": "black", "signals": [ {"name": "rows", "init": "y_extent[1]+1"}, {"name": "columns", "init": "x_extent[1]+1"}, {"name": "scale", "init": "round(100*max(1,width/height))/100"}, {"name": "sizeref", "init": "min(width,height)"}, {"name": "sizeSymbol", "update": "bandwidth('hscale')"}, { "name": "selected", "init": "{}", "on": [ {"events": "symbol:mouseover", "update": "datum"}, {"events": "symbol:mouseout", "update": "{}"} ] }, { "name": "sizeneuron", "update": "height -(sizeSymbol*rows - (rows-1)*sizeSymbol/4)" } ], "data": [ { "name": "mnist", "format": { "type": "dsv", "delimiter": ";", "parse": { "x": "number", "y": "number", "z": "number", "step": "number", "score": "number", "secondary": "number", "class": "number", "score1": "number", "score2": "number" }, "header": [ "vector", "x", "y", "z", "step", "score", "class", "secondary", "score1", "score2", "entries" ] }, "url": await FileAttachment("som_mnist.data").url(), "transform": [ {"type": "filter", "expr": "datum.step == 0"}, { "type": "project", "fields": ["vector", "x", "y", "class", "secondary"] }, {"type": "extent", "field": "y", "signal": "y_extent"}, {"type": "extent", "field": "x", "signal": "x_extent"} ] }, { "name": "neuron", "source": "mnist", "transform": [ { "type": "filter", "expr": "datum.x == selected.x && datum.y == selected.y" }, { "type": "formula", "expr": "split(replace(replace(datum.vector, '[',''),']',''),',')", "as": "vector" }, {"type": "flatten", "fields": ["vector"], "index": "id"}, {"type": "formula", "expr": "toNumber(datum.vector)", "as": "vector"}, {"type": "formula", "expr": "floor(datum.id/28)", "as": "row"}, {"type": "formula", "expr": "floor(datum.id)%28", "as": "column"} ] } ], "scales": [ { "name": "hscale", "type": "band", "domain": {"signal": "sequence(0,max(rows,columns)+1,1)"}, "range": [0, {"signal": "sizeref*scale"}] }, { "name": "nscalex", "type": "band", "domain": {"data": "neuron", "field": "column"}, "range": [ {"signal": "(width - sizeneuron)/2"}, {"signal": "(width + sizeneuron)/2"} ] }, { "name": "nscaley", "type": "band", "domain": {"data": "neuron", "field": "row"}, "range": [{"signal": "(height - sizeneuron)"}, {"signal": "height"}] }, { "name": "color", "type": "ordinal", "domainMin": 0, "domain": {"data": "mnist", "field": "class", "sort": true}, "range": {"scheme": "category20"} }, { "name": "ncolor", "domainMin": 0, "domain": {"data": "neuron", "field": "vector", "sort": true}, "range": {"scheme": "viridis"} } ], "legends": [ { "title": "Classes", "orient": "right", "fill": "color", "labelColor": "#eee", "titleColor": "#eee" } ], "marks": [ { "type": "symbol", "from": {"data": "mnist"}, "encode": { "enter": { "shape": {"value": "m0,-1 l1,.5 v1 l-1,.5 l-1,-.5 v-1 l1,-.5"}, "stroke": {"value": "#777"} }, "update": { "size": {"signal": "pow(sizeSymbol,2)"}, "tooltip": [ { "test": "datum.secondary === -1", "signal": "{'class':datum.class,'coords':[datum.x,datum.y]}" }, { "test": "datum.secondary > -1", "signal": "{'class':datum.class, 'secondary':datum.secondary, 'coords':[datum.x,datum.y]}" } ], "fill": [ {"test": "datum.class >-1", "field": "class", "scale": "color"}, {"value": "#555"} ], "stroke": [ { "test": "datum.secondary >=0", "field": "secondary", "scale": "color" } ], "strokeWidth": [{"test": "datum.secondary >=0", "value": 3}], "xc": { "field": "x", "scale": "hscale", "offset": { "signal": "(datum.y%2==1 ? 0 : sizeSymbol/2) + sizeSymbol/4" } }, "yc": { "field": "y", "scale": "hscale", "offset": { "signal": "(datum.y > 0 ? -datum.y*sizeSymbol/4 : 0) + sizeSymbol/2" } } } } }, { "type": "rect", "from": {"data": "neuron"}, "encode": { "enter": {"strokeWidth": {"value": 0}}, "update": { "xc": {"field": "column", "scale": "nscalex"}, "yc": {"field": "row", "scale": "nscaley"}, "width": {"band": true, "scale": "nscalex"}, "height": {"band": true, "scale": "nscaley"}, "fill": {"field": "vector", "scale": "ncolor"} } } } ] });4f:T409,md`The view is a representation of a 2D SOM network of 40x40 neurons trained with a sample of 5000 data from MNIST data file. The MNIST vectors are scanned handwritten numbers stored as a bitmap of 784 pixels (28x28). Each element of the vector is a pixel intensity from 0 to 255. In the representation, the neurons are labelled with the number that they represents (from 0 to 9). When hovering the mouse over the neuron, it displays its vector using a 28x28 bitmap and a blue-green color scale. We can then observe: - When hovering on a cluster of a specific color we can see the different variations of representation of the number supported by the network - We can see that when they are multiple matches on a number that the representation also leads to confusion (3 close to 5, 3 to 8, ...) - When you get close to the borders of a cluster you can watch the transformations of images from one number to another - Clusters 4 and 9 are merged: looking at the images we can understand why. 9 and 4 are indeed often very similar `50:[{"id":"3b3d2c1292b6fbc1714004d8564ac5ccd550347b26b87a495a261760ad7c00f31b8bf455236d8948c1d5536229529accc0d3098736d48fa85c380cb01b1fa217","href":"https://static.observableusercontent.com/files/3b3d2c1292b6fbc1714004d8564ac5ccd550347b26b87a495a261760ad7c00f31b8bf455236d8948c1d5536229529accc0d3098736d48fa85c380cb01b1fa217","name":"som_mnist.data","type":"application/octet-stream","lastModified":1616063164956.775,"size":11354251},{"id":"70d78fcf9a1705c2154e6669a56cdfc6db27e17f115b7384c751b086f991cf2c76febcf6fa8d0053397649e16e39c40fe94502dabb178f195c7850d27bd9835d","href":"https://static.observableusercontent.com/files/70d78fcf9a1705c2154e6669a56cdfc6db27e17f115b7384c751b086f991cf2c76febcf6fa8d0053397649e16e39c40fe94502dabb178f195c7850d27bd9835d","name":"som3D.data","type":"application/octet-stream","lastModified":1616054625062.175,"size":6692565},{"id":"6c07ccc6b572b5fa81f9d0851e7a0e66e86c6b0c833d8df9c999f7126f5c3bcd1a2821639914aecaac005dd4378a83daa402608f2185561d96d960ef4b5be56b","href":"https://static.observableusercontent.com/files/6c07ccc6b572b5fa81f9d0851e7a0e66e86c6b0c833d8df9c999f7126f5c3bcd1a2821639914aecaac005dd4378a83daa402608f2185561d96d960ef4b5be56b","name":"som1D.data","type":"application/octet-stream","lastModified":1616054624712.127,"size":6544181},{"id":"518c26efa1fe0b0fb33f6ec6155ab65bbfac889d241c511e3d46e4e6f65fd67d85aaf933e8e65e38ba22de72d8e008823b4357b5c354bcdfd6c3452c2aefc831","href":"https://static.observableusercontent.com/files/518c26efa1fe0b0fb33f6ec6155ab65bbfac889d241c511e3d46e4e6f65fd67d85aaf933e8e65e38ba22de72d8e008823b4357b5c354bcdfd6c3452c2aefc831","name":"som2D.data","type":"application/octet-stream","lastModified":1616054624521.593,"size":6384902},{"id":"541083fc93eee5201e7509f1cd2eeb35241391c63afbea6b2ab08e1f2ffabab10ad55aa8acb0f42678e032d36b34809c989055243b9bde06c5c5af4cc5a247d3","href":"https://static.observableusercontent.com/files/541083fc93eee5201e7509f1cd2eeb35241391c63afbea6b2ab08e1f2ffabab10ad55aa8acb0f42678e032d36b34809c989055243b9bde06c5c5af4cc5a247d3","name":"iris.data","type":"application/octet-stream","lastModified":1616054925755.775,"size":4549}] 45:{"id":"40aaef9b20049ba7","slug":"som-self-organizing-maps-opening-the-black-box","title":"SOM (Self Organizing Maps): Opening the black box","thumbnail":"67c57108474e56b5343b788de9da0fe64bd3c3be0302a21ae1be7bd5bc0992a5","access_level":"public","create_time":"$D2021-03-18T07:29:19.407Z","update_time":"$D2021-03-18T12:10:11.022Z","view_time":null,"first_public_time":"$D2021-03-18T12:11:15.237Z","has_unpublished_edits":null,"fork":false,"stars":4,"starred":false,"owner":{"type":"team","id":"63c82b4833acbe6a","login":"matiber","name":"Mathias Tiberghien","avatar_url":"https://avatars-next.observableusercontent.com/aac980a83c670989012474c9d600c8c7394c51a545f82f1a007336351fba6153","tier":"starter_2024","bio":"","following":false},"version":205,"publish_version":205,"role":null,"authored":false,"authors":[{"type":"individual","id":"bed77b1e09ef1d5b","login":"matiber","name":"Mathias Tiberghien","avatar_url":"https://avatars-next.observableusercontent.com/aac980a83c670989012474c9d600c8c7394c51a545f82f1a007336351fba6153","tier":null,"bio":"","following":false}],"members":[{"type":"individual","id":"bed77b1e09ef1d5b","login":"matiber","name":"Mathias Tiberghien","avatar_url":"https://avatars-next.observableusercontent.com/aac980a83c670989012474c9d600c8c7394c51a545f82f1a007336351fba6153","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"SOM (Self Organizing Maps): Opening the black box","cells":[{"id":0,"value":"$47","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":24,"value":"navigation = md`## Navigation\n[SOM 1D](#som_id)|[SOM 2D](#som_2D)|[SOM 3D](#som_3D)|[U-Matrix](#umatrix)|[MNIST Viewer](#mnist_viewer)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"som_1D = md`## SOM 1D`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":142,"value":"md`*Watch 1D representation of SOM trained with iris.data*`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":30,"value":"$48","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":58,"value":"$49","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":68,"value":"md`So what do we have here?\n- The iris.data entries (smaller symbols) and the neurons (larger symbols) are projected using sum of petal length and width as x and sum of sepal length and weight as y\n- Each iris specie has its color:\n - red: Iris-setosa\n - yellow: Iris-versicolor\n - blue: Iris-virginica\n- The neurons are colored using the max entries of the same class that activated the neuron\n- If entries of different classes have activated the same neuron the neuron border will have the color of the second best matching class\n- The size of the neuron is related to the number of entries that have activated the neuron\n- Dark neurons have not been activated by any entry\n\nWe can see starting from initializations of the neurons to the means to the end of the training how each neurons are moving to represent the mean of the entries that activated them. We can also see that the topology is preserved.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":145,"value":"md`[Back to navigation](#navigation)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"som_2D = md`## SOM 2D`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":132,"value":"md`*Watch 2D representation of SOM trained with iris.data*`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":77,"value":"$4a","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":80,"value":"md`The [SOM 2D](#som_2D) visualization has the same [interactions](#interactions) that the [SOM 1D](#som_1D) with a new checkbox:\n- showmap allows to display the neurons 2D grid as a map\n\nIterating trough the steps shows how the 2D map is deployed as a net over the entries.\nSwithching between the views you can see how the toplogy is preserved (the projected neurons have the same shape than the neurons in the logical grid)\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":148,"value":"md`[Back to navigation](#navigation)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"som_3D = md`## SOM 3D`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":128,"value":"md`*Watch 3D representation of SOM trained with iris.data*`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":85,"value":"$4b","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":89,"value":"md`The [SOM 3D](#som_3D) visualization has the same [interactions](#interactions) than [SOM 1D](#som_1D) and [SOM 2D](#som_2D) with 2 additional interactions:\n- rotation_HOR allows to rotate the visualization horizontally (also working dragging the mouse)\n- rotation_VER allows to rotate the visualization verticallay (also working dragging the mouse)\n\nBecause the 3D topology is projected on the screen, this representation doesn't offer much information than the 2D topology and tends to be more confusing. This was created as an exercise but, in my opinion 2D SOM should be the preferred representation.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":149,"value":"md`[Back to navigation](#navigation)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"umatrix = md`## U-Matrix`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":122,"value":"md`*Watch different representation of iris.data SOM 2D map*`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":99,"value":"$4c","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":102,"value":"$4d","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":151,"value":"md`[Back to navigation](#navigation)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"mnist_viewer = md`## MNIST Viewer`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":116,"value":"md`*Hover the mouse pointer over the differents neurons and watch the vectors represented as bitmap*`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":113,"value":"$4e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":158,"value":"$4f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":153,"value":"md`[Back to navigation](#navigation)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":163,"value":"md`## Conclusion\nThe different visualizations helped me to understand what is happening during a neuron network training. We can watch the neurons gathering around values giving a good representation of the diversity of the values. The emerging clusters when labelled are representing the classes distribution in data file. The MNIST viewer was a revelation: viewing the content of the vectors shows how organic these mathematics regressions are. I hope you enjoyed it too.\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":183,"value":"md`### Objects references`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"embed = require(\"vega-embed@6\");","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":35,"value":"iris_data = await FileAttachment(\"iris.data\").url()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":94,"value":"som_2D_data = await FileAttachment(\"som2D.data\").url()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W50","stdlib":"1"}} 46:"$45:body"