29:null 2a:["$","title",null,{"children":"Example of 2D Linear Transforms | Yuri Vishnevsky | Observable"}] 2f: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`

` }30:[{"id":"a5aa599bf8a386015b4ef8b1e807edfa0c12c1e7ec89ee13829151cf944afb9847b07adf92d064a9e7206231c36927ae88bfdfbb71026f0bf5806ea9bbcf1966","href":"https://static.observableusercontent.com/files/a5aa599bf8a386015b4ef8b1e807edfa0c12c1e7ec89ee13829151cf944afb9847b07adf92d064a9e7206231c36927ae88bfdfbb71026f0bf5806ea9bbcf1966","name":"image.png","type":"image/png","lastModified":1578280436457.509,"size":492230}] 2d:{"id":"f372ba9d44a89c76","slug":"example-of-2d-linear-transforms","title":"Example of 2D Linear Transforms","thumbnail":"19366a0f704a2fc4aec5cc44b30d1e9fe5af72033acaf3a962a878f1a8c36443","access_level":"public","create_time":"$D2019-05-03T14:10:43.721Z","update_time":"$D2020-02-21T13:57:55.644Z","view_time":null,"first_public_time":"$D2019-05-03T14:32:37.636Z","has_unpublished_edits":null,"fork":true,"stars":14,"starred":false,"owner":{"type":"team","id":"106fc7e7a0f11e48","login":"yurivish","name":"Yuri Vishnevsky","avatar_url":"https://avatars-next.observableusercontent.com/c0c68df86cdf3364fbb25a90d00bb51b5aa7308a1ba7de3fa44d1ae591054612","tier":"starter_2024"},"version":1256,"publish_version":1256,"role":null,"authored":false,"authors":[{"type":"individual","id":"de2630f386f3cdb1","login":"yurivish","name":"Yuri Vishnevsky","avatar_url":"https://avatars-next.observableusercontent.com/c0c68df86cdf3364fbb25a90d00bb51b5aa7308a1ba7de3fa44d1ae591054612","tier":null}],"members":[{"type":"individual","id":"de2630f386f3cdb1","login":"yurivish","name":"Yuri Vishnevsky","avatar_url":"https://avatars-next.observableusercontent.com/c0c68df86cdf3364fbb25a90d00bb51b5aa7308a1ba7de3fa44d1ae591054612","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":2,"collection":null,"type":"notebook","body":{"title":"Example of 2D Linear Transforms","cells":[{"id":0,"value":"title = md`# Example of 2D Linear Transforms`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":98,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":374,"value":"viewof grid = checkbox({\n options: [ { value: \"yes\", label: \"Coordinate grid\" }],\n value: gridInit\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":711,"value":"viewof image = text({ value: imageDefault, description: \"Image URL\", submit: \"Change Image\" })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":151,"value":"viewof reset = button(\"Reset to the identity transform\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1102,"value":"md`Share your configuration with [this magic link](${link})!`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":253,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"import {text, slider, button, checkbox} from '@jashkenas/inputs'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":555,"value":"format = d3.format('.2')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":734,"value":"corgi = FileAttachment(\"image.png\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1228,"value":"isCorgi = image === (await corgi.url())","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":724,"value":"params = new URL(document.baseURI).searchParams","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1137,"value":"mutable clicked = 0","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":290,"value":"d3 = require('d3')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":451,"value":"firstColor = d3.schemeCategory10[0]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":454,"value":"secondColor = d3.schemeCategory10[3]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":893,"value":"aInit = +params.get(\"a\") || 1","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":919,"value":"bInit = +params.get(\"b\") || 0","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":920,"value":"cInit = +params.get(\"c\") || 0","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":922,"value":"dInit = +params.get(\"d\") || 1","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":973,"value":"imageDefault = params.get(\"image\") || corgi.url()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":976,"value":"gridInit = params.get(\"grid\") || \"yes\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1058,"value":"anyChanged = a !== aInit || b !== bInit || c !== cInit || d !== dInit || grid !== gridInit || image !== imageDefault","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":387,"value":"html`\n