31:T606,layerNav = { var svg = DOM.svg(960, 300); var g = d3.select(svg).append("g") //var cellg = d3.select(svg).append("g") //cellg //.style("transform", "translate(40px," + (190 - yt) + "px) rotateX(60deg) rotateZ(-30deg) scale(0.8)") // .style("stroke", "#111") //renderLayer(cellg, layers[layerNames[0]], 200) var lw = 120 + layerWidth var dx = 5 + deltaX var dy = lw + deltaY var rY = -55 + rotateY var rZ = -10 + rotateZ var sY = -25 + skewY var list = layerNames.concat(["input"]) list.reverse() var layergs = g.selectAll("g.layername") .data(list) .enter().append("g").classed("layername", true) .each(function(ln) { var dis = d3.select(this) dis.append("rect").attr("width", lw).attr("height", 20) .attr("y", -25) .style("fill", "#fff").style("stroke", "#111") dis.append("text").text(ln) .attr("dy", -10).attr("dx", 5) var rects = dis.append("g").classed("rects", true) if(ln == "input") { dis.append("image") .attr("href", "https://storage.googleapis.com/fun-data/distill/" + input + ".png") .style("transform", `scale(${lw/448})`) } else { renderLayer(rects, layers[ln], lw) } }) .style("transform", function(ln, i) { return `translate(${(30 + (lw/2.5+dx) * i)}px,${dy}px) rotateY(${rY}deg) rotateZ(${rZ}deg) skewY(${sY}deg) scale(1)` }) .select("g.rects") .style("stroke", "#fff") .style("stroke-width", 0.5) .style("stroke-opacity", 1) .style("fill", "#bbb") return svg; }32:Tcd3,layerNav2 = { var svg = DOM.svg(960, 500); var g = d3.select(svg).append("g") var filter = ` ` d3.select(svg).append("defs").html(filter) var list = layerNames.concat(["input"]) list.reverse() var lw = 224 var startingY = lw + startY - 110 var dy = 15 + deltaY2 var rX = -55 + rotateX var rZ = -24 + rotateZ2 var sY = -9 + skewY2 var scale = 1.3 + scaler var layergs = g.selectAll("g.layername") .data(list) .enter().append("g").classed("layername", true) layergs .each(function(ln) { var dis = d3.select(this) var textg = dis.append("g").classed("textg", true) .style("display", "none") .style("font-family", "Roboto") textg.append("rect").attr("width", lw + 25) .attr("height", 20) .attr("y", lw - 20) .attr("x", lw + 5) .style("fill", "#fff") //.style("stroke", "#111") var txt = `${ln}` if(ln != "input") { txt += `: ${layers[ln].dim}x${layers[ln].dim}` } textg.append("text").text(txt) .attr("dy", lw - 5) .attr("dx", lw + 10) var rects = dis.append("g").classed("rects", true) if(ln == "input") { dis.append("image") .attr("href", "https://storage.googleapis.com/fun-data/distill/" + input + ".png") .style("transform", `scale(${lw/448})`) } else { renderLayer(rects, layers[ln], lw) } }) .style("transform", function(ln, i) { if(i == 3) { //return `translate(${lw/2 + 200}px,${50 + startingY + dy * (list.length - i)}px) rotateX(${rX}deg) rotateZ(${rZ}deg) skewY(${sY}deg) scale(${scale})` } return `translate(${lw/2}px,${startingY + dy * (list.length - i)}px) rotateX(${rX}deg) rotateZ(${rZ}deg) skewY(${sY}deg) scale(${scale})` }) .on("mouseover", function(d,i) { var dis = d3.select(this) layergs.style("opacity", function(d, j) { if(j > i) return 0.1 return 1 }) dis.select("g.rects") .style("fill", "#999") .style("stroke", "#fff") .style("stroke-opacity", 0.9) dis.select("g.textg") .style("display", "") dis//.transition().duration(200) //.style("transform", `translate(${lw/2 + 50}px,${50 + startingY + dy * (list.length - i)}px)rotateX(${rX}deg) rotateZ(${rZ}deg)skewY(${sY}deg)scale(${scale})`) }).on("mouseout", function(d,i) { layergs.style("opacity", 1) var dis = d3.select(this) dis.select("g.rects") .style("fill", "#aaa") .style("stroke", "#fefefe") .style("stroke-opacity", 0.5) dis.select("g.textg") .style("display", "none") //dis.style("transform", `translate(${lw/2}px,${startingY + dy * (list.length - i)}px) rotateX(${rX}deg) rotateZ(${rZ}deg) skewY(${sY}deg) scale(${scale})`) }) .select("g.rects") .attr("filter", "url(#dropshadow)") .style("stroke", "#fefefe") //.style("stroke-width", 1) .style("stroke-opacity", 0.5) .style("fill", "#aaa") return svg; }33:T9ae,renderChannelStack = function(stackdiv, l, h) { // render the stack of channels used for navigation (show feature icons from sprite) var pxScale = d3.scaleLinear() .domain([0, l.channels]) .range([0,h]) //window.console.log(spriteUrl(l.name, 40)) var offset = Math.round(l.channels/7) var startingY = 5 var lw = 40; var spriteSize = 40; var dy = h/l.channels; var rX = -55 var rZ = -35 var sY = -10 var scale = 1; var channels = stackdiv.selectAll("div.channel") .data(d3.range(l.channels)) .enter().append("div").classed("channel", true) //.style("border", "1px solid black") .style("width", `${lw}px`).style("height", `${lw}px`) .style("position", "absolute") //.style("background", "rgba(255,255,255, 0.4)") .style("background", `url(${spriteUrl(l.name, spriteSize)})`) .style("background-position", function(d,i) { var x = (i % 100) * spriteSize var y = Math.floor(i/100) * spriteSize return `-${x}px -${y}px` }) .style("transform", function(d, i) { var x = lw/2 var y = startingY + dy * (l.channels - i) return `translate(${x}px,${y}px) rotateX(${rX}deg) rotateZ(${rZ}deg) skewY(${sY}deg) scale(${scale})` }) var mouseScale = d3.scaleLinear() .domain([lw/2 + startingY, h]) .range([0, l.channels]) .clamp(true) var fadeScale = d3.scaleLinear() .domain([1, Math.round(offset/2), offset]) .range([0, 0.01, 0.2]) stackdiv.on("mousemove", function() { var mouse = d3.mouse(this) var index = Math.round(mouseScale(mouse[1])) //window.console.log("mouse", mouse[1], index) channels .style("opacity", function(d,i) { var thisIndex = l.channels - i; if(thisIndex < index - offset) { return 0.2 } else if(thisIndex < index) { return fadeScale(index - thisIndex) } return 1 }) /* .style("transform", function(d, i) { var x = lw/2 var y = startingY + dy * (l.channels - i) if(l.channels - i === index) return `translate(${x}px,${y}px)scale(${scale})` return `translate(${x}px,${y}px) rotateX(${rX}deg) rotateZ(${rZ}deg) skewY(${sY}deg) scale(${scale})` }) */ }).on("mouseout", function() { channels.style("opacity", 1) /* .style("transform", function(d, i) { var x = lw/2 var y = startingY + dy * (l.channels - i) return `translate(${x}px,${y}px) rotateX(${rX}deg) rotateZ(${rZ}deg) skewY(${sY}deg) scale(${scale})` }) */ }) //channels.append("rect") // }34:Tcb8,{ var h = 600; var layer = layers[stacklayeracts] var div = html`

` var dis = d3.select(div) .style("position", "relative") .style("height", h + "px") .style("width", "100px") var imgUrl = "https://storage.googleapis.com/fun-data/distill/" + input + ".png" var image = dis.append("img") .attr("src", imgUrl) .attr("width", "200px").attr("height", "200px") .style("position", "absolute") .style("top", "50px") .style("left", "200px") var svg = dis.append("svg") .attr("width", 400).attr("height", 400) .style("position", "absolute") .style("top", "50px") .style("left", "200px") renderLayerCells(svg, layer, 220) // TODO render image (canvas?) var img = new Image(); img.crossOrigin = "Anonymous" img.src = imgUrl var hcanvas = document.createElement("canvas"); var hctx = hcanvas.getContext('2d'); var hscale = d3.scaleLinear() .domain([0, 200]) img.onload = function() { hcanvas.width = img.width hcanvas.height = img.height hscale.range([0, img.width]) console.log("sup", img.width, img.height) hctx.drawImage(img, 0, 0); img.style.display = 'none'; var data = hctx.getImageData(0, 0, img.width, img.height) console.log("img data!", data) } /* var canvas = document.createElement('canvas'); var context = canvas.getContext('2d'); var img = image.node() img.crossOrigin = "Anonymous" canvas.width = img.width; canvas.height = img.height; console.log("IMG WH", img.width, img.height) context.drawImage(img, 0, 0 ); var myData = context.getImageData(0, 0, img.width, img.height); console.log("mydata", myData) */ // Render the hovered pixels var canvas = dis.append("canvas") .style("position", "absolute") .style("top", "270px") .style("left", "200px") .node() canvas.width = 100 canvas.height = 100 var ctx = canvas.getContext("2d") var tcanvas = document.createElement("canvas") // TODO: stylize differently. show grid lines only on hover // color in square on hover, render pixels // TODO: render in canvas to allow blend modes? svg.select("rect.bg").style("fill-opacity", 0) svg.selectAll("rect.cell") .style("fill", "#999") .style("fill-opacity", 0.01) .style("stroke", "#fff") .style("stroke-width", 1) .on("mouseover", function(d) { renderChannelStackActivations(dis, layer, d.i, d.j, h - 50) // renderChannelHistoActivations() var di = d3.select(this) di.style("fill", "#fff").style("fill-opacity", 0.9) var x = Math.round(hscale(di.attr("x"))) var y = Math.round(hscale(di.attr("y"))) var w = Math.round(hscale(di.attr("width"))) var imgdata = hctx.getImageData(x,y,w,w) console.log("x,y,w,h", x,y, w, imgdata) tcanvas.width = imgdata.width tcanvas.height = imgdata.height var tctx = tcanvas.getContext("2d") tctx.putImageData(imgdata, 0, 0) ctx.clearRect(0,0,100,100) ctx.save() ctx.scale(100/w, 100/w) ctx.drawImage(tcanvas, 0, 0) ctx.restore() }).on("mouseout", function(d) { d3.select(this).style("fill", "#999").style("fill-opacity", 0.01) ctx.clearRect(0,0,100,100) }) var xi = 0 var yi = 0 renderChannelStackActivations(dis, layer, xi, yi, h - 50) return div; }35:Tb9a,renderChannelStackActivations = function(stackdiv, l, xi, yi, h) { // render the stack of channels used for navigation (show feature icons from sprite) var activations = acts[l.name]; var channelActs = activations[0][xi][yi] //console.log("channel acts", channelActs) var max = d3.max(activations[0], function(d) { return d3.max(d, function(c) { return d3.max(c) }) }) var actScale = d3.scaleLinear() .domain([0, max ]) .range([0, 1]) var pxScale = d3.scaleLinear() .domain([0, l.channels]) .range([0,h]) //window.console.log(spriteUrl(l.name, 40)) var offset = Math.round(l.channels/7) var startingY = 5 var lw = 40; var spriteSize = 40; var dy = h/l.channels; var rX = -55 var rZ = -35 var sY = -10 var scale = 1; var channels = stackdiv.selectAll("div.channel") .data(channelActs) //.data(d3.range(l.channels)) var channelsE = channels.enter().append("div").classed("channel", true) //.style("border", "1px solid black") .style("width", `${lw}px`).style("height", `${lw}px`) .style("position", "absolute") //.style("background", "rgba(255,255,255, 0.4)") .style("background", `url(${spriteUrl(l.name, spriteSize)})`) .style("background-position", function(d,i) { var x = (i % 100) * spriteSize var y = Math.floor(i/100) * spriteSize return `-${x}px -${y}px` }) .style("transform", function(d, i) { var x = lw/2 var y = startingY + dy * (l.channels - i) return `translate(${x}px,${y}px) rotateX(${rX}deg) rotateZ(${rZ}deg) skewY(${sY}deg) scale(${scale})` }) channels = channelsE.merge(channels) channels .style("opacity", function(d,i) { return actScale(d) }) var mouseScale = d3.scaleLinear() .domain([lw/2 + startingY, h]) .range([0, l.channels]) .clamp(true) var fadeScale = d3.scaleLinear() .domain([1, Math.round(offset/2), offset]) .range([0, 0.01, 0.2]) stackdiv.on("mousemove", function() { var mouse = d3.mouse(this) var index = Math.round(mouseScale(mouse[1])) //window.console.log("mouse", mouse[1], index) channels /* .style("opacity", function(d,i) { var thisIndex = l.channels - i; if(thisIndex < index - offset) { return 0.2 } else if(thisIndex < index) { return fadeScale(index - thisIndex) } return 1 }) */ /* .style("transform", function(d, i) { var x = lw/2 var y = startingY + dy * (l.channels - i) if(l.channels - i === index) return `translate(${x}px,${y}px)scale(${scale})` return `translate(${x}px,${y}px) rotateX(${rX}deg) rotateZ(${rZ}deg) skewY(${sY}deg) scale(${scale})` }) */ }).on("mouseout", function() { //channels.style("opacity", 1) /* .style("transform", function(d, i) { var x = lw/2 var y = startingY + dy * (l.channels - i) return `translate(${x}px,${y}px) rotateX(${rX}deg) rotateZ(${rZ}deg) skewY(${sY}deg) scale(${scale})` }) */ }) //channels.append("rect") // }36:T4e3,renderLayerCells = function(cellg, l, w) { // l is the layer with { dim: X, channels: Y } var pxScale = d3.scaleBand() .domain(d3.range(l.dim+1)) // .domain([0, l.dim]) .range([0,w]) .paddingInner(0.0) // .paddingOuter(0.0) cellg.append("rect").classed("bg", true) .attr("width", pxScale(l.dim)) .attr("height", pxScale(l.dim)) var flat = [] d3.range(l.dim).forEach(function(row, i) { d3.range(l.dim).forEach(function(element, j) { flat.push({ v: 0, i: i, j: j }) }) }) var cells = cellg.selectAll("rect.cell") .data(flat) cells.exit() .remove(); var cellsE = cells.enter() .append("rect").classed("cell", true) .attr("x", function(d) { return pxScale(d.j) }) .attr("y", function(d) { return pxScale(d.i) }) //.style("fill-opacity", 0.4) //.style("stroke", "#000") //.style("stroke-width", 1) cells = cellsE.merge(cells); cells .attr("x", function(d) { return pxScale(d.j) }) .attr("y", function(d) { return pxScale(d.i) }) .attr("width", pxScale.bandwidth()) .attr("height", pxScale.bandwidth()) //.attr("fill", "#666") }37:T75b,renderLayer = function(cellg, l, w) { // l is the layer with { dim: X, channels: Y } var pxScale = d3.scaleLinear() // .domain(d3.range(l.dim+1)) .domain([0, l.dim]) .range([0,w]) // .paddingInner(0.0) // .paddingOuter(0.0) cellg.append("rect") .attr("width", pxScale(l.dim)) .attr("height", pxScale(l.dim)) cellg.selectAll("line.vertical").data(d3.range(l.dim+1)) .enter().append("line").classed("vertical", true) .attr("x1", function(i) { return pxScale(i) }) .attr("y1", function(i) { return pxScale(0) }) .attr("x2", function(i) { return pxScale(i) }) .attr("y2", function(i) { return pxScale(l.dim) }) cellg.selectAll("line.horizontal").data(d3.range(l.dim+1)) .enter().append("line").classed("horizontal", true) .attr("x1", function(i) { return pxScale(0) }) .attr("y1", function(i) { return pxScale(i) }) .attr("x2", function(i) { return pxScale(l.dim) }) .attr("y2", function(i) { return pxScale(i) }) /* var flat = [] d3.range(l.dim).forEach(function(row, i) { d3.range(l.dim).forEach(function(element, j) { flat.push({ v: 0, i: i, j: j }) }) }) var cells = cellg.selectAll("rect.cell") .data(flat) cells.exit() .remove(); var cellsE = cells.enter() .append("rect").classed("cell", true) .attr("x", function(d) { return pxScale(d.j) }) .attr("y", function(d) { return pxScale(d.i) }) //.style("fill-opacity", 0.4) //.style("stroke", "#000") //.style("stroke-width", 1) cells = cellsE.merge(cells); cells .attr("x", function(d) { return pxScale(d.j) }) .attr("y", function(d) { return pxScale(d.i) }) .attr("width", pxScale.bandwidth()) .attr("height", pxScale.bandwidth()) //.attr("fill", "#666") */ }38:T4e4,function renderCells(cellg, flat, pxScale) { if(!pxScale) pxScale = pixScale; var colorScale = d3.scaleSequential(d3.interpolateInferno) .domain(d3.extent(flat, function(d){ return d.v })) var heightScale = d3.scaleLinear() .domain(d3.extent(flat, function(d) { return d.v })) .range([0, -60]) var cells = cellg.selectAll("rect.cell") .data(flat) cells.exit() .remove(); var cellsE = cells.enter() .append("rect").classed("cell", true) .attr("x", function(d) { return pxScale(d.j) }) .attr("y", function(d) { return pxScale(d.i) }) .style("fill-opacity", 0.4) //.style("stroke", "#000") //.style("stroke-width", 1) cells = cellsE.merge(cells); cells .attr("x", function(d) { return pxScale(d.j) }) .attr("y", function(d) { return pxScale(d.i) }) .attr("width", pxScale.bandwidth()) .attr("height", pxScale.bandwidth()) .attr("fill", function(d) { return colorScale(d.v) }) /* .style("transform", function(d,i) { var y = 190 - yt + heightScale(d.v) return "translate(40px," + y + "px) rotateX(60deg) rotateZ(-30deg) scale(0.8)" })*/ }39:[] 2f:{"title":"Distill: Transparency Sketches","cells":[{"id":3,"value":"d3 = require('d3')","pinned":false,"hidden":false,"mode":"ojs"},{"id":832,"value":"import {labelRange} from \"@enjalot/function-bank\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":139,"value":"md`Input image:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":5,"value":"input = \"dog_cat\" //viewof input = DOM.select([\"dog_cat\", \"car\"])","pinned":false,"hidden":false,"mode":"ojs"},{"id":354,"value":"layerNames = [\"mixed5b\", \"mixed5a\", \"mixed4e\", \"mixed4d\", \"mixed4c\", \"mixed4b\", \"mixed4a\", \"mixed3b\", \"mixed3a\", \"conv2d2\", \"conv2d1\", \"conv2d0\"]","pinned":false,"hidden":false,"mode":"ojs"},{"id":367,"value":"layers = {\n return {\n\t\t\"mixed5b\": { dim: 7, channels: 1024, name: \"mixed5b\" }, \n\t\t\"mixed5a\": { dim: 7, channels: 832, name: \"mixed5a\" }, \n\t\t\"mixed4e\": { dim: 14, channels: 832, name: \"mixed4e\" }, \n\t\t\"mixed4d\": { dim: 14, channels: 528, name: \"mixed4d\" }, \n\t\t\"mixed4c\": { dim: 14, channels: 512, name: \"mixed4c\" }, \n\t\t\"mixed4b\": { dim: 14, channels: 512, name: \"mixed4b\" }, \n\t\t\"mixed4a\": { dim: 14, channels: 508, name: \"mixed4a\" }, \n\t\t\"mixed3b\": { dim: 28, channels: 480, name: \"mixed3b\" }, \n\t\t\"mixed3a\": { dim: 28, channels: 256, name: \"mixed3a\" }, \n\t\t\"conv2d2\": { dim: 56, channels: 192, name: \"conv2d2\" }, \n\t\t\"conv2d1\": { dim: 56, channels: 64, name: \"conv2d1\" }, \n\t\t\"conv2d0\": { dim: 112, channels: 64, name: \"conv2d0\" }\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":396,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":755,"value":"{\n var rY = -55 + rotateY\n var rZ = -10 + rotateZ\n var sY = -25 + skewY\n return md`\\`rotateY(${rY}deg) rotateZ(${rZ}deg) skewY(${sY}deg)\\``\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":702,"value":"viewof rotateY = labelRange(\"Rotate Y\", -90, 90, 1)","pinned":false,"hidden":false,"mode":"ojs"},{"id":712,"value":"viewof rotateZ = labelRange(\"Rotate Z\", -90, 90, 1)","pinned":false,"hidden":false,"mode":"ojs"},{"id":716,"value":"viewof skewY = labelRange(\"Skew Y\", -90, 90, 1)","pinned":false,"hidden":false,"mode":"ojs"},{"id":704,"value":"viewof layerWidth = labelRange(\"Layer width\", -100, 100, 1)","pinned":false,"hidden":false,"mode":"ojs"},{"id":848,"value":"layerWidth","pinned":false,"hidden":false,"mode":"ojs"},{"id":714,"value":"viewof deltaX = labelRange(\"Delta X\", -25, 25, 1)","pinned":false,"hidden":false,"mode":"ojs"},{"id":760,"value":"md`${deltaX}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":726,"value":"viewof deltaY = labelRange(\"Delta Y\", -50, 50, 1)","pinned":false,"hidden":false,"mode":"ojs"},{"id":762,"value":"md`${deltaY}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":787,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":818,"value":"{\n var rX = -55 + rotateX\n var rZ = -24 + rotateZ2\n var sY = -9 + skewY2\n\tvar scale = 1.3 + scaler\n return md`\\`rotateX(${rX}deg) rotateZ(${rZ}deg) skewY(${sY}deg) scale(${scale})\\``\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":777,"value":"viewof rotateX = labelRange(\"Rotate Y\", -90, 90, 1)","pinned":false,"hidden":false,"mode":"ojs"},{"id":779,"value":"viewof rotateZ2 = labelRange(\"Rotate Z\", -90, 90, 1)","pinned":false,"hidden":false,"mode":"ojs"},{"id":781,"value":"viewof skewY2 = labelRange(\"Skew Y\", -90, 90, 1)","pinned":false,"hidden":false,"mode":"ojs"},{"id":783,"value":"viewof scaler = labelRange(\"Scale\", -1.2, 1.2, .1)","pinned":false,"hidden":false,"mode":"ojs"},{"id":804,"value":"viewof deltaY2 = labelRange(\"Delta Y\", -50, 50, 1)","pinned":false,"hidden":false,"mode":"ojs"},{"id":800,"value":"md`${deltaY2}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":785,"value":"viewof startY = labelRange(\"Start Y\", -100, 100, 1)","pinned":false,"hidden":false,"mode":"ojs"},{"id":815,"value":"md`${startY}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1018,"value":"spriteUrl = function(layer, size) {\n\treturn `https://storage.googleapis.com/fun-data/distill/feature-sprites/${layer}_sprite_${size}.jpeg?`\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1044,"value":"viewof stacklayer = DOM.select(layerNames.concat().reverse())","pinned":false,"hidden":false,"mode":"ojs"},{"id":919,"value":"{\n var h = 600;\n var div = html`

`\n var dis = d3.select(div)\n .style(\"position\", \"relative\")\n .style(\"height\", h + \"px\")\n .style(\"width\", \"100px\")\n\n\trenderChannelStack(dis, layers[stacklayer], h - 50)\n \n\treturn div;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":836,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":1187,"value":"viewof stacklayeracts = DOM.select([\"conv2d2\", \"mixed3a\", \"mixed4a\", \"mixed5a\"])","pinned":false,"hidden":false,"mode":"ojs"},{"id":1066,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":1062,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":1097,"value":"$36","pinned":false,"hidden":false,"mode":"ojs"},{"id":381,"value":"$37","pinned":false,"hidden":false,"mode":"ojs"},{"id":141,"value":"md`Layer:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"viewof layer = DOM.select(layerNames.filter(function(l) { \n\treturn [\"mixed5b\", \"mixed4e\", \"mixed4c\", \"mixed3b\", \"conv2d1\"].indexOf(l) < 0 \n}))","pinned":false,"hidden":false,"mode":"ojs"},{"id":371,"value":"acts = d3.json(\"https://storage.googleapis.com/fun-data/distill/\" + input + \"-acts.json?q=1\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":135,"value":"md`Activation magnitudes:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"act_mags = d3.json(\"https://storage.googleapis.com/fun-data/distill/\" + input + \"-act_mags.json?q=1\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":132,"value":"md`Gradient magnitudes:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":16,"value":"grad_mags = d3.json(\"https://storage.googleapis.com/fun-data/distill/\" + input + \"-grad_mags.json?q=1\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":163,"value":"md`Logits:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":143,"value":"logits = d3.json(\"https://storage.googleapis.com/fun-data/distill/\" + input + \"-logits.json?q=1\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":30,"value":"flat_act_mags = flatten(act_mags[layer])","pinned":false,"hidden":false,"mode":"ojs"},{"id":273,"value":"flat_act_mags4a = flatten(act_mags[\"mixed4a\"])","pinned":false,"hidden":false,"mode":"ojs"},{"id":276,"value":"flat_act_mags3a = flatten(act_mags[\"mixed3a\"])","pinned":false,"hidden":false,"mode":"ojs"},{"id":41,"value":"flat_grad_mags = flatten(grad_mags[layer][classification])","pinned":false,"hidden":false,"mode":"ojs"},{"id":145,"value":"flat_logits = flatten(logits[layer][classification])","pinned":false,"hidden":false,"mode":"ojs"},{"id":303,"value":"flat_logits4a = flatten(logits[\"mixed4a\"][classification])","pinned":false,"hidden":false,"mode":"ojs"},{"id":304,"value":"flat_logits3a = flatten(logits[\"mixed3a\"][classification])","pinned":false,"hidden":false,"mode":"ojs"},{"id":55,"value":"pixScale = d3.scaleBand()\n .domain(d3.range(act_mags[layer].length))\n .range([0,448])\n .paddingInner(0.)","pinned":false,"hidden":false,"mode":"ojs"},{"id":285,"value":"pixScale4a = d3.scaleBand()\n .domain(d3.range(act_mags[\"mixed4a\"].length))\n .range([0,448])","pinned":false,"hidden":false,"mode":"ojs"},{"id":286,"value":"pixScale3a = d3.scaleBand()\n .domain(d3.range(act_mags[\"mixed3a\"].length))\n .range([0,448])","pinned":false,"hidden":false,"mode":"ojs"},{"id":18,"value":"width = 648","pinned":false,"hidden":false,"mode":"ojs"},{"id":19,"value":"height = 448","pinned":false,"hidden":false,"mode":"ojs"},{"id":159,"value":"md`Activations at layer **${layer}**`","pinned":false,"hidden":false,"mode":"ojs"},{"id":17,"value":"svgActs = {\n var svg = DOM.svg(width, height);\n var g = d3.select(svg).append(\"g\")\n g.append(\"image\")\n .attr(\"href\", \"https://storage.googleapis.com/fun-data/distill/\" + input + \".png\")\n .style(\"transform\", \"translate(40px,190px) rotateX(60deg) rotateZ(-30deg) scale(0.8)\")\n\n var cellg = d3.select(svg).append(\"g\")\n\n cellg\n .style(\"transform\", \"translate(40px,\" + (190 - yt) + \"px) rotateX(60deg) rotateZ(-30deg) scale(0.8)\")\n renderCells(cellg, flat_act_mags)\n \n return svg;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":105,"value":"viewof yt = DOM.range(0, 40, 1)","pinned":false,"hidden":false,"mode":"ojs"},{"id":349,"value":"yt","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"viewof classification = DOM.select(['Labrador retriever', 'golden retriever', 'dalmatian', 'tennis ball', \"tiger cat\", 'monitor', 'tiger'])","pinned":false,"hidden":false,"mode":"ojs"},{"id":198,"value":"md`Gradient magnitudes for **${classification}** at layer **${layer}**`","pinned":false,"hidden":false,"mode":"ojs"},{"id":83,"value":"grad_mags[layer][classification]","pinned":false,"hidden":false,"mode":"ojs"},{"id":196,"value":"svgGrads = {\n var svg = DOM.svg(width, height);\n var g = d3.select(svg).append(\"g\")\n g.append(\"image\")\n .attr(\"href\", \"https://storage.googleapis.com/fun-data/distill/\" + input + \".png\")\n //.style(\"transform\", \"translate(40px,190px) rotateX(60deg) rotateZ(-30deg) scale(0.8)\")\n //.transition().duration(2500)\n //.styleTween(\"transform\", function() { return interp })\n\n var startState = \"translate(0px,0px) rotateX(0deg) rotateZ(0deg) scale(0.8)\"\n var endState = \"translate(40px,190px) rotateX(60deg) rotateZ(-30deg) scale(0.8)\"\n var interp = d3.interpolateString(startState, endState)\n\n var endState2 = \"translate(40px,\" + (190 - yt) + \"px) rotateX(60deg) rotateZ(-30deg) scale(0.8)\"\n var interp2 = d3.interpolateString(startState, endState2)\n\n var cellg = d3.select(svg).append(\"g\")\n // .style(\"transform\", startState)\n //cellg.transition().duration(2500)\n // .styleTween(\"transform\", function() { return interp2 })\n \n renderCells(cellg, flat_grad_mags)\n \n return svg;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":156,"value":"md`CAM for **${classification}** at layer **${layer}**`","pinned":false,"hidden":false,"mode":"ojs"},{"id":147,"value":"svgLogits = {\n var svg = DOM.svg(width, height);\n var g = d3.select(svg).append(\"g\")\n g.append(\"image\")\n .attr(\"href\", \"https://storage.googleapis.com/fun-data/distill/\" + input + \".png\")\n //.style(\"transform\", \"translate(40px,190px) rotateX(60deg) rotateZ(-30deg) scale(0.8)\")\n\n var cellg = d3.select(svg).append(\"g\")\n\n cellg\n //.style(\"transform\", \"translate(40px,\" + (190 - yt) + \"px)rotateX(60deg)rotateZ(-30deg)scale(0.8)\")\n cellg\n //.transition()\n //.style(\"transform\", \"translate(40px,\" + (160 - yt) + \"px)rotateX(60deg)rotateZ(-30deg)scale(0.8)\")\n renderCells(cellg, flat_logits)\n \n return svg;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":63,"value":"$38","pinned":false,"hidden":false,"mode":"ojs"},{"id":33,"value":"function flatten(data) {\n var flat = [];\n data.forEach(function(row,i) {\n row.forEach(function(element, j) {\n flat.push({\n v: element,\n i: i,\n j: j\n })\n })\n })\n return flat;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":266,"value":"svg3Acts = {\n var svg = DOM.svg(width, height);\n var g = d3.select(svg).append(\"g\")\n var dy = 50;\n g.append(\"image\")\n .attr(\"href\", \"https://storage.googleapis.com/fun-data/distill/\" + input + \".png\")\n //.style(\"transform\", \"translate(40px,250px) rotateX(60deg) rotateZ(-30deg) scale(0.8)\")\n\n var cellg1 = d3.select(svg).append(\"g\")\n //.style(\"transform\", \"translate(40px,\" + (250 - dy) + \"px) rotateX(60deg) rotateZ(-30deg) scale(0.8)\")\n renderCells(cellg1, flat_logits)\n \n var cellg2 = d3.select(svg).append(\"g\")\n //.style(\"transform\", \"translate(40px,\" + (250 - dy*2) + \"px) rotateX(60deg) rotateZ(-30deg) scale(0.8)\")\n renderCells(cellg2, flat_logits4a, pixScale4a)\n\n var cellg3 = d3.select(svg).append(\"g\")\n //.style(\"transform\", \"translate(40px,\" + (250 - dy*3) + \"px) rotateX(60deg) rotateZ(-30deg) scale(0.8)\")\n renderCells(cellg3, flat_logits3a, pixScale3a)\n \n return svg;\n}","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W39","stdlib":"1","titling":"auto"}