28:null 29:["$","title",null,{"children":"Linear algebra functions | Harry Stevens | Observable"}] 2e:[] 2c:{"id":"503e9f592d58fbc7","slug":"linear-algebra","title":"Linear algebra functions","thumbnail":"7f34efa6e19e26f718d407307d7001e3e85f31430f01cce6415f3fa4d1b55796","access_level":"public","create_time":"$D2019-04-11T16:37:45.842Z","update_time":"$D2023-05-12T21:12:55.853Z","view_time":null,"first_public_time":"$D2019-05-17T00:50:05.402Z","has_unpublished_edits":null,"fork":false,"stars":8,"starred":false,"owner":{"type":"team","id":"be420f6a83563b92","login":"harrystevens","name":"Harry Stevens","avatar_url":"https://avatars-next.observableusercontent.com/bc9bae4b7e30062b343ae978a13454e29cd3f2daf3a800d0024043686ddf094b","tier":"starter_2024"},"version":661,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"61e2153e05789733","login":"harrystevens","name":"Harry Stevens","avatar_url":"https://avatars-next.observableusercontent.com/bc9bae4b7e30062b343ae978a13454e29cd3f2daf3a800d0024043686ddf094b","tier":null}],"members":[{"type":"individual","id":"61e2153e05789733","login":"harrystevens","name":"Harry Stevens","avatar_url":"https://avatars-next.observableusercontent.com/bc9bae4b7e30062b343ae978a13454e29cd3f2daf3a800d0024043686ddf094b","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":{"id":"3f258064194224bf","slug":"linear-algebra","title":"Linear Algebra","owner":{"id":"be420f6a83563b92","login":"harrystevens","name":"Harry Stevens"}},"type":"notebook","body":{"title":"Linear algebra functions","cells":[{"id":0,"value":"md`# Linear algebra functions\n\nBelow are JavaScript implementations of functions from Introduction to Linear Algebra by Gilbert Strang.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"md`## Vector addition`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":23,"value":"md`${tex`${texBI(\"v\")} = ${texVec([`v_{1}`, `v_{2}`])}`} and ${tex`${texBI(\"w\")} = ${texVec([`w_{1}`, `w_{2}`])}`} add to ${tex`${texBI(\"v\")} + ${texBI(\"w\")} = ${texVec([`v_{1} + w_{1}`, `v_{2} + w_{2}`])}`}.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":89,"value":"md`This is implemented in JavaScript as:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"// v and w are vectors represented as arrays\naddVector = function(v, w){\n let out = [];\n for (let i = 0; i < v.length; i++){\n out[i] = v[i] + w[i];\n }\n return out;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":106,"value":"md`## Scalar multiplication\n\nVectors can be multiplied by any number ${tex`c`}. To find ${tex`c${texBI(\"v\")}`}, multiply each component of ${tex`${texBI(\"v\")}`} by ${tex`c`}. If, for instance, ${tex`c = 2`}\n\n${tex`2${texBI(\"v\")} = ${texVec([`2\\\\cdot v_{1}`, `2\\\\cdot v_{2}`])}`}\n\n
In JavaScript, scalar multiplication can be implemented as:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"// v is a vector represented as array\n// and c is a number (scalar)\n// returns a scaled vector\nmultiplyScalar = function(v, c){\n let out = [];\n for (let i = 0; i < v.length; i++){\n out[i] = v[i] * c;\n }\n return out;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":100,"value":"md`## Vector subtraction`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":93,"value":"md`As the book notes, vector subtraction follows the same idea as addition, but with subtraction instead of addition. Therefore, we can combine our functions to add vectors and multiply scalars to implement vector subtraction in JavaScript as:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"// v and w are arrays\nsubtractVector = function(v, w){\n return addVector(v, multiplyScalar(w, -1));\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":219,"value":"md`## Matrix multiplication\n\nThis conception of matrix multiplication comes from [3blue1brown’s Essence of Linear Algebra, chapter 3](https://www.youtube.com/watch?v=kYB8IZa5AuE&list=PLZHQObOWTQDPD3MizzM2xVFitgF8hE_ab&index=3). In two dimensions, you can think of the components of a vector ${tex`${texBI(\"v\")}`} as scalars, where ${tex`v_1`} scales ${tex`î`} and ${tex`v_2`} scales ${tex`ĵ`}. Therefore, you can think of the linear transformation of ${tex`${texBI(\"v\")}`} as the components of ${tex`${texBI(\"v\")}`} scaling the transformed versions of ${tex`î`} and ${tex`ĵ`}.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":226,"value":"multiplyMatrix = (v, m) => { \n // The output of a linear transformation on the vector v\n const o = [];\n \n // Each component of the vector acts as a scalar\n // of i-hat and j-hat respectively\n for (let i = 0, l = m.length; i < l; i++){\n o[i] = multiplyScalar(m[i], v[i]);\n }\n \n // Sum the resulting vectors\n let s = [0, 0];\n for (let i = 0, l = o.length; i < l; i++){\n s = addVector(s, o[i]);\n }\n \n return s;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":224,"value":"vector = [2, 4] // some random vector","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":222,"value":"matrix = [[1, 0], [0, 1]] // basis vectors i-hat and j-hat. change these to get the linear transformation","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":269,"value":"rotation = [[0, 1], [-1, 0]]; // rotation matrix","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":277,"value":"shear = [[1, 0], [1, 1]]; // shear matrix","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":231,"value":"start = multiplyMatrix(vector, matrix);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":274,"value":"rotated = multiplyMatrix(vector, rotation);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":284,"value":"sheared = multiplyMatrix(vector, shear);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":294,"value":"{\n const width = 300, height = 300,\n x = d3.scaleLinear([-10, 10], [0, width]),\n y = d3.scaleLinear([-10, 10], [height, 0]);\n \n const svg = d3.create(\"svg\")\n .style(\"overflow\", \"visible\")\n .attr(\"width\", width)\n .attr(\"height\", height) \n .call(d => drawAxes(d, x, y));\n \n svg.append(\"g\")\n .datum(start)\n .call(d => drawVector(d, x, y));\n \n svg.append(\"g\")\n .datum(rotated)\n .call(d => drawVector(d, x, y));\n \n svg.append(\"g\")\n .datum(sheared)\n .call(d => drawVector(d, x, y));\n \n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":379,"value":"md`## Dot product\n\nIf you have two vectors of the same dimension, taking their dot product means pairing up all their coordinates, multiplying those pairs together, and adding the result.\n\nFormally, ${tex`\\textbf{\\textit{v}} \\cdot \\textbf{\\textit{w}} = v_1w_1 + ... + v_nw_n`}.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":383,"value":"dotProduct = (v1, v2) => {\n let o = 0;\n for (let i = 0, l = v1.length; i < l; i++){\n o += v1[i] * v2[i];\n }\n return o;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":585,"value":"u1 = [1/3, -1/3, 1/3]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":588,"value":"u2 = [-1/10, 0, 1/10]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":385,"value":"dotProduct(u2, u2)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":435,"value":"md`The length of a vector is the square root of the vector’s dot product with itself.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":438,"value":"vecLength = v => Math.sqrt(dotProduct(v, v));","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":440,"value":"vecLength([2, 2, 2, 2]); // It scales easily to multiple dimensions!","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":473,"value":"vecLength([Math.sqrt(.25), Math.sqrt(.25), Math.sqrt(.25), Math.sqrt(.25)])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":461,"value":"// In the xy plane, the unit vector that\n// makes an angle \"theta\" with the x axis\n// is (cosθ, sinθ)\nvecLength([Math.cos(90), Math.sin(90)]);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":606,"value":"sqrt(62)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":613,"value":"vecLength([2, 3, -7])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":601,"value":"dotProduct([2, 3, -7], [2, 3, -7])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":26,"value":"md`## ${tex`LaTeX`} functions\n\nWriting linear algebra in LaTeX is hard, so here are functions to help.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":34,"value":"texVec = vec => {\n return `\\\\left[\\\\begin{matrix}\n${vec.map(d => `${d}\\\\\\\\`).join(\"\")}\n\\\\end{matrix}\n\\\\right]\n`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":112,"value":"texBI = text => `\\\\textbf{\\\\textit{${text}}}`;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":196,"value":"texVecFlat = vec => `(${vec.toString()})`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":179,"value":"md`## Visual components\n\nFor drawing vectors and the like.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":342,"value":"drawAxes = (sel, x, y) => { \n const width = x.range()[1], height = y.range()[0];\n \n const xgrid = sel.append(\"g\")\n .attr(\"class\", \"grid x\")\n .call(d3.axisBottom(x).tickSize(height));\n \n xgrid.selectAll(\"line\").style(\"stroke\", \"#eee\");\n xgrid.selectAll(\"text\").remove();\n xgrid.select(\".domain\").remove();\n \n const ygrid = sel.append(\"g\")\n .attr(\"class\", \"grid y\")\n .call(d3.axisLeft(y).tickSize(width))\n .attr(\"transform\", `translate(${width})`);\n ygrid.selectAll(\"line\").style(\"stroke\", \"#eee\");\n ygrid.selectAll(\"text\").remove();\n ygrid.select(\".domain\").remove();\n \n sel.append(\"g\")\n .attr(\"class\", \"axis x\")\n .attr(\"transform\", `translate(0, ${height / 2})`)\n .call(d3.axisBottom(x));\n \n sel.append(\"g\")\n .attr(\"class\", \"axis y\")\n .attr(\"transform\", `translate(${width / 2})`)\n .call(d3.axisLeft(y));\n \n return sel;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":321,"value":"drawVector = (g, x, y) => {\n const origin = [0, 0],\n scaled = v => [x(v[0]), y(v[1])];\n \n let polyline = g.select(\"polyline\");\n if (polyline.empty()){\n polyline = g.append(\"polyline\")\n .attr(\"points\", d => [scaled(origin), scaled(d)])\n .attr(\"stroke\", \"black\")\n .attr(\"marker-end\", \"url(#arrow)\");\n }\n else {\n polyline\n .attr(\"points\", d => [scaled(origin), scaled(d)])\n }\n \n let text = g.select(\"text\");\n if (text.empty()){\n text = g.append(\"text\")\n .attr(\"dx\", d => d[0] >= 0 ? 3 : -3)\n .attr(\"transform\", d => `translate(${scaled(d)})`)\n .style(\"font-style\", \"italic\")\n .style(\"font-size\", 11)\n .style(\"text-anchor\", d => d[0] >= 0 ? \"start\" : \"end\")\n .text(d => d); \n }\n else {\n text \n .attr(\"dx\", d => d[0] >= 0 ? 3 : -3)\n .attr(\"transform\", d => `translate(${scaled(d)})`)\n .style(\"text-anchor\", d => d[0] >= 0 ? \"start\" : \"end\")\n .text(d => d);\n }\n\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":367,"value":"createArrowhead = (svg, id, color) => {\n let defs = svg.select(\"defs\");\n if (defs.empty()) {\n defs = svg.append(\"defs\");\n }\n \n defs.append(\"marker\")\n .attr(\"id\", id)\n .attr(\"viewBox\", \"0 0 10 10\")\n .attr(\"refX\", \"10\")\n .attr(\"refY\", \"5\")\n .attr(\"markerWidth\", \"6\")\n .attr(\"markerHeight\", \"6\")\n .attr(\"orient\", \"auto-start-reverse\")\n .append(\"path\")\n .style(\"fill\", color || \"black\")\n .attr(\"d\", \"M 0 0 L 10 5 L 0 10 z\"); \n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":183,"value":"// To use: .attr(\"marker-end\", \"url(#arrow)\")\narrowhead = {\n return html``\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":608,"value":"md`## Math`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":611,"value":"sqrt = Math.sqrt","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W2e","stdlib":"1","titling":"auto"}} 2d:"$2c:body"