32:Tf10,viewof op_name = { var i = filtered[object.i] var w = 224 // Sprite width var scale = 1 // Scaling factor var img = 'https://storage.googleapis.com/clarity-public/sparse/im.png' var x = await loadImage(img) var grid_size = x.height/w var img_codes = "https://storage.googleapis.com/clarity-public/ggoh/sparse/codes.png" var codes_img = await loadImage(img_codes) var grid_size_codes = x.height/80 function toxy(i) { return [i % grid_size, Math.floor(i/grid_size)] } const div = d3.create("div") .style("position", "relative") .style("width", (400) + "px") .style("height", (w*scale + 60) + "px") .style("class", "node") const nodes = div.selectAll(".node") .data([i]) .enter() .append("div") .style("position", "absolute") .style("left", d => {return "0px"}) .style("top", d => {return "25px"}) .style("border", "0px solid black") .style("width", (w*scale) + "px") .style("height", (w*scale) + "px") .style("background", "url('" + img + "')") .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") var codei = codes[i] var vali = values[i] const nodes2 = div.append("div") nodes2.attr("class", "grid") .style("height", "100px") .style("width", "100px") .style("display", "grid") .style("grid-gap", "10px") .style("grid-template", "repeat(3, 1fr) / repeat(1, 1fr)") .style("grid-auto-flow", "column") .style("position", "absolute") .style("left", "280px") nodes2.selectAll(".node") .data(d3.zip(codei,vali) ) .enter() .append("div") .style("border", "1px solid grey") .style("width", (80*scale) + "px") .style("height", (80*scale) + "px") .style("background", "url('" + img_codes + "')") .style("background-position-x", (d,i) => {return (-80*toxy(d[0])[0]*scale) + "px"}) .style("background-position-y", (d,i) => {return (-80*toxy(d[0])[1]*scale) + "px"}) .style("background-size", (80*grid_size*scale) + "px " + (80*grid_size*scale) + "px") .text((d,i) => d[0] + " " + (10000*d[1]).toFixed(2)) var img_reconstruct = "https://storage.googleapis.com/clarity-public/ggoh/sparse/reconstruct.png" nodes.selectAll(".node") .data([i]) .enter() .append("div") .style("position", "absolute") .style("left", d => {return "600px"}) .style("top", d => {return "100px"}) .style("border", "1px solid grey") .style("width", (80*scale) + "px") .style("height", (80*scale) + "px") .style("background", "url('" + img_reconstruct + "')") .style("background-position-x", (d,i) => {return (-80*toxy(d)[0]*scale) + "px"}) .style("background-position-y", (d,i) => {return (-80*toxy(d)[1]*scale) + "px"}) .style("background-size", (80*grid_size*scale) + "px " + (80*grid_size*scale) + "px") var img_original = "https://storage.googleapis.com/clarity-public/ggoh/sparse/original.png" nodes.selectAll(".node") .data([i]) .enter() .append("div") .style("position", "absolute") .style("left", d => {return "600px"}) .style("top", d => {return "0px"}) .style("border", "1px solid grey") .style("width", (80*scale) + "px") .style("height", (80*scale) + "px") .style("background", "url('" + img_original + "')") .style("background-position-x", (d,i) => {return (-80*toxy(d)[0]*scale) + "px"}) .style("background-position-y", (d,i) => {return (-80*toxy(d)[1]*scale) + "px"}) .style("background-size", (80*grid_size*scale) + "px " + (80*grid_size*scale) + "px") return div.node(); }33:T684,viewof op_name2 = { var i = filtered[object.i] var w = 224 // Sprite width var scale = 1 // Scaling factor var img = 'https://storage.googleapis.com/clarity-public/sparse/im.png' var x = await loadImage(img) var grid_size = x.height/w var img_codes = "https://storage.googleapis.com/clarity-public/ggoh/sparse/codes.png" var codes_img = await loadImage(img_codes) var grid_size_codes = x.height/80 function toxy(i) { return [i % grid_size, Math.floor(i/grid_size)] } const div = d3.create("div") .style("position", "relative") .style("width", (400) + "px") .style("height", (100) + "px") .style("class", "node") var codei = codes[i] const nodes2 = div.append("div") nodes2.attr("class", "grid") .style("height", "100px") .style("width", "100px") .style("display", "grid") .style("grid-gap", "10px") .style("grid-template", "repeat(3, 1fr) / repeat(1, 1fr)") .style("grid-auto-flow", "column") .style("position", "absolute") .style("left", "0px") nodes2.selectAll(".node") .data([basis]) .enter() .append("div") .style("border", "1px solid grey") .style("width", (80*scale) + "px") .style("height", (80*scale) + "px") .style("background", "url('" + img_codes + "')") .style("background-position-x", (d,i) => {return (-80*toxy(d)[0]*scale) + "px"}) .style("background-position-y", (d,i) => {return (-80*toxy(d)[1]*scale) + "px"}) .style("background-size", (80*grid_size*scale) + "px " + (80*grid_size*scale) + "px") return div.node(); }34:[] 31:{"title":"Untitled","cells":[{"id":0,"value":"md`# Untitled`","pinned":false,"hidden":false,"mode":"ojs"},{"id":180,"value":"viewof object = form(html`

${filtered.length-1}

\n`)","pinned":false,"hidden":false,"mode":"ojs"},{"id":241,"value":"basis = 47","pinned":false,"hidden":false,"mode":"ojs"},{"id":2,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":230,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":190,"value":"filtered = {\n var x = []\n var y = []\n for (var i = 0; i < 1000; i++) {\n if (codes[i].includes(basis)){\n x.push(i)\n y.push(values[i][codes[i].indexOf(basis)])\n }\n }\n x = x.sort(function(a, b){ \n return y[x.indexOf(b)] - y[x.indexOf(a)];\n });\n \n return x\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":60,"value":"codes = {\n let codes = await d3.json('https://storage.googleapis.com/clarity-public/ggoh/sparse/codes.json')\n return codes\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":65,"value":"values = {\n let codes = await d3.json('https://storage.googleapis.com/clarity-public/ggoh/sparse/values.json')\n return codes\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":183,"value":"import {form} from \"@mbostock/form-input\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"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":4,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W34","stdlib":"1","titling":"auto"}