2a:T644,viewof layers = form(html`

`) // [('v0/model/v1/InceptionV1/InceptionV1/Mixed_3b/concat:0', 256), // ('v0/model/v1/InceptionV1/InceptionV1/Mixed_3c/concat:0', 480), // ('v0/model/v1/InceptionV1/InceptionV1/Mixed_4b/concat:0', 512), // ('v0/model/v1/InceptionV1/InceptionV1/Mixed_4c/concat:0', 512), // ('v0/model/v1/InceptionV1/InceptionV1/Mixed_4d/concat:0', 512), // ('v0/model/v1/InceptionV1/InceptionV1/Mixed_4e/concat:0', 528), // ('v0/model/v1/InceptionV1/InceptionV1/Mixed_4f/concat:0', 832), // ('v0/model/v1/InceptionV1/InceptionV1/Mixed_5b/concat:0', 832), // ('v0/model/v1/InceptionV1/InceptionV1/Mixed_5c/concat:0', 1024)]2b:Tc3a,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 layer1 = layers.layer_x var layer2 = layers.layer_y var w = 120 // Sprite width var scale = 0.7 // Scaling factor var img_x = 'https://storage.googleapis.com/clarity-public/ggoh/Diff_CCA/Michael/u_' + layer1 + '_' + layer2 + '_v0/model/v1/InceptionV1/InceptionV1/' + layer1 + '/concat:0.png' var img_y = 'https://storage.googleapis.com/clarity-public/ggoh/Diff_CCA/Michael/v_' + layer1 + '_' + layer2 + '_v0/model/v1/InceptionV1/InceptionV1/' + layer2 + '/concat:0.png' console.log(img_y) // var img_x = 'https://storage.googleapis.com/clarity-public/ggoh/Diff_CCA/Michael/u_Mixed_5c_Mixed_4f_v0/model/v1/InceptionV1/InceptionV1/Mixed_5c/concat:0.png' // var img_y = 'https://storage.googleapis.com/clarity-public/ggoh/Diff_CCA/Michael/v_Mixed_5c_Mixed_4f_v0/model/v1/InceptionV1/InceptionV1/Mixed_4f/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(); }2c:[] 29:{"title":"Diff of Michael's Models","cells":[{"id":0,"value":"md`# Diff of Michael's Models`","pinned":false,"hidden":false,"mode":"ojs"},{"id":316,"value":"$2a","pinned":false,"hidden":false,"mode":"ojs"},{"id":163,"value":"viewof object = form(html`

\n`)","pinned":false,"hidden":false,"mode":"ojs"},{"id":271,"value":"md`*Top* - Model with missing classes\n\n*Bottom* - Model with all classes`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2,"value":"$2b","pinned":false,"hidden":false,"mode":"ojs"},{"id":356,"value":"{\n const width = 600\n const height = width / 1.6;\n const margin = {top: 20, right: 30, bottom: 30, left: 40};\n \n const x = d3.scaleLinear()\n .domain([0,280])\n .range([margin.left, width - margin.right]);\n \n const y = d3.scaleLinear()\n .domain([0,2]).nice()\n .range([height - margin.bottom, margin.top]);\n \n const svg = d3.select(DOM.svg(width, height));\n\n svg.append(\"g\")\n .attr(\"transform\", `translate(0,${height - margin.bottom})`)\n .call(d3.axisBottom(x));\n\n svg.append(\"g\")\n .attr(\"transform\", `translate(${margin.left},0)`)\n .call(d3.axisLeft(y));\n \n svg.append(\"path\")\n .datum(sxy)\n .attr(\"fill\", \"none\")\n .attr(\"stroke\", \"steelblue\")\n .attr(\"stroke-width\", 1.5)\n .attr(\"stroke-linejoin\", \"round\")\n .attr(\"stroke-linecap\", \"round\")\n .attr(\"d\", d3.line()\n .x((d,i) => x(i))\n .y((d,i) => y(d)));\n \n return svg.node();\n}","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/Michael/S_' + layers.layer_x + '_' + layers.layer_y + '.json')\n return sxy\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":335,"value":"syx = {\n let syx = await d3.json('https://storage.googleapis.com/clarity-public/ggoh/Diff_CCA/Michael/S_' + layers.layer_y + '_' + layers.layer_x + '.json')\n return syx\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":164,"value":"import {form} from \"@mbostock/form-input\"","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W2c","stdlib":"1","titling":"auto"}