2f:Tafc,function make_one_step_transition_pic(M) { let [x0, y0] = [M[0][0], M[1][0]]; let [x1, y1] = [M[0][1], M[1][1]]; let [xmin, xmax] = d3.extent([0, x0, x1, x0 + x1]); let [ymin, ymax] = d3.extent([0, y0, y1, y0 + y1]); let xrange = xmax - xmin; let s = 0.4; xmin = xmin - s * xrange; xmax = xmax + s * xrange; let yrange = ymax - ymin; ymin = ymin - s * yrange; ymax = ymax + s * yrange; const w = 500; const h = (w * (ymax - ymin)) / (xmax - xmin); const svg = d3 .create("svg") .attr("viewBox", [0, 0, w, h]) .attr("width", "100%") .style("max-width", `${w}px`) .style("border", "solid black 2px"); const pad = 10; // let [xmin, xmax, ymin, ymax] = [-3, 3, -1, 3]; const x_scale = d3 .scaleLinear() .domain([xmin, xmax]) .range([pad, w - pad]); const y_scale = d3 .scaleLinear() .domain([ymin, ymax]) .range([h - pad, pad]); const pointToPoint = ([x, y]) => [x_scale(x), y_scale(y)]; const configuration = svg.append("g"); const polygon = configuration .append("polygon") .attr( "points", [ [0, 0], [1, 0], [1, 1], [0, 1], [0, 0] ].map(pointToPoint) ) .attr("fill", "lightgray") .attr("stroke", "black") .attr("stroke-width", 0.5); const leg0 = configuration .append("polyline") .call(arrow, x_scale(0), y_scale(0), x_scale(1), y_scale(0)) .attr("stroke", "red") .attr("stroke-width", 2); const leg1 = configuration .append("polyline") .call(arrow, x_scale(0), y_scale(0), x_scale(0), y_scale(1)) .attr("stroke", "blue") .attr("stroke-width", 2); svg .append("g") .style("font-size", "14px") .attr("transform", `translate(0, ${y_scale(0)})`) .call(d3.axisBottom(x_scale).ticks(4)); svg .append("g") .style("font-size", "14px") .attr("transform", `translate(${x_scale(0)}, 0)`) .call(d3.axisLeft(y_scale).ticks(4)); svg.node().update = update; return svg.node(); function update(state) { let x00, y00, x11, y11; if (state % 2 == 0) { x00 = 1; y00 = 0; x11 = 0; y11 = 1; } else { x00 = x0; y00 = y0; x11 = x1; y11 = y1; } leg0 .transition() .duration(850) .attr( "points", arrowPoints(x_scale(0), y_scale(0), x_scale(x00), y_scale(y00)) ); leg1 .transition() .duration(850) .attr( "points", arrowPoints(x_scale(0), y_scale(0), x_scale(x11), y_scale(y11)) ); polygon .transition() .duration(850) .attr( "points", [ [0, 0], [x00, y00], [x00 + x11, y00 + y11], [x11, y11], [0, 0] ].map(pointToPoint) ); } }30:Te3f,function make_transition_pic(M, back = false) { const data = rref(M); data.steps.reverse(); data.steps.push({ op: "", em: [ [1, 0], [0, 1] ], current: M }); if (!back) { data.steps.reverse(); } let [x0, y0] = [M[0][0], M[1][0]]; let [x1, y1] = [M[0][1], M[1][1]]; // Not so good an attempt to improve the range // let pts = data.steps.map(function (o) { // const xs = [o.current[0][0], o.current[0][1]]; // const ys = [o.current[1][0], o.current[1][1]]; // return [xs, ys]; // }); // let xs = [pts.map((pt) => pt[0]), [x0, x1]].flat(2).map((x) => 2 * x); // let ys = [pts.map((pt) => pt[1]), [y0, y1]].flat(2).map((y) => 2 * y); // let [xmin, xmax] = d3.extent(xs); // let [ymin, ymax] = d3.extent(ys); let [xmin, xmax] = d3.extent([0, x0, x1, x0 + x1]); let [ymin, ymax] = d3.extent([0, y0, y1, y0 + y1]); let xrange = xmax - xmin; let s = 0.4; xmin = xmin - s * xrange; xmax = xmax + s * xrange; let yrange = ymax - ymin; ymin = ymin - s * yrange; ymax = ymax + s * yrange; const w = 500; const h = (w * (ymax - ymin)) / (xmax - xmin); const svg = d3 .create("svg") .attr("viewBox", [0, 0, w, h]) .attr("width", "100%") .style("max-width", `${w}px`) .style("border", "solid black 2px"); const pad = 10; // let [xmin, xmax, ymin, ymax] = [-3, 3, -1, 3]; const x_scale = d3 .scaleLinear() .domain([xmin, xmax]) .range([pad, w - pad]); const y_scale = d3 .scaleLinear() .domain([ymin, ymax]) .range([h - pad, pad]); const pointToPoint = ([x, y]) => [x_scale(x), y_scale(y)]; if (back) { [x0, y0] = [1, 0]; [x1, y1] = [0, 1]; } const configuration = svg.append("g"); const polygon = configuration .append("polygon") .attr( "points", [ [0, 0], [x0, y0], [x0 + x1, y0 + y1], [x1, y1], [0, 0] ].map(pointToPoint) ) .attr("fill", "lightgray") .attr("stroke", "black") .attr("stroke-width", 0.5); const leg0 = configuration .append("polyline") .call(arrow, x_scale(0), y_scale(0), x_scale(x0), y_scale(y0)) .attr("stroke", "red") .attr("stroke-width", 2); const leg1 = configuration .append("polyline") .call(arrow, x_scale(0), y_scale(0), x_scale(x1), y_scale(y1)) .attr("stroke", "blue") .attr("stroke-width", 2); svg .append("g") .style("font-size", "14px") .attr("transform", `translate(0, ${y_scale(0)})`) .call(d3.axisBottom(x_scale).ticks(4)); svg .append("g") .style("font-size", "14px") .attr("transform", `translate(${x_scale(0)}, 0)`) .call(d3.axisLeft(y_scale).ticks(4)); const leg_steps = data.steps.map(function (o) { const d = o.current; const [x0, x1] = d[0]; const [y0, y1] = d[1]; return [ [x0, y0], [x1, y1] ]; }); function update(state) { const [x0, y0] = leg_steps[state][0]; const [x1, y1] = leg_steps[state][1]; leg0 .transition() .duration(850) .attr( "points", arrowPoints(x_scale(0), y_scale(0), x_scale(x0), y_scale(y0)) ); leg1 .transition() .duration(850) .attr( "points", arrowPoints(x_scale(0), y_scale(0), x_scale(x1), y_scale(y1)) ); polygon .transition() .duration(850) .attr( "points", [ [0, 0], [x0, y0], [x0 + x1, y0 + y1], [x1, y1], [0, 0] ].map(pointToPoint) ); } svg.node().update = update; svg.node().data = data; return svg.node(); }31:T80d,// A mostly ChatGPT written function to compute the RREF and // keep track of what operations were applied. function rref(M) { const matrix = cloneMatrix(M); let lead = 0; let rowCount = matrix.length; let colCount = matrix[0].length; let steps = []; let init = matrix.map((row) => [...row]); for (let r = 0; r < rowCount; r++) { if (lead >= colCount) { return { result: matrix, steps, init }; } let i = r; while (matrix[i][lead] === 0) { i++; if (i === rowCount) { i = r; lead++; if (lead === colCount) { return { result: matrix, steps, init }; } } } if (i !== r) { [matrix[i], matrix[r]] = [matrix[r], matrix[i]]; let em = identityMatrix(rowCount); [em[i], em[r]] = [em[r], em[i]]; steps.push({ op: `Swap R${i + 1} <-> R${r + 1}`, em, emInv: inverseMatrix(em), opInv: `Swap R${r + 1} <-> R${i + 1}`, current: cloneMatrix(matrix) }); } let lv = matrix[r][lead]; if (lv !== 1) { let em = identityMatrix(rowCount); em[r][r] = 1 / lv; for (let j = 0; j < colCount; j++) { matrix[r][j] /= lv; } steps.push({ op: `R${r + 1} / ${lv} -> R${r + 1}`, em, emInv: inverseMatrix(em), opInv: `R${r + 1} * ${lv} -> R${r + 1}`, current: cloneMatrix(matrix) }); } for (let i = 0; i < rowCount; i++) { if (i !== r) { let lv = matrix[i][lead]; if (lv !== 0) { let em = identityMatrix(rowCount); em[i][r] = -lv; for (let j = 0; j < colCount; j++) { matrix[i][j] -= lv * matrix[r][j]; } steps.push({ op: `${-lv}R${r + 1} + R${i + 1} -> R${i + 1}`, em, emInv: inverseMatrix(em), opInv: `${lv}R${r + 1} + R${i + 1} -> R${i + 1}`, current: cloneMatrix(matrix) }); } } } lead++; } return { result: matrix, steps, init }; }32:[] 2d:{"title":"Row reduction and elementary matrices","cells":[{"id":0,"value":"# Row reduction and elementary matrices","pinned":false,"hidden":false,"mode":"md"},{"id":210,"value":"This notebook provides some tools to illustrate the geometric effect of the elementary matrices that are applied during row reduction. Suppose, for example, that we've got the following ${tex`2\\times2`} matrix:","pinned":false,"hidden":false,"mode":"md"},{"id":213,"value":"M1 = [\n [4, 2],\n [2, -2]\n]","pinned":true,"hidden":false,"mode":"ojs"},{"id":267,"value":"We can generate and view the row reduction steps as follows:","pinned":false,"hidden":false,"mode":"md"},{"id":109,"value":"make_forward_steps(M1)","pinned":false,"hidden":false,"mode":"ojs"},{"id":275,"value":"We can also visualize the effect of each step on the parallelogram spanned by the column vectors of the input matrix.","pinned":false,"hidden":false,"mode":"md"},{"id":251,"value":"viewof step1 = Inputs.button(\"Step\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":283,"value":"op1 = {\n const step = step1 % pic1.data.steps.length;\n if (step == 0) {\n return md`Initial configuration`;\n } else {\n return md`${pic1.data.steps[step].op}`;\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":115,"value":"pic1 = make_transition_pic(M1)","pinned":false,"hidden":false,"mode":"ojs"},{"id":315,"value":"We can also do these things in reverse to illustrate the effect of these actions on the unit square:","pinned":false,"hidden":false,"mode":"md"},{"id":321,"value":"viewof step1_2 = Inputs.button(\"Step\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":332,"value":"op1_2 = {\n const step = step1_2 % pic1_2.data.steps.length;\n if (step == 0) {\n return md`Initial configuration`;\n } else {\n return md`${pic1_2.data.steps[step - 1].opInv}`;\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":318,"value":"pic1_2 = make_transition_pic(M1, true)","pinned":false,"hidden":false,"mode":"ojs"},{"id":329,"value":"make_backward_steps(M1)","pinned":false,"hidden":false,"mode":"ojs"},{"id":398,"value":"### Elementary row operations\n\nOne of my major objectives is a simple demonstration of the affect of each of the three types of elementary row operations.","pinned":false,"hidden":false,"mode":"md"},{"id":449,"value":"#### Row swap","pinned":false,"hidden":false,"mode":"md"},{"id":361,"value":"viewof swap_step = Inputs.button(\"Swap rows\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":368,"value":"swap_op = {\n const step = swap_step % swap_pic.data.steps.length;\n if (step == 0) {\n return md`Initial configuration`;\n } else {\n return md`${swap_pic.data.steps[step - 1].opInv}`;\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":404,"value":"swap_mat = {\n const step = swap_step % swap_pic.data.steps.length;\n return tex.block`${math\n .parse(math.matrix(swap_pic.data.steps[step].em).toString())\n .toTex()}`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":358,"value":"swap_pic = make_transition_pic(\n [\n [0, 1],\n [1, 0]\n ],\n true\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":451,"value":"#### Row multiply","pinned":false,"hidden":false,"mode":"md"},{"id":373,"value":"viewof mult_step = Inputs.button(tex`\\text{One row }\\times2`)","pinned":false,"hidden":false,"mode":"ojs"},{"id":382,"value":"mult_op = {\n const step = mult_step % mult_pic.data.steps.length;\n if (step == 0) {\n return md`Initial configuration`;\n } else {\n return md`${mult_pic.data.steps[step - 1].opInv}`;\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":422,"value":"mult_mat = {\n const step = mult_step % 2;\n if (step == 0) {\n return tex.block`\\begin{bmatrix}1&0\\\\0&1\\end{bmatrix}`;\n }\n return tex.block`${math\n .parse(math.matrix(mult_pic.data.steps[0].emInv).toString())\n .toTex()}`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":375,"value":"mult_pic = make_transition_pic(\n [\n [2, 0],\n [0, 1]\n ],\n true\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":453,"value":"#### Row add","pinned":false,"hidden":false,"mode":"md"},{"id":389,"value":"viewof add_step = Inputs.button(\"Step\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":446,"value":"add_mat = {\n const step = add_step % 2;\n if (step == 0) {\n return tex.block`\\begin{bmatrix}1&0\\\\0&1\\end{bmatrix}`;\n }\n return tex.block`${math\n .parse(math.matrix(add_pic.data.steps[0].emInv).toString())\n .toTex()}`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":392,"value":"add_op = {\n const step = add_step % add_pic.data.steps.length;\n if (step == 0) {\n return md`Initial configuration`;\n } else {\n return md`${add_pic.data.steps[step - 1].opInv}`;\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":385,"value":"add_pic = make_transition_pic(\n [\n [1, 2],\n [0, 1]\n ],\n true\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":507,"value":"## Higher dimensions","pinned":false,"hidden":false,"mode":"md"},{"id":509,"value":"My main interest in writing this is the dynamic images in 2D, which are only applicable for ${tex`2\\times2`} matrices. The row reduction code does work for any dimensions, at least in principle. Here's a ${tex`3\\times4`} example:","pinned":false,"hidden":false,"mode":"md"},{"id":309,"value":"M4 = [\n [1, 2, -1, -4],\n [2, 3, -1, -11],\n [-2, 0, -3, 22]\n]","pinned":true,"hidden":false,"mode":"ojs"},{"id":513,"value":"make_forward_steps(M4)","pinned":true,"hidden":false,"mode":"ojs"},{"id":303,"value":"## Code","pinned":false,"hidden":false,"mode":"md"},{"id":301,"value":"### Reactions","pinned":false,"hidden":false,"mode":"md"},{"id":395,"value":"add_response = add_pic.update(add_step % add_pic.data.steps.length)","pinned":true,"hidden":false,"mode":"ojs"},{"id":379,"value":"mult_response = mult_pic.update(mult_step % mult_pic.data.steps.length)","pinned":true,"hidden":false,"mode":"ojs"},{"id":364,"value":"swap_response = {\n swap_pic.update(swap_step % swap_pic.data.steps.length);\n return html`

`;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":324,"value":"pic1_2_response = pic1_2.update(step1_2 % pic1_2.data.steps.length)","pinned":true,"hidden":false,"mode":"ojs"},{"id":254,"value":"pic1_response = pic1.update(step1 % pic1.data.steps.length)","pinned":true,"hidden":false,"mode":"ojs"},{"id":90,"value":"## Function definitions","pinned":false,"hidden":false,"mode":"md"},{"id":522,"value":"### Generate the transition pics","pinned":false,"hidden":false,"mode":"md"},{"id":555,"value":"viewof one_step = Inputs.button(\"Apply\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":551,"value":"pic1step = make_one_step_transition_pic([\n [2, 4],\n [1, 2]\n])","pinned":true,"hidden":false,"mode":"ojs"},{"id":592,"value":"one_step_response = pic1step.update(one_step)","pinned":true,"hidden":false,"mode":"ojs"},{"id":541,"value":"$2f","pinned":true,"hidden":false,"mode":"ojs"},{"id":163,"value":"$30","pinned":true,"hidden":false,"mode":"ojs"},{"id":94,"value":"// https://observablehq.com/@oberbichler/arrow\nfunction arrow(selection, ax, ay, bx, by, options = {}) {\n const points = arrowPoints(ax, ay, bx, by, options);\n\n selection.attr(\"points\", points).attr(\"stroke-linejoin\", \"round\");\n\n return selection;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":92,"value":"function arrowPoints(ax, ay, bx, by, options = {}) {\n const dx = bx - ax;\n const dy = by - ay;\n\n const length = Math.sqrt(dx ** 2 + dy ** 2);\n\n const ux = dx / length;\n const uy = dy / length;\n\n const nx = -uy;\n const ny = ux;\n\n const h = options.arrowLength || 8;\n const w = options.arrowWidth || 4;\n\n const mx = bx - ux * h;\n const my = by - uy * h;\n\n const lx = mx - (nx * w) / 2;\n const ly = my - (ny * w) / 2;\n\n const rx = mx + (nx * w) / 2;\n const ry = my + (ny * w) / 2;\n\n return [ax, ay, mx, my, lx, ly, bx, by, rx, ry, mx, my];\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":520,"value":"### Generate the LaTeXed steps","pinned":false,"hidden":false,"mode":"md"},{"id":83,"value":"function make_forward_steps(M) {\n const data = rref(M);\n let step_tex = math.parse(math.matrix(M).toString()).toTex();\n data.steps.forEach(function (step) {\n const current_tex = math\n .parse(math.matrix(step.current).toString())\n .toTex();\n step_tex = step_tex + `&\\\\xrightarrow{${step.op}}&${current_tex} \\\\\\\\`;\n });\n\n return tex.block`\\begin{aligned}${step_tex}\\end{aligned}`;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":80,"value":"function make_backward_steps(M) {\n const data = rref(M);\n let step_tex = math.parse(math.matrix(data.result).toString()).toTex();\n for (let i = data.steps.length - 1; i >= 0; i--) {\n const matrix_step = i > 0 ? data.steps[i - 1].current : data.init;\n const op_step = data.steps[i];\n const current_tex = math.parse(math.matrix(matrix_step).toString()).toTex();\n step_tex =\n step_tex + `&\\\\xrightarrow{${op_step.opInv}}&${current_tex} \\\\\\\\`;\n }\n\n return tex.block`\\begin{aligned}${step_tex}\\end{aligned}`;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":25,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":12,"value":"function cloneMatrix(mat) {\n return mat.map((row) => [...row]);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":15,"value":"function identityMatrix(n) {\n return Array.from({ length: n }, (_, i) =>\n Array.from({ length: n }, (_, j) => (i === j ? 1 : 0))\n );\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":37,"value":"function inverseMatrix(em) {\n let size = em.length;\n let inv = identityMatrix(size);\n for (let i = 0; i < size; i++) {\n for (let j = 0; j < size; j++) {\n if (i !== j) {\n inv[i][j] = -em[i][j];\n } else {\n inv[i][j] = 1 / em[i][j];\n }\n }\n }\n return inv;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":524,"value":"### One import\n\nWe use MathJS to generate some LaTeX for typesetting.","pinned":false,"hidden":false,"mode":"md"},{"id":42,"value":"math = require(\"mathjs\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":600,"value":"make_forward_steps([\n [4, 2, 1, 0],\n [2, -2, 0, 1]\n])","pinned":true,"hidden":false,"mode":"ojs"},{"id":616,"value":"M = [\n [2, 1, 1, 1, 0, 0],\n [3, -1, 2, 0, 1, 0],\n [1, -3, 1, 0, 0, 1]\n]","pinned":true,"hidden":false,"mode":"ojs"},{"id":622,"value":"make_forward_steps(M)","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}