31:T51f,illustrateMatMult = function ({A, B, C}) { const color = d3.scaleSequential(d3.interpolateWarm).domain([0, A.ncol]) const gradient = function (c) { const c0 = d3.lab(c).brighter(2).toString() const c1 = d3.lab(c).darker(.5).toString() return `radial-gradient(closest-side circle at center, ${c0} 20%, ${c1} 200%)` } return html` ${renderMatrix(A.ncol, A.vals, { title: tex`\bm{A}_{${A.nrow}×${A.ncol}}`, background: (d, i, j) => i === inspect[0] ? gradient(color(j)) : '', })} ${tex`×`} ${renderMatrix(B.ncol, B.vals, { title: tex`\bm{B}_{${B.nrow}×${B.ncol}}`, background: (d, i, j) => j === inspect[1] ? gradient(color(i)) : '', })} ${tex`=`} ${renderMatrix(C.ncol, C.vals, { title: tex`\bm{C}_{${C.nrow}×${C.ncol}}`, background: (d, i, j) => i === inspect[0] && j === inspect[1] ? gradient('#ccc') : '', hover: (d, i, j) => i !== inspect[0] || j !== inspect[1] ? mutable inspect = [i, j] : null, })}

${ kSumEq(A.ncol, inspect[0], inspect[1])}

${ abSumEq(A.ncol, inspect[0], inspect[1])}

${valSumEq(A.ncol, inspect[0], inspect[1], A, B, C)}

` }32:[] 2f:{"title":"Matrix Multiplication","cells":[{"id":454,"value":"md`\n# Matrix Multiplication\n\nThis is an interactive illustration of matrix multiplication. The aim is to demonstrate — and strengthen intuition about — the relationship between the mutiplied and resulting matrices.\n\nIf ${tex`\\bm{A}`} is an ${tex`n × m`} matrix and ${tex`\\bm{B}`} is an ${tex`m × p`} matrix, the *matrix product* ${tex`\\bm{AB}`} is defined to be the ${tex`n × p`} matrix ${tex`\\bm{C}`} such that \n\n> ${tex`c_{ij} = a_{i1}b_{1j} +\\cdots + a_{im}b_{mj}= \\displaystyle\\sum_{k=1}^m a_{ik}b_{kj},`}\n\nfor ${tex`i = 1, ..., n`} and ${tex`j = 1, ..., p`}.\n\nThat is, the entry ${tex`c_{ij}`} of the product is obtained by multiplying term-by-term the entries of the ${tex`i`}th row of ${tex`\\bm{A}`} and the ${tex`j`}th column of ${tex`\\bm{B}`}, and summing these ${tex`m`} products. In other words, ${tex`c_{ij}`} is the [dot product](https://en.wikipedia.org/wiki/Dot_product) of the ${tex`i`}th row of ${tex`\\bm{A}`} and the ${tex`j`}th column of ${tex`\\bm{B}`}.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":557,"value":"result = md`## Illustration\n\n*Hint: rollover the entries of matrix ${tex`\\bm{C}`}.*\n\n${illustrateMatMult(mat)}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":551,"value":"mat = {\n const A = new Matrix([5, 4], [\n 1, 2, 3, 0,\n 4, 5, 6, 1,\n 1, 0, 1, 1,\n 1, 1, 1, 1,\n 7, 8, 9, 2\n ])\n const B = new Matrix([4, 3], [\n .1, .2, 1,\n .4, .5, 1,\n .7, .8, 1,\n 1, 1, 1\n ])\n return { A, B, C: mat_mult(A, B) }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":12,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"function renderMatrix(width, values, {title, format, each, background, hover}={}) {\n values = Array.from(values)\n const color = d3.scaleSequential(d3.interpolateGreens).domain([-.3, 1]||[0,1.3])\n format = format || d3.format('.1f')\n const div = html`

${title}

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

`\n \n const noOp = () => {} \n const apply_dijw = (fn=noOp) => function (d,i) {\n return fn.call(this, d, Math.floor(i/width), i % width, width)\n }\n\n d3.select(div).selectAll('.matrix-cell')\n \t.data(values)\n .style('background', apply_dijw(background))\n .on('mouseover', apply_dijw(hover))\n .each(apply_dijw(each))\n return div\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":542,"value":"kSumEq = (m, i, j) => tex`c_{${i+1}${j+1}} = \\displaystyle\\sum_{k=1}^${m+1} a_{${i+1}k} \\cdot b_{k${j+1}}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":545,"value":"abSumEq = (m, i, j) => {\n const color = d3.scaleSequential(d3.interpolateWarm).domain([0, m])\n return d3.range(0, m).map(k => \n componentEq(\n m, k, color(k), \n `c_{${i+1}${j+1}}`, \n `a_{${i+1}${k+1}}`, \n `b_{${k+1}${j+1}}`\n )\n )\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":538,"value":"valSumEq = (m, i, j, A, B, C) => {\n const color = d3.scaleSequential(d3.interpolateWarm).domain([0, m])\n const format = d3.format('.1f')\n return d3.range(0, m).map(k => \n componentEq(\n m, k, color(k), \n `c_{${i+1}${j+1}}`,\n format(A.get(i,k)), \n format(B.get(k,j)), \n format(C.get(i,j))\n )\n )\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":517,"value":"componentEq = (m, k, color, c, a, b, d) => html`\n ${k === 0 ? html`${tex`${c}`} ${tex` = `} ` : ``}\n ${tex`${a} \\cdot ${b}`}\n ${k < m-1 ? html`${tex`+`}` : d ? html`${tex`=${d}`}` : ``}\n `","pinned":false,"hidden":false,"mode":"ojs"},{"id":135,"value":"mutable inspect = [1, 2]","pinned":false,"hidden":false,"mode":"ojs"},{"id":20,"value":"style = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":614,"value":"md`\n# Dependencies\n\nAside from d3, this illustration uses [@nstrayer's](//@nstrayer) implementation of a \\`Matrix\\` class and \\`mat_mult()\\`, a method for matrix multiplication.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"import { Matrix, mat_mult } from '@nstrayer/simple-matrices'","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"d3 = require(\"https://d3js.org/d3.v5.min.js\")","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}