30: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(); }31:[] 2e:{"title":"Linear Transform Explorer","cells":[{"id":0,"value":"md`# Linear Transform Explorer`","pinned":false,"hidden":false,"mode":"ojs"},{"id":163,"value":"viewof object = form(html`

\n`)","pinned":false,"hidden":false,"mode":"ojs"},{"id":2,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":5,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":164,"value":"import {form} from \"@mbostock/form-input\"","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}