31:T42f,md`Note that in the graphic above, matrices **A** and **B** are identical. It is a demonstration of multiplying \`mat1\` by itself. Matrix multiplication can be thought of as taking the [dot product](https://en.wikipedia.org/wiki/Dot_product) of the rows and columns of two matrices. Given the form of \`mat1\`, the operation of squaring it is the same as taking the dot product of each and every other entity, i.e: ${tex`\bm{A} \cdot \bm{B}`} and ${tex`\bm{A} \cdot \bm{C}`} and ${tex`\bm{A} \cdot \bm{D}`} etc... Dot product is a measure of similarity between vectors. Perpendicular vectors have a dot product of 0. It increases as the vectors become more co-directional. That's *how* the squaring of this particular matrix produces a similarity measurement. Now, dot product can also be expressed in terms of the cosine between the two vectors: ${tex`\mathbf{a}\cdot\mathbf{b}=\|\mathbf{a}\|\ \|\mathbf{b}\|\cos(\theta)`} **For this reason, squaring the matrix expectedly produces results that are proportional if not identical to cosine similarity analysis.**`32:T685,renderGraph = function (graph, {size}={}) { const w = size && size[0] ? size[0] : width const h = size && size[1] ? size[1] : 600 const links = graph.links.map(d => Object.create(d)); const nodes = graph.nodes.map(d => Object.create(d)); const simulation = d3.forceSimulation(nodes) .force("link", d3.forceLink(links).distance(graph.distance || 90)/*.strength(d => d.value/50)*/) .force("charge", d3.forceManyBody()) .force("center", d3.forceCenter(w / 2, h / 2)) .on("tick", ticked); const svg = d3.select(DOM.svg(w, h)); const link = svg.append("g") .attr("stroke", "#999") .attr("stroke-opacity", 0.6) .selectAll("line") .data(links) .enter().append("line") .attr("stroke-width", d => 10 * d.value) const node = svg.append("g") .selectAll("g") .data(nodes) .enter().append("g") .call(drag(simulation)) .call(node => { node.append('circle') .attr("stroke", "#fff") .attr("stroke-width", 1.5) .attr("r", d => d.type === 'entity' ? 16 : 14) .attr("fill", d => d.type === 'entity' ? '#333' : '#ccc') node.append('text') .text(d => d.id) .attr('dy', '.35em') .attr('text-anchor', 'middle') .style('font-weight', 'bold') .attr('fill', d => d.type === 'entity' ? '#ccc' : '#444') }) function ticked() { link .attr("x1", d => d.source.x) .attr("y1", d => d.source.y) .attr("x2", d => d.target.x) .attr("y2", d => d.target.y); node .attr("transform", d => `translate(${d.x},${d.y})`) } return svg.node(); }33:T653,function renderMatrix(width, values, {title, format, each, isHighlighted, background, hover, cols, rows}={}) { values = Array.from(values) const color = d3.scaleSequential(d3.interpolateGreens).domain([-.3, 1]||[0,1.3]) format = format || d3.format('.1f') const div = html`

${title ? `

${title}

` : ''} ${cols ? `

${rows ? ' ' : ''} ${cols.map(c => `${c}`).join('')}

` : ''} ${rows ? `

${rows.map(r => `${r}
`).join('')}

` : ''}

${values.map( (v, i) => `${format(v)}${i % width === width - 1 ? '
' : ''}` )}

` const noOp = () => {} const apply_dijw = (fn=noOp) => function (d,i) { return fn.call(this, d, Math.floor(i/width), i % width, width) } d3.select(div).select('.matrix').selectAll('.matrix-cell') .data(values) .style('background', apply_dijw(background)) .on('mouseover', apply_dijw(hover)) .each(apply_dijw(each)) return div }34:[] 2f:{"title":"Similarity Matrix","cells":[{"id":5,"value":"md`\n# Similarity Matrix\n\nThis is an interactive, in-browser JavaScript notebook. The code is viewable and editable. For example, the next cell creates \\`entities\\` — the data used in this notebook — consisting of entities **A**, **B**, **C**, **D** **E**, each of which has features *x*, *y*, ahd *z*. You can edit this (TSV) data and everything else in this notebook should update immediately in response.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":161,"value":"entities = d3.tsvParse(`\nid\tx\ty\tz\nA\t0.4\t0.0\t0.6\nB\t0.0\t0.5\t0.5\nC\t0.0\t1.0\t0.0\nD\t0.5\t0.5\t0.0\nE\t0.3\t0.4\t0.3\n`.trim(),\n function (entity, i, columns) {\n \t// coerce each column's value (except `id`) into Number\n \treturn columns\n \t .slice(1) // don't coerce `id` column\n .reduce(\n \t(s, c) => { s[c] = parseFloat(entity[c]); return s },\n \t{ id: entity.id, type: 'entity' }\n )\n }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":597,"value":"md`Next, we extract the names of the properties of \\`entities\\` into \\`features\\` array`","pinned":false,"hidden":false,"mode":"ojs"},{"id":154,"value":"features = entities.columns.slice(1).map((id) => ({ type: 'feature', id }))","pinned":false,"hidden":false,"mode":"ojs"},{"id":615,"value":"md`It's useful to represent \\`entities\\` as a matrix, in order to perform matrix operations on it. Here we create \\`mat0\\`, an instance of a simple \\`Matrix\\` class:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":11,"value":"mat0 = new Matrix(\n [entities.length, features.length], \n d3.merge(entities.map(s => features.map(f => s[f.id])))\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":621,"value":"md`Next comes a visual representation of that matrix, along with a simple network graph using d3's force simulation. Both the entities and the features are represented as nodes, and the links between them are based on cell values. The links' line thickness is proportional to the value of the cell. Observe how node **C** is connected only to node *y*.\n\nThe JavaScript code that renders the next cell generates \\`links\\` and \\`nodes\\` from the matrix and passes them into \\`renderGraph()\\` which is responsible for the visual representation. It also calls \\`renderMatrix()\\` for the matrix representation. Both of those rendering functions are defined in this notebook, near the bottom.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":224,"value":"result = html`\n

${\n renderMatrix(mat0.ncol, mat0.vals, {\n cols: features.map(({id}) => id),\n rows: entities.map(({id}) => id),\n background: (val) => val === 0 ? 'transparent' : d3.interpolateGreens(val * .66),\n })\n }

${\n renderGraph({\n nodes: [].concat(entities, features),\n links: d3.merge(entities.map((entity,i) => \n features.map((feature,j) => ({\n source: i, // entity's index within nodes\n target: entities.length + j,\n value: mat0.get(i, j),\n })).filter(d => d.value > 0.)\n ))\n },\n {\n size: [width/2, 400]\n })\n }

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":639,"value":"md`Next, we transform the matrix \\`mat0\\` into \\`mat1\\` by reflecting it along a diagonal axis:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":24,"value":"viewof mat1 = {\n const sz = mat0.nrow + mat0.ncol\n const cells = new Array(sz*sz)\n for(let i = 0; i < sz; i++) {\n for(let j = 0; j < sz; j++) {\n cells[i*sz + j] = i < mat0.nrow\n ? j < mat0.nrow ? 0 : mat0.get(i, j - mat0.nrow)\n : j < mat0.nrow ? mat0.get(j, i - mat0.nrow) : 0\n }\n }\n const matrix = new Matrix([sz, sz], cells)\n return Object.assign(renderMatrix(matrix.ncol, matrix.vals, {\n cols: entities.concat(features).map(({id}) => id),\n rows: entities.concat(features).map(({id}) => id),\n background: (val) => val === 0 ? 'transparent' : d3.interpolateGreens(val * .66),\n each: function(d,i,j) {\n d3.select(this)\n .classed('border-bottom-cell', i === entities.length - 1)\n .classed('border-right-cell', j === entities.length - 1)\n }\n }), { value: matrix })\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":647,"value":"md`Now, by squaring \\`mat1\\`, we get a matrix of the similarities between entities (and features).`","pinned":false,"hidden":false,"mode":"ojs"},{"id":135,"value":"viewof mat2 = {\n const matrix = mat_mult(mat1, mat1)\n return Object.assign(renderMatrix(matrix.ncol, matrix.vals, {\n cols: entities.concat(features).map(({id}) => id),\n rows: entities.concat(features).map(({id}) => id),\n background: (val) => val === 0 ? 'transparent' : d3.interpolateGreens(val * .66),\n each: function(d,i,j) {\n d3.select(this)\n .classed('border-bottom-cell', i === entities.length - 1)\n .classed('border-right-cell', j === entities.length - 1)\n }\n }), { value: matrix })\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":650,"value":"md`We can represent these similarities as a network graph. But first, let's take a short detour and break down the operation of squaring \\`mat1\\` to get \\`mat2\\`. The following graphic is interactive. You can hover over the values of **C** to see how they're related to the rows and cols of **A** and **B**.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":418,"value":"illustrateMatMult({ A: mat1, B: mat1, C: mat2 })","pinned":false,"hidden":false,"mode":"ojs"},{"id":660,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":699,"value":"md`Finally, we prepare \\`mat3\\` by retaining the relevant cells of \\`mat2\\` and visualize it as another network graph:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":704,"value":"mat3 = new Matrix(\n [entities.length, entities.length],\n d3.merge(\n mat2.pprint()\n .slice(0, entities.length)\n .map((row, i) => {\n return row\n .slice(0, entities.length)\n .map((value, j) => j >= i ? 0 : value)\n })\n )\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":333,"value":"html`\n

${\n renderMatrix(mat3.ncol, mat3.vals, {\n cols: entities.map(({id}) => id),\n rows: entities.map(({id}) => id),\n background: (val) => val === 0 ? 'transparent' : d3.interpolateGreens(val * .66),\n })\n }

${\n renderGraph({\n nodes: [].concat(entities),\n links: d3.merge(entities.map((entity1, i) => \n entities.map((entity2, j) => ({\n source: i, // entity's indexes within nodes\n target: j,\n value: mat3.get(i, j),\n })).filter(d => d.value > 0)\n )),\n distance: d => 300 * (1-d.value)\n }, { size: [width/2, 400] })\n }

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":717,"value":"md`## Functions and Dependencies\n\nBelow we define functions (\\`renderGraph()\\` and \\`renderMatrix()\\`) and import dependencies (d3, etc) used in the cells above.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":213,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":63,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":219,"value":"drag = simulation => {\n \n function dragstarted(d) {\n if (!d3.event.active) simulation.alphaTarget(0.3).restart();\n d.fx = d.x;\n d.fy = d.y;\n }\n \n function dragged(d) {\n d.fx = d3.event.x;\n d.fy = d3.event.y;\n }\n \n function dragended(d) {\n if (!d3.event.active) simulation.alphaTarget(0);\n d.fx = null;\n d.fy = null;\n }\n \n return d3.drag()\n .on(\"start\", dragstarted)\n .on(\"drag\", dragged)\n .on(\"end\", dragended);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":19,"value":"d3 = require(\"https://d3js.org/d3.v5.min.js\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"import { Matrix, mat_mult } from '@nstrayer/simple-matrices'","pinned":false,"hidden":false,"mode":"ojs"},{"id":416,"value":"import { illustrateMatMult, style } from '@meetamit/matrix-multiplication'","pinned":false,"hidden":false,"mode":"ojs"},{"id":422,"value":"style // inject the styles imported from @meetamit/matrix-multiplication into the document","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W34","stdlib":"1","titling":"auto"}