29:null 2a:["$","title",null,{"children":"Worked examples 1.1 | Harry Stevens | Observable"}] 2f:T619,{ const wrapper = d3.select(DOM.element("div")); const svg = wrapper.append("svg") .attr("width", widthb + marginb.left + marginb.right) .attr("height", heightb + marginb.top + marginb.bottom); const g = svg.append("g") .attr("transform", `translate(${[marginb.left, marginb.top]})`); g.append("g") .attr("transform", `translate(0, ${heightb / 2})`) .call(d3.axisBottom(scaleb)); g.append("g") .attr("transform", `translate(${widthb / 2})`) .call(d3.axisLeft(scaleb).tickFormat(d => d * -1)) g.selectAll(".sum") .data(dwcv1) .enter().append("circle") .style("fill", "gray") .attr("class", "sum") .attr("r", rb / 3) .attr("cx", d => scaleb(d[0])) .attr("cy", d => scaleb(d[1])); g.selectAll(".cv2") .data(cv2) .enter().append("circle") .style("fill", "darkblue") .attr("class", "cv2") .attr("r", rb) .attr("cx", d => scaleb(d[0])) .attr("cy", d => scaleb(d[1])); g.selectAll(".cv1") .data(cv1) .enter().append("circle") .style("fill", "steelblue") .attr("class", "cv1") .attr("r", rb) .attr("cx", d => scaleb(d[0])) .attr("cy", d => scaleb(d[1])); // Because the scale is not clamped, we can use just one! g.selectAll(".dw") .data(dw) .enter().append("circle") .style("fill", "tomato") .attr("class", "dw") .attr("r", rb) .attr("cx", d => scaleb(d[0])) .attr("cy", d => scaleb(d[1])); return wrapper.node(); }30:[] 2d:{"id":"d82cb10f393a7e9e","slug":"adding-three-dimensional-vectors","title":"Worked examples 1.1","thumbnail":"addb39c0176fcfa21cef997f3620eea63279c331a3c0b249ad381e611b41ac43","access_level":"public","create_time":"$D2020-01-11T16:50:24.503Z","update_time":"$D2020-02-03T16:25:50.744Z","view_time":null,"first_public_time":"$D2020-01-11T18:07:36.114Z","has_unpublished_edits":null,"fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"be420f6a83563b92","login":"harrystevens","name":"Harry Stevens","avatar_url":"https://avatars-next.observableusercontent.com/bc9bae4b7e30062b343ae978a13454e29cd3f2daf3a800d0024043686ddf094b","tier":"starter_2024"},"version":549,"publish_version":549,"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":0,"collection":{"id":"3f258064194224bf","slug":"linear-algebra","title":"Linear Algebra","owner":{"id":"be420f6a83563b92","login":"harrystevens","name":"Harry Stevens"}},"type":"notebook","body":{"title":"Worked examples 1.1","cells":[{"id":0,"value":"md`# Worked examples 1.1\n\nFrom chapter 1 of Introduction to Linear Algebra by Gilbert Strang.\n\n- [1.1 A](#section11a)\n- [1.1 B](#section11b)\n- [1.1 C](#section11c)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"value":"section11a = md`## 1.1 A\n\nCombinations ${tex`c${texBI(\"v\")} + d${texBI(\"w\")} = c${texVec(v)} + d${texVec(w)} = ${texVec([\"c\", \"c + d\", \"d\"])}`} fill a plane.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":63,"value":"md`The points for all ${tex`c`} and ${tex`d`} between ${tex`${min}`} and ${tex`${max}`} are shown below in blue. As Strang points out, the second component ${tex`c + d`} is always the sum of the first and third components. Like most vectors, ${tex`(${notCoplanar})`} is not in the plane, because ${tex`${notCoplanar[1]} ≠ ${notCoplanar[0]} + ${notCoplanar[2]}`}. That vector is shown below in red.\n\nAlso, note that the vector ${tex`(n, -n, n)`}, shown in green, is perpendicular to the plane.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":58,"value":"{\n const wrapper = DOM.element(\"figure\");\n await xAxis;\n await yAxis;\n await zAxis;\n await points;\n await vector;\n renderer.render(scene, camera);\n wrapper.appendChild(renderer.domElement);\n const caption = wrapper.appendChild(DOM.element(\"figcaption\"));\n caption.innerHTML = `Rotate and zoom the chart to explore. The linear combination cv + dw is shown in blue; the vector (${notCoplanar}) is shown in red; and the vector (${perpendicular}) is shown in green.`\n caption.style.width = \"400px\";\n return wrapper;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":83,"value":"data = {\n const out = [];\n for (let c = min; c <= max; c++){\n const cv = multiplyScalar(v, c);\n for (let d = min; d <= max; d++){\n const dw = multiplyScalar(w, d);\n out.push(addVector(cv, dw)); \n }\n }\n return out;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":71,"value":"v = [1, 1, 0]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":77,"value":"w = [0, 1, 1]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":202,"value":"notCoplanar = [4, 8, 12];","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":205,"value":"perpendicular = [3, -3, 3];","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":85,"value":"min = 0","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":88,"value":"max = 10","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":105,"value":"xAxis = threeAxis(scene)\n .axis(\"x\")\n .extent([0, 10])\n .tickSize(10)\n .tickCount(5)\n ();","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":118,"value":"yAxis = threeAxis(scene)\n .axis(\"y\")\n .extent([0, 10])\n .tickSize(10)\n .tickCount(5)\n ();","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":124,"value":"zAxis = threeAxis(scene)\n .axis(\"z\")\n .extent([0, 10])\n .tickSize(10)\n .tickCount(5)\n ();","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":133,"value":"points = {\n for (let i = 0, l = data.length; i < l; i++){\n threePoint(scene)\n .color(\"steelblue\")\n .radius(.1)\n .coordinates(data[i])\n ();\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":165,"value":"vector = {\n threeVector(scene)\n .color(\"tomato\")\n .vector(notCoplanar)\n ();\n \n threeVector(scene)\n .color(\"green\")\n .origin(multiplyScalar(perpendicular, -1))\n .vector(perpendicular)\n ();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":271,"value":"section11b = md`## 1.1 B\n\nFor ${tex`${texBI(\"v\")} = ${texVecFlat(vb)}`} and ${tex`${texBI(\"w\")} = ${texVecFlat(wb)}`}, describe all points ${tex`\\textit{c}${texBI(\"v\")}`} with (1) whole numbers ${tex`\\textit{c}`} (2) nonnegative numbers ${tex`\\textit{c} ≥ 0`}. Then add all vectors ${tex`\\textit{c}${texBI(\"v\")} + \\textit{d}${texBI(\"w\")}`}.\n\nIn the diagram below, the first ${tex`\\textit{c}${texBI(\"v\")}`} is in steelblue blue, the second ${tex`\\textit{c}${texBI(\"v\")}`} is in dark blue, and ${tex`\\textit{d}${texBI(\"w\")}`} is in red. The result of adding ${tex`\\textit{d}${texBI(\"w\")}`} and the first ${tex`\\textit{c}${texBI(\"v\")}`} is shown in gray.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":346,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":289,"value":"wb = [0, 1];","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":285,"value":"vb = [1, 0];","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":321,"value":"cv1 = {\n const out = [];\n for (let c = xmin; c <= xmax; c++){\n out.push(multiplyScalar(vb, c));\n }\n return out;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":337,"value":"cv2 = {\n const out = [];\n for (let c = 0; c <= xmax; c += 0.1){\n out.push(multiplyScalar(vb, c));\n }\n return out;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":378,"value":"dw = {\n const out = [];\n for (let d = ymin; d <= ymax; d += 0.1){\n out.push(multiplyScalar(wb, d));\n }\n return out;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":396,"value":"dwcv1 = {\n const out = [];\n for (let i = 0, l = dw.length; i < l; i++){\n const vecdw = dw[i];\n for (let j = 0, m = cv1.length; j < m; j++){\n const veccv1 = cv1[j];\n out.push(addVector(vecdw, veccv1));\n }\n }\n return out;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":311,"value":"xmin = -10;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":315,"value":"xmax = 10;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":340,"value":"ymin = -10;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":343,"value":"ymax = 10;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":361,"value":"scaleb = d3.scaleLinear()\n .domain([xmin, xmax])\n .range([0, widthb]);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":355,"value":"marginb = ({left: 5, right: 5, top: 5, bottom: 5});","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":349,"value":"widthb = 300 - marginb.left - marginb.right;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":351,"value":"heightb = 300 - marginb.top - marginb.bottom;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":364,"value":"rb = 3;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":412,"value":"section11c = md`## 1.1 C\n\nFind two equations for ${tex`c`} and ${tex`d`} so that the linear combination ${tex`c${texBI(\"v\")} + d${texBI(\"w\")}`} equals ${tex`${texBI(\"b\")}`}:\n

\n${tex`v = ${texVec(probC.v)}`} ${tex`w = ${texVec(probC.w)}`} ${tex`b = ${texVec(probC.b)}`}.\n

\nTherefore, find ${tex`n`} numbers ${tex`c_1,...,c_n`} so that ${tex`c_1${texBI(\"v\")}_1 + ... + c_n${texBI(\"v\")}_n = b`}.\n

\nThe vector equation is:\n

\n${tex`c${texVec(probC.v)} + d${texVec(probC.w)} = ${texVec(probC.b)}`}.\n

\nTo find the two equations, just move across the top and bottom:\n

\n${tex`2c - d = 1`}\n
\n${tex`-c + 2d = 0`}\n\nEach equation produces a line (top, bottom):`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":474,"value":"{\n const svg = d3.select(DOM.svg(\n probC.width + probC.margin.left + probC.margin.right,\n probC.height + probC.margin.top + probC.margin.bottom\n ));\n \n const g = svg.append(\"g\")\n .attr(\"transform\", `translate(${[probC.margin.left, probC.margin.top]})`);\n \n g.append(\"g\")\n .attr(\"transform\", `translate(0, ${probC.height / 2})`)\n .call(probC.xAxis);\n \n g.append(\"g\")\n .attr(\"transform\", `translate(${probC.width / 2})`)\n .call(probC.yAxis);\n \n g.append(\"path\")\n .style(\"stroke\", \"tomato\")\n .style(\"stroke-width\", 2)\n .attr(\"d\", probC.line(probC.line1));\n \n g.append(\"path\")\n .style(\"stroke\", \"steelblue\")\n .style(\"stroke-width\", 2)\n .attr(\"d\", probC.line(probC.line2));\n \n g.append(\"circle\")\n .attr(\"r\", 4)\n .attr(\"cx\", probC.x(probC.intersection[0]))\n .attr(\"cy\", probC.y(probC.intersection[1]));\n \n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":520,"value":"md`Imagining that the horizontal axis is ${tex`c`} and the vertical axis is ${tex`d`}, you can see that the two lines cross at the solution ${tex`c = 2/3`}, ${tex`d = 1/3`}. This can also be represented as a matrix equation:\n
\n
\n${tex`${texVec([probC.v, probC.w])}${texVec([\"c\", \"d\"])}=${texVec(probC.b)}`}.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":546,"value":"intersection = probC.intersection","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":425,"value":"probC = {\n const out = {\n v: [2, -1],\n w: [-1, 2],\n b: [1, 0],\n margin: {left: 5, right: 10, top: 5, bottom: 5} \n }\n out.width = 300 - out.margin.left - out.margin.right;\n out.height = 300 - out.margin.top - out.margin.bottom;\n out.x = d3.scaleLinear().domain([-2, 2]).range([0, out.width]);\n out.y = d3.scaleLinear().domain([-2, 2]).range([out.height, 0]);\n out.xAxis = d3.axisBottom(out.x);\n out.yAxis = d3.axisLeft(out.y);\n \n // The lines\n const eq1 = c => 2 * c - 1; // solving for d\n out.line1 = [[-2, eq1(-2)], [2, eq1(2)]];\n const eq2 = c => c / 2;\n out.line2 = [[-2, eq2(-2)], [2, eq2(2)]];\n out.line = d3.line().x(d => out.x(d[0])).y(d => out.y(d[1]));\n out.intersection = lineIntersection(out.line1, out.line2);\n return out;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"md`## Imports`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":535,"value":"lineIntersection = (a, b) => {\n const a0x = a[0][0],\n a0y = a[0][1],\n a1x = a[1][0],\n a1y = a[1][1],\n b0x = b[0][0],\n b0y = b[0][1],\n b1x = b[1][0],\n b1y = b[1][1];\n \n const denom = ((b1y - b0y) * (a1x - a0x)) - ((b1x - b0x) * (a1y - a0y));\n \n if (denom === 0) return false;\n \n const deltaY = a0y - b0y,\n deltaX = a0x - b0x,\n numer0 = ((b1x - b0x) * deltaY) - ((b1y - b0y) * deltaX),\n numer1 = ((a1x - a0x) * deltaY) - ((a1y - a0y) * deltaX),\n quotA = numer0 / denom,\n quotB = numer1 / denom;\n\n return quotA > 0 && quotA < 1 && quotB > 0 && quotB < 1 ?\n [a0x + (quotA * (a1x - a0x)), a0y + (quotA * (a1y - a0y))] :\n false;\n};","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":317,"value":"d3 = require(\"d3@5\");","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":50,"value":"import { scene, controls, camera, renderer, threeAxis, threePoint, threeVector } from \"40a3e82c8a1336a0\";","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":128,"value":"controls","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"import { addVector, multiplyScalar, texBI, texVec, texVecFlat } from \"@harrystevens/linear-algebra\";","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W30","stdlib":"1","titling":"auto"}} 2e:"$2d:body"