4e:I[132969,["$2"],"IconMark"] 25:["$","title",null,{"children":"Linear Transform Explorer | Gabriel Goh | Observable"}] 4c:T9e7,viewof op_name = { var r = [object.x1, object.x2, object.x3, object.x4, object.x5, object.x6, object.x7, object.x8] var vals = r.map((d) => {return sxy[d]}) console.log(r, vals) var w = 120 // Sprite width var scale = 0.7 // Scaling factor var img_x = 'https://storage.googleapis.com/clarity-public/ggoh/Diff_CCA/uxy_mixed4a.png' var img_y = 'https://storage.googleapis.com/clarity-public/ggoh/Diff_CCA/vxy_mixed3a.png' var img = img_x var x = await loadImage(img) var grid_size = x.height/w function toxy(i) { return [i % grid_size, Math.floor(i/grid_size)] } const div = d3.create("div") .style("position", "relative") .style("width", (500) + "px") .style("height", (2*(w*scale + 50) ) + "px") .style("class", "node") const nodes_side = div.selectAll(".node") .data(d3.zip(r, vals) ) .enter() .append("div") .style("position", "absolute") .style("left", (d,i) => {return (w*scale+10)*i + "px"}) .style("top", "12px") nodes_side.append("div") .text((d,i) => {return d[0]}) .style("font-weight", "bold") nodes_side.append("div") .text((d,i) => {return (d[1].toFixed(5))}) const nodes_top = div.selectAll(".node") .data(r) .enter() .append("div") .style("position", "absolute") .style("left", (d,i) => {return (w*scale+10)*i + "px"}) .style("top", "65px") .style("border", "1px solid black") .style("width", (w*scale) + "px") .style("height", (w*scale) + "px") .style("background", "url('" + img_x + "')") .style("background-position-x", (d,i) => {return (-w*toxy(d)[0]*scale) + "px"}) .style("background-position-y", (d,i) => {return (-w*toxy(d)[1]*scale) + "px"}) .style("background-size", (w*grid_size*scale) + "px " + (w*grid_size*scale) + "px") const nodes_bottom = div.selectAll(".node") .data(r) .enter() .append("div") .style("position", "absolute") .style("left", (d,i) => {return (w*scale+10)*i + "px"}) .style("top", w*scale + 75 + "px") .style("border", "1px solid black") .style("width", (w*scale) + "px") .style("height", (w*scale) + "px") .style("background", "url('" + img_y + "')") .style("background-position-x", (d,i) => {return (-w*toxy(d)[0]*scale) + "px"}) .style("background-position-y", (d,i) => {return (-w*toxy(d)[1]*scale) + "px"}) .style("background-size", (w*grid_size*scale) + "px " + (w*grid_size*scale) + "px") return div.node(); }4d:[] 48:{"id":"f18afbfb4bdb9d84","slug":"linear-basis","title":"Linear Transform Explorer","thumbnail":"497c68df5219382a71d9f3eb0857633dafc8b9b8c0dd35f2849bf64b9d0356ec","access_level":"public","create_time":"$D2019-08-02T11:38:03.158Z","update_time":"$D2019-08-02T21:23:52.569Z","view_time":null,"first_public_time":"$D2019-08-02T11:38:08.148Z","has_unpublished_edits":null,"fork":{"id":"e7d63398ea57ca98","slug":"spritesheet-starter","title":"","owner":{"id":"9c13863413ce0efc","login":"gabgoh","name":"Gabriel Goh"}},"stars":1,"starred":false,"owner":{"type":"team","id":"9c13863413ce0efc","login":"gabgoh","name":"Gabriel Goh","avatar_url":"https://avatars-next.observableusercontent.com/ab611ba48a70463bffcb88ed3488c98d02e1b501b177d429201cd81887cf7278","tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":248,"publish_version":248,"role":null,"authored":false,"authors":[{"type":"individual","id":"2df613a7e593474f","login":"gabgoh","name":"Gabriel Goh","avatar_url":"https://avatars-next.observableusercontent.com/ab611ba48a70463bffcb88ed3488c98d02e1b501b177d429201cd81887cf7278","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"2df613a7e593474f","login":"gabgoh","name":"Gabriel Goh","avatar_url":"https://avatars-next.observableusercontent.com/ab611ba48a70463bffcb88ed3488c98d02e1b501b177d429201cd81887cf7278","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Linear Transform Explorer","cells":[{"id":0,"value":"md`# Linear Transform Explorer`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":163,"value":"viewof object = form(html`

\n`)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":"$4c","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":57,"value":"function loadImage(url) {\n return new Promise(resolve => {\n const image = new Image();\n image.addEventListener('load', () => {\n resolve(image);\n });\n image.src = url; \n return image.width, image.height\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":135,"value":"sxy = {\n let sxy = await d3.json('https://storage.googleapis.com/clarity-public/ggoh/Diff_CCA/S_XY.json')\n return sxy\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":164,"value":"import {form} from \"@mbostock/form-input\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4d","stdlib":"1"}} 24:null 3d:[["$","title","0",{"children":"Linear Transform Explorer | Gabriel Goh | Observable"}],["$","meta","1",{"property":"og:title","content":"Linear Transform Explorer"}],["$","meta","2",{"property":"og:description","content":"An Observable notebook by Gabriel Goh"}],["$","meta","3",{"property":"og:url","content":"https://observablehq.com/@gabgoh/linear-basis"}],["$","meta","4",{"property":"og:site_name","content":"Observable"}],["$","meta","5",{"property":"og:image","content":"https://images.observableusercontent.com/thumbnail/497c68df5219382a71d9f3eb0857633dafc8b9b8c0dd35f2849bf64b9d0356ec.jpg"}],["$","meta","6",{"property":"og:image:width","content":"640"}],["$","meta","7",{"property":"og:image:height","content":"400"}],["$","meta","8",{"property":"og:type","content":"article"}],["$","meta","9",{"name":"twitter:card","content":"summary_large_image"}],["$","meta","10",{"name":"twitter:title","content":"Linear Transform Explorer"}],["$","meta","11",{"name":"twitter:description","content":"An Observable notebook by Gabriel Goh"}],["$","meta","12",{"name":"twitter:image","content":"https://images.observableusercontent.com/thumbnail/497c68df5219382a71d9f3eb0857633dafc8b9b8c0dd35f2849bf64b9d0356ec.jpg"}],["$","meta","13",{"name":"twitter:image:width","content":"640"}],["$","meta","14",{"name":"twitter:image:height","content":"400"}],["$","link","15",{"rel":"icon","href":"/favicon.ico?favicon.2hqc0rwsy9zm6.ico","sizes":"96x96","type":"image/x-icon"}],["$","link","16",{"rel":"icon","href":"/icon.png?icon.1mhghqfpotdlb.png","sizes":"512x512","type":"image/png"}],["$","$L4e","17",{}]] 4b:null