31:T5aa,{ let lo = -50 // the low value of the svgcoordinate system let hi = 50 // the high value of the svg coordinate system let N = 10 // the number of gridlines // define a linear d3 scale that maps from [0, N] to [lo, hi] let s = d3.scaleLinear([0, N], [lo, hi]) // define a stroke color and width for the axis lines let stroke = `rgba(255,255,255,0.75)` let strokeWidth = 0.6 // define the transformation matrix for the SVG let svgTransform = `matrix(${a}, ${b}, ${c}, ${d}, 0, 0)` return html`

` }32:[{"id":"a5aa599bf8a386015b4ef8b1e807edfa0c12c1e7ec89ee13829151cf944afb9847b07adf92d064a9e7206231c36927ae88bfdfbb71026f0bf5806ea9bbcf1966","href":"https://static.observableusercontent.com/files/a5aa599bf8a386015b4ef8b1e807edfa0c12c1e7ec89ee13829151cf944afb9847b07adf92d064a9e7206231c36927ae88bfdfbb71026f0bf5806ea9bbcf1966","name":"image.png","type":"image/png","lastModified":1578280436457.509,"size":492230}] 2f:{"title":"Example of 2D Linear Transforms","cells":[{"id":0,"value":"title = md`# Example of 2D Linear Transforms`","pinned":false,"hidden":false,"mode":"ojs"},{"id":240,"value":"md`\n\nUse the sliders below to squash${\n isCorgi ? \" the corgis\" : \"\"\n} or ${\n isCorgi ? \"\" : \"otherwise \"\n} inflict any other two-dimensional linear transform upon ${\n isCorgi ? \"these poor animals\" : \"the subject of this image\"\n}.\n\nSquares become parallelograms, and their area scales by ${tex`Det(A)`}.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":98,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":113,"value":"transform = tex`\nA = \\left(\\begin{matrix}\n \\color{${firstColor}} ${a} & \\color{${firstColor}} ${c} \\\\\n \\color{${secondColor}} ${b} & \\color{${secondColor}} ${d}\n\\end{matrix}\\right)\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":468,"value":"det = tex`\nDet(A) = {\\color{${firstColor}} ${a}} * {\\color{${secondColor}} ${d}} - {\\color{${secondColor}} ${b}} * {\\color{${firstColor}} ${c}} = \\bold{${format(a * d - b * c)}}\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":547,"value":"html`\n

\n ${viewof a}\n ${viewof c}\n ${viewof d}\n ${viewof b}\n

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":374,"value":"viewof grid = checkbox({\n options: [ { value: \"yes\", label: \"Coordinate grid\" }],\n value: gridInit\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":711,"value":"viewof image = text({ value: imageDefault, description: \"Image URL\", submit: \"Change Image\" })","pinned":false,"hidden":false,"mode":"ojs"},{"id":151,"value":"viewof reset = button(\"Reset to the identity transform\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":1102,"value":"md`Share your configuration with [this magic link](${link})!`","pinned":false,"hidden":false,"mode":"ojs"},{"id":783,"value":"md`\nWritten for Professor Alan Edelman's [MIT linear algebra class 18.06](https://mitmath.github.io/1806/) ([lecture slides](https://docs.google.com/presentation/d/1znZ9IuK7Th3bjMRttfuCbWT1gSQmwKLtLx-XLlbjp8k/edit#slide=id.p)).\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":253,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs"},{"id":11,"value":"import {text, slider, button, checkbox} from '@jashkenas/inputs'","pinned":false,"hidden":false,"mode":"ojs"},{"id":555,"value":"format = d3.format('.2')","pinned":false,"hidden":false,"mode":"ojs"},{"id":734,"value":"corgi = FileAttachment(\"image.png\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":1228,"value":"isCorgi = image === (await corgi.url())","pinned":false,"hidden":false,"mode":"ojs"},{"id":724,"value":"params = new URL(document.baseURI).searchParams","pinned":false,"hidden":false,"mode":"ojs"},{"id":118,"value":"slide = (value, description, min=-1.5, max=1.5) => slider({\n min,\n max,\n step: 0.1,\n value,\n description\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1137,"value":"mutable clicked = 0","pinned":false,"hidden":false,"mode":"ojs"},{"id":1121,"value":"resetAction = {\n reset\n \n if (mutable clicked) { \n viewof a.input.value = 1;\n viewof b.input.value = 0;\n viewof c.input.value = 0;\n viewof d.input.value = 1;\n } else {\n viewof a.input.value = aInit;\n viewof b.input.value = bInit;\n viewof c.input.value = cInit;\n viewof d.input.value = dInit;\n }\n \n ;[viewof a, viewof b, viewof c, viewof d].forEach(x => {\n x.dispatchEvent(new CustomEvent(\"input\"));\n }) \n \n mutable clicked = true\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":290,"value":"d3 = require('d3')","pinned":false,"hidden":false,"mode":"ojs"},{"id":451,"value":"firstColor = d3.schemeCategory10[0]","pinned":false,"hidden":false,"mode":"ojs"},{"id":454,"value":"secondColor = d3.schemeCategory10[3]","pinned":false,"hidden":false,"mode":"ojs"},{"id":893,"value":"aInit = +params.get(\"a\") || 1","pinned":false,"hidden":false,"mode":"ojs"},{"id":919,"value":"bInit = +params.get(\"b\") || 0","pinned":false,"hidden":false,"mode":"ojs"},{"id":920,"value":"cInit = +params.get(\"c\") || 0","pinned":false,"hidden":false,"mode":"ojs"},{"id":922,"value":"dInit = +params.get(\"d\") || 1","pinned":false,"hidden":false,"mode":"ojs"},{"id":973,"value":"imageDefault = params.get(\"image\") || corgi.url()","pinned":false,"hidden":false,"mode":"ojs"},{"id":976,"value":"gridInit = params.get(\"grid\") || \"yes\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1058,"value":"anyChanged = a !== aInit || b !== bInit || c !== cInit || d !== dInit || grid !== gridInit || image !== imageDefault","pinned":false,"hidden":false,"mode":"ojs"},{"id":964,"value":"link = {\n let url = new URL(document.baseURI)\n let params = url.searchParams\n params.set(\"a\", a)\n params.set(\"b\", b)\n params.set(\"c\", c)\n params.set(\"d\", d)\n params.set(\"image\", image)\n params.set(\"grid\", grid)\n // Right now this causes a security error due to sandboxing. I'm seeing whether there's an approach that works.\n // history.replaceState({ a, b, c, d, image, grid }, title.textContent, 'example-of-2d-linear-transforms');\n return url + ''\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":387,"value":"html`\n