2d:null 2e:["$","title",null,{"children":"Linear Transform Explorer | Gabriel Goh | Observable"}] 33: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/vxy_mixed4a.png' var img_y = 'https://storage.googleapis.com/clarity-public/ggoh/Diff_CCA/uxy_mixed4d.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(); }34:[] 31:{"id":"f738a79735b66e8c","slug":"linear-transform-explorer","title":"Linear Transform Explorer","thumbnail":"78f78d74ef9da1524fa58c18903679ba622d080d65d013fcfebfe885e3ea2144","access_level":"public","create_time":"$D2019-08-02T11:46:53.008Z","update_time":"$D2019-08-02T12:02:20.995Z","view_time":null,"first_public_time":"$D2019-08-02T11:46:56.783Z","has_unpublished_edits":null,"fork":{"id":"f18afbfb4bdb9d84","slug":"linear-basis","title":"Linear Transform Explorer","owner":{"id":"9c13863413ce0efc","login":"gabgoh","name":"Gabriel Goh"}},"stars":0,"starred":false,"owner":{"type":"team","id":"9c13863413ce0efc","login":"gabgoh","name":"Gabriel Goh","avatar_url":"https://avatars-next.observableusercontent.com/ab611ba48a70463bffcb88ed3488c98d02e1b501b177d429201cd81887cf7278","tier":"starter_2024"},"version":254,"publish_version":254,"role":null,"authored":false,"authors":[{"type":"individual","id":"2df613a7e593474f","login":"gabgoh","name":"Gabriel Goh","avatar_url":"https://avatars-next.observableusercontent.com/ab611ba48a70463bffcb88ed3488c98d02e1b501b177d429201cd81887cf7278","tier":null}],"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":{"title":"Linear Transform Explorer","cells":[{"id":0,"value":"md`# Linear Transform Explorer`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":163,"value":"viewof object = form(html`

\n`)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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","output":"$undefined","database":"$undefined"},{"id":5,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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","output":"$undefined","database":"$undefined"},{"id":164,"value":"import {form} from \"@mbostock/form-input\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 32:"$31:body"