2d:null 2e:["$","title",null,{"children":"Diff of Michael's Models | Gabriel Goh | Observable"}] 33:Ta53,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/Michael/uxy_v0/model/v1/InceptionV1/InceptionV1/Mixed_4e/concat:0.png' var img_y = 'https://storage.googleapis.com/clarity-public/ggoh/Diff_CCA/Michael/vxy_v0/model/v1/InceptionV1/InceptionV1/Mixed_4e/concat:0.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:Ta54,viewof op_name2 = { 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/Michael/uyx_v0/model/v1/InceptionV1/InceptionV1/Mixed_4e/concat:0.png' var img_y = 'https://storage.googleapis.com/clarity-public/ggoh/Diff_CCA/Michael/vyx_v0/model/v1/InceptionV1/InceptionV1/Mixed_4e/concat:0.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(); }35:[] 31:{"id":"84f141223c1c101d","slug":"diff-of-michaels-models","title":"Diff of Michael's Models","thumbnail":"0ddc5bb3b036caa52cf56a518cc1dd2524046ae6ed24e7f4cb8f2c68917184a9","access_level":"public","create_time":"$D2019-08-06T10:30:02.015Z","update_time":"$D2019-08-06T11:31:16.308Z","view_time":null,"first_public_time":"$D2019-08-06T11:31:26.817Z","has_unpublished_edits":null,"fork":{"id":"f738a79735b66e8c","slug":"linear-transform-explorer","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":284,"publish_version":284,"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":2,"collection":null,"type":"notebook","body":{"title":"Diff of Michael's Models","cells":[{"id":0,"value":"md`# Diff of Michael's Models`","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":271,"value":"md`Top - Model with missing classes\n\nBottom - Model with all classes`","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":277,"value":"md`Top - Model with all classes\n\nBottom - Model with missing classes`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":262,"value":"$34","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/Michael/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":"$W35","stdlib":"1","titling":"auto"}} 32:"$31:body"