29:null 2a:["$","title",null,{"children":"Linear Transformations and Matrices | Yi Zhe | Observable"}] 2f:T757,{ const gridOptions = { stroke: slate["300"], strokeOpacity: 1 }; const transformedGridOptions = { stroke: slate["400"], strokeOpacity: 1, strokeWidth: 1.5 }; const linkOptions = { strokeWidth: 3, strokeLinecap: "round" }; const grid = Plot.plot({ axis: null, width, aspectRatio: 1, x: { domain: [-10, 10], interval: 1 }, y: { domain: [-6, 6], interval: 1 }, marks: [ Plot.gridX({ ...gridOptions }), Plot.gridY({ ...gridOptions }), Plot.dot([null], { x: 0, y: 0, r: 30, stroke: "none", fill: "black", fillOpacity: 0.1 }) ], style: { // position: "fixed" } }); const transformedGrid = Plot.plot({ axis: null, width, aspectRatio: 1, x: { domain: [-10, 10], interval: 1 }, y: { domain: [-6, 6], interval: 1 }, marks: [ Plot.gridX({ ...transformedGridOptions }), Plot.gridY({ ...transformedGridOptions }), Plot.link([null], { ...linkOptions, x1: 0, y1: 0, x2: 1, stroke: cyan["400"] }), Plot.link([null], { ...linkOptions, x1: 0, y1: 0, y2: 1, stroke: orange["400"] }) ], style: { transform: matrixTransform, position: "absolute", top: 0, left: 0, background: "none" } }); // const transformedGridEl = d3.select(transformedGrid); // transformedGridEl.attr("transform", matrixTransform); // transformedGridEl // .selectAll("line") // .attr("vector-effect", "non-scaling-stroke"); const output = html`

${grid} ${transformedGrid}

`; console.log(output); return output; }30:T763,{ const gridOptions = { stroke: slate["300"], strokeOpacity: 1 }; const transformedGridOptions = { stroke: slate["400"], strokeOpacity: 1, strokeWidth: 1.5 }; const linkOptions = { strokeWidth: 3, strokeLinecap: "round" }; const grid = Plot.plot({ axis: null, width, aspectRatio: 1, x: { domain: [-10, 10], interval: 1 }, y: { domain: [-6, 6], interval: 1 }, marks: [ Plot.gridX({ ...gridOptions }), Plot.gridY({ ...gridOptions }), Plot.dot([null], { x: 0, y: 0, r: 30, stroke: "none", fill: "black", fillOpacity: 0.1 }) ], style: { // position: "fixed" } }); const transformedGrid = Plot.plot({ axis: null, width, aspectRatio: 1, x: { domain: [-10, 10], interval: 1 }, y: { domain: [-6, 6], interval: 1 }, marks: [ Plot.gridX({ ...transformedGridOptions }), Plot.gridY({ ...transformedGridOptions }), Plot.link([null], { ...linkOptions, x1: 0, y1: 0, x2: 1, stroke: cyan["400"] }), Plot.link([null], { ...linkOptions, x1: 0, y1: 0, y2: 1, stroke: orange["400"] }) ], style: { transform: interpolatedMatrixTransform, position: "absolute", top: 0, left: 0, background: "none" } }); // const transformedGridEl = d3.select(transformedGrid); // transformedGridEl.attr("transform", matrixTransform); // transformedGridEl // .selectAll("line") // .attr("vector-effect", "non-scaling-stroke"); const output = html`

${grid} ${transformedGrid}

`; console.log(output); return output; }31:[] 2d:{"id":"ace23f32060044d7","slug":null,"title":"Linear Transformations and Matrices","thumbnail":"63cb346f5231abf03a4410c18472ebb8f65073f47f97b00c3c537145ef1cde93","access_level":"public","create_time":"$D2023-07-08T05:21:47.756Z","update_time":"$D2023-07-08T11:42:17.067Z","view_time":null,"first_public_time":"$D2023-07-08T05:21:47.756Z","fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"72168720d6234865","login":"yizhe-ang","name":"Yi Zhe","avatar_url":"https://avatars-next.observableusercontent.com/09526f389d604f214a751d626c4f15e1b6cbc5b603928173cdca2c960eb5d550","tier":"starter_2024"},"version":286,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"0fe9789266806f2c","login":"yizhe-ang","name":"Yi Zhe","avatar_url":"https://avatars-next.observableusercontent.com/09526f389d604f214a751d626c4f15e1b6cbc5b603928173cdca2c960eb5d550","tier":null}],"members":[{"type":"individual","id":"0fe9789266806f2c","login":"yizhe-ang","name":"Yi Zhe","avatar_url":"https://avatars-next.observableusercontent.com/09526f389d604f214a751d626c4f15e1b6cbc5b603928173cdca2c960eb5d550","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Linear Transformations and Matrices","cells":[{"id":0,"value":"# Linear Transformations and Matrices","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":7,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":49,"value":"tex`\n\\begin{bmatrix}\n\\textcolor{${cyan[\"500\"]}}{\\bm{${i1.toFixed(1)}}} & \\textcolor{${\n orange[\"500\"]\n}}{\\bm{${j1.toFixed(1)}}} \\\\\n\\textcolor{${cyan[\"500\"]}}{\\bm{${i2.toFixed(1)}}} & \\textcolor{${\n orange[\"500\"]\n}}{\\bm{${j2.toFixed(1)}}} \n\\end{bmatrix}\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":67,"value":"i₁ = **${Inputs.bind(\n Tangle(tangleOptions),\n viewof i1\n)}**, i₂ = **${Inputs.bind(\n Tangle(tangleOptions),\n viewof i2\n)}**, j₁ = **${Inputs.bind(\n Tangle(tangleOptions),\n viewof j1\n)}**, j₂ = **${Inputs.bind(\n Tangle(tangleOptions),\n viewof j2\n)}**","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":254,"value":"## Animated","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":262,"value":"viewof t = Scrubber(d3.range(0, 1.01, 0.01), {\n autoplay: false,\n loop: false,\n format: (t) => t.toFixed(1)\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":266,"value":"$30","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":30,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":28,"value":"## Appendix","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":223,"value":"Based on [3Blue1Brown](https://www.youtube.com/watch?v=kYB8IZa5AuE&list=PLZHQObOWTQDPD3MizzM2xVFitgF8hE_ab&index=4&ab_channel=3Blue1Brown).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":34,"value":"### Helpers","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":116,"value":"tangleOptions = ({\n step: 0.1,\n minWidth: \"25px\",\n power: 0.9\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":72,"value":"viewof i1 = Inputs.input(1)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":74,"value":"viewof i2 = Inputs.input(0)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":78,"value":"viewof j1 = Inputs.input(1)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":80,"value":"viewof j2 = Inputs.input(1)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":105,"value":"matrixTransform = `matrix(${i1}, ${-i2}, ${-j1}, ${j2}, 0, 0)`\n// matrixTransform = `matrix(${i1} ${i2} ${j1} ${j2} 0 0)`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":268,"value":"interpolatedMatrixTransform = `matrix(${1 + (i1 - 1) * t}, ${-i2 * t}, ${\n -j1 * t\n}, ${1 + (j2 - 1) * t}, 0, 0)`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":36,"value":"### Imports","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":63,"value":"import { Tangle } from \"@mbostock/tangle\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":258,"value":"import { Scrubber } from \"@mbostock/scrubber\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":187,"value":"import { cyan, orange, slate } from \"@yizhe-ang/utilities\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W31","stdlib":"1","titling":"auto"}} 2e:"$2d:body"