31:Tb5f,viewof op_name = { var color = d3_colormap.interpolateRdBu var w = 45 var scale = 1 var gs = Math.ceil(Math.sqrt(atlas_xy.counts_x.length)) var model_x = (which_model == "x") var atlas; const div = d3.create("div") .style("position", "relative") .style("width", (w/scale*20) + "px") .style("height", (w/scale*20) + "px") .style("class", "node") var lx = [] for (var i = 0; i < 5000; i ++) { lx.push(atlas_xy.layout[i]) } var ly = [] for (var i = atlas_xy.layout.length/2; i < atlas_xy.layout.length/2+5000; i ++) { ly.push(atlas_xy.layout[i]) } var svg = div.append("svg") .style("width", (w/scale*20) + "px") .style("height", (w/scale*20) + "px") svg.selectAll(".node") .data(lx) .enter() .append("circle") .attr("cx", l => (w/scale*20)*l[1]) .attr("cy", l => (w/scale*20)*l[0]) .attr("r", 1) .attr("fill", "#fdae61") svg.selectAll(".node") .data(ly) .enter() .append("circle") .attr("cx", l => (w/scale*20)*l[1]) .attr("cy", l => (w/scale*20)*l[0]) .attr("r", 1) .attr("fill", "#74add1") function toxy(i) { return [i % gs, Math.floor(i/gs)] } function diff(d,i) { return (Math.max(d[1], d[2]) - Math.min(d[1], d[2])) } console.log(sim_diff) const nodes = div.selectAll(".node") .data(d3.zip(atlas_xy.coordinates, atlas_xy.counts_x, atlas_xy.counts_y)) .enter() .append("div") .style("position", "absolute") .style("width", w/scale + "px") .style("height", w/scale + "px") .style("border", d => {return "0.5px solid " + color((d[2] - d[1])/0.1 )}) .attr("class", "node") .style("top", d => {return ((w/scale)*d[0][0]) + "px"}) .style("left", d => {return ((w/scale)*d[0][1]) + "px"}) .append("div") .style("width", w/scale + "px") .style("height", w/scale + "px") .style("background", "url('https://storage.googleapis.com/clarity-public/ggoh/Diff/" + id + "/atlas_" + (model_x ? "x" : "y") + ".png')") .style("background-position-x", (d,i) => {return (-w*toxy(i)[0]/scale) + "px"}) .style("background-position-y", (d,i) => {return (-w*toxy(i)[1]/scale) + "px"}) .style("background-size", (45*gs/scale) + "px " + (45*gs/scale) + "px") .style("opacity", (d,i) => {if (sim_diff == "similarity") { return Math.pow(Math.min(d[1], d[2])/100,3) } else if (sim_diff == "difference") { return Math.pow(diff(d,i)/100,3) } else if (sim_diff == "none") { return 0.0 } else { return Math.pow((which_model == "x" ? d[1]: d[2])/100,3) }}) return div.node(); }32:[] 2f:{"title":"Layer Diffing - Inception V1","cells":[{"id":357,"value":"md`# Layer Diffing - Inception V1`","pinned":false,"hidden":false,"mode":"ojs"},{"id":559,"value":"viewof layer_x = radio({\n title: \"

Layer x

\",\n options: [\"mixed3a\", \"mixed3b\", \"mixed4a\", \"mixed4b\", \"mixed4c\", \"mixed4d\", \"mixed5a\", \"mixed5b\"],\n value: \"mixed3a\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":565,"value":"viewof layer_y = radio({\n title: \"

Layer y

\",\n options: [\"mixed3a\", \"mixed3b\", \"mixed4a\", \"mixed4b\", \"mixed4c\", \"mixed4d\", \"mixed5a\"],\n value: \"mixed3a\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":234,"value":"viewof which_model = radio({\n title: \"

Choose model (Inception vs Places)

\",\n options: [\"x\", \"y\"],\n value: \"y\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":387,"value":"viewof sim_diff = radio({\n title: \"

Meaning of Opacity

\",\n options: [\"similarity\", \"difference\", \"bin\", \"none\"],\n value: \"similarity\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":594,"value":"md`**${atlas_xy.model_x.replace(\"_\",\"-\")}** to **${atlas_xy.model_y.replace(\"_\",\"-\")}**: ${1 - atlas_xy.err_x[0]/atlas_xy.err_x[1]}\n\n**${atlas_xy.model_y.replace(\"_\",\"-\")}** to **${atlas_xy.model_x.replace(\"_\",\"-\")}**: ${1 - atlas_xy.err_y[0]/atlas_xy.err_y[1]}\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":0,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":720,"value":"md`Imports`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3,"value":"atlas_xy = {\n let manifest = await d3.json('https://storage.googleapis.com/clarity-public/ggoh/Diff/' + id + '/manifest_slim.json')\n return manifest\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":545,"value":"id = md5(`[[\"InceptionV1\", \"InceptionV1\"], [\"${layer_x}\", \"${layer_y}\"]]`)","pinned":false,"hidden":false,"mode":"ojs"},{"id":9,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":375,"value":"d3_colormap = require(\"d3-scale-chromatic\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":230,"value":"import {radio} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":535,"value":"md5 = require(\"blueimp-md5\")","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}