2d:null 2e:["$","title",null,{"children":"Quick, Draw! Grid explorer | Ian Johnson | Observable"}] 33:T923,viewof set = { var el = DOM.svg(tsneWidth,tsneHeight) var svg = d3.select(el) svg.append("image").attr("href", tsneImage) .attr("width", tsneWidth).attr("height", tsneHeight) /* var r = tsneRadius var cols = Math.ceil((extents[word].x[1] - extents[word].x[0]) / r/2); var rows = Math.ceil((extents[word].y[1] - extents[word].y[0]) / r/2); console.log(r, cols, rows) var hits = d3.range(cols * rows).map(function(i) { var xi = i % cols; var yi = Math.floor(i/cols); return { x: xi * r * 2 + r + extents[word].x[0], y: yi * r * 2 + r + extents[word].y[0], r: r } })*/ svg.append("text").classed("set", true) .attr("transform", `translate(${tsneWidth - 200},20)`) .style("fill", "#fff") .style("font-family", "Roboto Mono, Courier New") .style("font-size", 10) var rw = (xscale(hits[0].r) - xscale(0))*2 - 2 svg.selectAll("rect.hit").data(hits) .enter().append("rect").classed("hit", true) // .attr("r", function(d) { return xscale(d.r) - xscale(0) }) .attr("x", function(d) { return xscale(d.x) - rw/2 }) .attr("y", function(d) { return yscale(d.y) - rw/2 }) .attr("width", function(d) { return rw }) .attr("height", function(d) { return rw }) // .attr("cx", function(d) { return xscale(d.x) }) // .attr("cy", function(d) { return yscale(d.y) }) .style("fill", "steelblue") .style("stroke", "steelblue") .style("stroke-width", 1) .style("fill-opacity", 0.2) .style("stroke-opacity", 0.4) .style("cursor", "pointer") .on("click", function(event, d) { el.value = d.set el.dispatchEvent(new CustomEvent("input")) svg.selectAll("rect.hit") .style("fill-opacity", 0.2) .style("stroke-opacity", 0.4) .style("stroke-width", 1) .style("stroke", "steelblue") d3.select(this) .style("fill-opacity", 0.4) .style("stroke-opacity", 1) .style("stroke-width", 2) .style("stroke", "lightblue") }) .on("mouseover", function(event, d) { d3.select("text.set").text(d.set) }) svg.selectAll("rect.hit").filter(function(d) { return d === hits[0] }) .style("fill-opacity", 0.4) .style("stroke-opacity", 1) .style("stroke-width", 1) .style("stroke", "lightblue") el.value = hits[0].set return el }34:Tc2c,viewof chosen = { var filtered = drawings //.filter(function(d) { return d.strokes.length == 2 }) // .filter(function(d) { return d.strokes.length >= 16 }) // .filter(function(d) { return d.countrycode == "JP" }) //.filter(function(d) { return d.recognized }) console.log("filtered", filtered.length) var size = 60 var n = 15 var w = 960 var cols = Math.floor(w/size) - 1; var scale = size/300 var h = filtered.length/n * size + size * 2 var el = DOM.svg(w, h) var svg = d3.select(el) var g = svg.append("g").attr("transform", "translate(0, 20)") // .style("background-color", "#111") console.log("filtered", filtered) var positioned = filtered.map(function(d,i) { var x = size/2 + (i % cols) * size var y = size/2 + Math.floor(i/cols) * size var strokes = center(d.strokes,size,size,scale * 1.05) strokes.forEach(function(s) { s.nstrokes = strokes.length s.recognized = d.recognized }) return { x: x, y: y, i: i, data: d, strokes: strokes } }) // var strokecolor = function(t) { return d3.interpolatePurples((1 - t) * 0.6 + 0.4) } // var unreccolor = function(t) { return d3.interpolateReds((1 - t) * 0.6 + 0.4) } var strokecolor = function(t) { return "#fff"} var unreccolor = function(t) { return "#fff"} //renderRows(g, filtered, "#111", 0.12/40*size, n, size, size) var bgs = g// .selectAll("g.drawing") .data(positioned) .enter().append("g").classed("drawing", true) bgs.attr("transform", function(d,i) { return "translate(" + [d.x, d.y] + ")" }) // .style("stroke", function(d) { return "#333" }) .style("stroke-width", function(d) { return 0.75 }) // for collision detection bgs.append("rect").attr("width", size).attr("height", size) .style("fill", "#111") // .style("fill-opacity", 0) .style("stroke", "none") bgs.selectAll("path.stroke").data(function(d) { return d.strokes }) .enter().append("path").classed("stroke", true) .attr("d", drawingLine) .style("fill", "none") .style("stroke-linecap", "round") .style("pointer-events", "all") .style("stroke", function(d,i) { if(d.recognized) return strokecolor(i/d.nstrokes) return unreccolor(i/d.nstrokes) }) var chosen = [] bgs .on("click", function(evt, d) { console.log("drawing", d) el.dispatchEvent(new CustomEvent("input")) var ci = chosen.indexOf(d); if(ci >= 0) { chosen.splice(ci, 1) } else { chosen.push(d) } console.log("chosen", chosen) el.value = chosen g.selectAll("g.drawing").selectAll("path.stroke") .style("stroke", function(d,i) { if(d.recognized) return strokecolor(i/d.nstrokes) return unreccolor(i/d.nstrokes) }) g.selectAll("g.drawing") .filter(function(f) { return chosen.indexOf(f) >= 0 }) .selectAll("path.stroke") .style("stroke", "#26a69a") }) //.filter(function(d) { return !d.recognized }) // .style("stroke", "#444") el.value = chosen; return el }35:T650,{ var size = 300; var scale = size/300; var n = 8 var h = chosen.length/n * size + size var el = DOM.svg(width, h + 50) var svg = d3.select(el) var g = svg.append("g").attr("transform", "translate(0, 20)") var positioned = chosen.map(function(d,i) { var x = (i % n) * size var y = Math.floor(i/n) * size return { x: x + i * 20, y: y, i: i, data: d } }) var bgs = svg// .selectAll("g.bg") .data(positioned) .enter().append("g").classed("bg", true) bgs.attr("transform", function(d,i) { return "translate(" + [d.x, d.y] + ")scale(5)" }) .style("stroke", function(d) { return "#333" //return "#777" }) .style("stroke-width", function(d) { return 0.75 }) bgs.append("rect").attr("width", size).attr("height", size).style("fill", "#fff").style("fill-opacity", 0) .style("stroke", "none") bgs.selectAll("path.stroke") .data(function(d) { return d.data.strokes }) .enter().append("path").classed("stroke", true) .attr("d", drawingLine) .style("fill", "none") .style("stroke-linecap", "round") .style("pointer-events", "all") .style("stroke", function(d,i) { //return lilcolor(i/d.nstrokes) return "#111" }) // renderRows(g, chosen, "#111", 0.12/40*size, n, size, size) // var chosen2 = [] // g.selectAll("g.drawing") // .filter(function(d) { return !d.recognized }) // .style("stroke", "#444") // .on("click", function(d) { // console.log("drawing", d) // chosen2.push(d) // }) // el.value = chosen2; return el }36:T644,{ var size = 100; var scale = size/300; var n = 8 var h = chosen.length/n * size + 50 var el = DOM.svg(960, h + 50) var svg = d3.select(el) var g = svg.append("g").attr("transform", "translate(0, 20)") var positioned = chosen.map(function(d,i) { var x = size/2 + (i % n) * size var y = size/2 + Math.floor(i/n) * size return { x: x, y: y, i: i, data: d } }) var bgs = svg// .selectAll("g.bg") .data(positioned) .enter().append("g").classed("bg", true) bgs.attr("transform", function(d,i) { return "translate(" + [d.x, d.y] + ")" }) .style("stroke", function(d) { return "#333" //return "#777" }) .style("stroke-width", function(d) { return 0.75 }) bgs.append("rect").attr("width", size).attr("height", size).style("fill", "#fff").style("fill-opacity", 0) .style("stroke", "none") bgs.selectAll("path.stroke").data(function(d) { return d.data.strokes }) .enter().append("path").classed("stroke", true) .attr("d", drawingLine) .style("fill", "none") .style("stroke-linecap", "round") .style("pointer-events", "all") .style("stroke", function(d,i) { //return lilcolor(i/d.nstrokes) return "#111" }) // renderRows(g, chosen, "#111", 0.12/40*size, n, size, size) // var chosen2 = [] // g.selectAll("g.drawing") // .filter(function(d) { return !d.recognized }) // .style("stroke", "#444") // .on("click", function(d) { // console.log("drawing", d) // chosen2.push(d) // }) // el.value = chosen2; return el }37:T40f,viewof save = { var button = html`

Save

` button.value = null; d3.select(button).on("click", function() { // submit the set, description and chosen ids to an endpoint // button.value = "Submitted" // button.dispatchEvent(new CustomEvent("input")) console.log("update") var saved = { word: word, set: set, username: username, description: description, chosen: chosen.length ? chosen.map(function(c) { return c.data }) : [drawings[0]], num: drawings.length, timestamp: +new Date() } button.value = saved; button.dispatchEvent(new CustomEvent("input")) console.log("saved", saved) db.ref(`chosen-sets/${username}/${set.replace(/\./g,"dot")}`).set(saved); }) return button }38:T4b0,/* Center and rescale the strokes of a quickdraw drawing */ function center(strokes, width, height, scale) { var minY = Infinity var maxY = -Infinity var minX = Infinity var maxX = -Infinity var centroidX = 0 var centroidY = 0 var count = 0 var newstrokes = [] strokes.forEach(function(stroke) { stroke.forEach(function(p) { centroidX += p.x centroidY += p.y count++ }) }) centroidX /= count; centroidY /= count; strokes.forEach(function(stroke) { var newstroke = [] stroke.forEach(function(op) { var p = { x: op.x, y: op.y } p.x *= scale p.y *= scale p.x += width/2 - centroidX * scale p.y += height/2 - centroidY * scale if(p.y < minY) minY = p.y if(p.y > maxY) maxY = p.y if(p.x < minX) minX = p.x if(p.x > maxX) maxX = p.x newstroke.push(p) }) newstrokes.push(newstroke) }) var diffX = minX - (width - maxX) var diffY = minY - (height - maxY) newstrokes.forEach(function(stroke) { stroke.forEach(function(p) { p.x -= diffX/2 p.y -= diffY/2 }) }) return newstrokes } 39:[] 31:{"id":"3ff0866579a78136","slug":"t-sne-grid-selector","title":"Quick, Draw! Grid explorer","thumbnail":"0607523d785f969ef57b1828373b9b975ce360d596017effe108834c8842b931","access_level":"public","create_time":"$D2018-04-29T00:49:38.689Z","update_time":"$D2025-04-30T19:17:16.600Z","view_time":null,"first_public_time":"$D2018-05-01T18:58:50.779Z","has_unpublished_edits":null,"fork":{"id":"4c13251d1d6325c4","slug":"sketchrnn-explorer","title":"SketchRNN Explorer","owner":{"id":"cce0fa6e063d2bee","login":"enjalot","name":"Ian Johnson"}},"stars":18,"starred":false,"owner":{"type":"team","id":"cce0fa6e063d2bee","login":"enjalot","name":"Ian Johnson","avatar_url":"https://avatars-next.observableusercontent.com/549bdb0c368027004b51c4e95459e9c224331e0fec9c4cc97d181f83e55ab7f9","tier":"starter_2024"},"version":925,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"595405df3c534894","login":"enjalot","name":"Ian Johnson","avatar_url":"https://avatars-next.observableusercontent.com/549bdb0c368027004b51c4e95459e9c224331e0fec9c4cc97d181f83e55ab7f9","tier":null}],"members":[{"type":"individual","id":"595405df3c534894","login":"enjalot","name":"Ian Johnson","avatar_url":"https://avatars-next.observableusercontent.com/549bdb0c368027004b51c4e95459e9c224331e0fec9c4cc97d181f83e55ab7f9","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":7,"collection":{"id":"8f560c9005aad732","slug":"quickdraw","title":"QuickDraw","owner":{"id":"cce0fa6e063d2bee","login":"enjalot","name":"Ian Johnson"}},"type":"notebook","body":{"title":"Quick, Draw! Grid explorer","cells":[{"id":180,"value":"md`# Quick, Draw! Grid explorer`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3,"value":"md`Exploring the latent space created by SketchRNN`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":90,"value":"viewof word = DOM.select([\n \"ant\",\n \"alarm_clock\",\n \"bee\", \n \"bear\",\n \"bicycle\",\n \"bird\", \n \"book\",\n \"bulldozer\",\n \"bus\",\n \"cat\", \n \"chair\",\n \"dog\",\n \"duck\",\n \"castle\",\n \"eye\",\n \"face\",\n \"fan\",\n \"flamingo\",\n \"flower\",\n \"frog\",\n \"garden\",\n \"hand\",\n \"octopus\",\n \"owl\",\n \"penguin\",\n \"pig\",\n \"paintbrush\",\n \"power_outlet\",\n \"skull\",\n \"snail\",\n \"snowflake\",\n \"tiger\",\n \"toothpaste\",\n \"truck\",\n \"yoga\", \n])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":300,"value":"md`## Grid cells with more than 50 drawings`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":439,"value":"md`Selected set with ${drawings.length} drawings.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":24,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":353,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":564,"value":"md`Click on any of the above drawings to collect them below`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":890,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":402,"value":"chosen","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":399,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":566,"value":"md`You can save a set if you find it interesting, please click on at least one or two above as representative examples.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":674,"value":"viewof username = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":645,"value":"viewof description = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":644,"value":"$37","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":759,"value":"{\n console.log(\"save\", save)\n if(save) {\n return md`Saved at ${d3.timeFormat(\"%c\")(save.timestamp)}`\n } else {\n return md`Not saved yet`\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":570,"value":"md`Load the data and process it`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":349,"value":"samples = (await fetch(`https://storage.googleapis.com/quickdraw-data/words/grid-${word}/${set}`)).json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":876,"value":"`https://storage.googleapis.com/quickdraw-data/words/grid-${word}/${set}`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":351,"value":"drawings = samples.map(strokifyDrawing)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":304,"value":"sets = (await fetch(`https://storage.googleapis.com/quickdraw-data/words/grid-${word}/files-${word}.json`)).json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":313,"value":"hits = {\n return sets.filter(function(d) { return d.indexOf(word) == 0 })\n .map(function(d) {\n var stripped = d.replace('.json', '').replace(word, \"\")\n return {\n set: d,\n x: +stripped.split(\"_\")[1],\n y: +stripped.split(\"_\")[2],\n r: +stripped.split(\"_\")[3]\n }\n })\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"tsneImage = `https://storage.googleapis.com/quickdraw-data/images/tsne-${word}.png`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":446,"value":"tsneMeta = (await fetch(`https://storage.googleapis.com/quickdraw-data/images/tsne-${word}-meta.json`)).json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":209,"value":"$38","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":29,"value":"xscale = d3.scaleLinear()\n .domain([tsneMeta.xextent[0]*1.1, tsneMeta.xextent[1]*1.1])\n .range([0, tsneWidth])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":30,"value":"yscale = d3.scaleLinear()\n .domain([tsneMeta.yextent[0]*1.1, tsneMeta.yextent[1]*1.1])\n .range([0, tsneHeight])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"tsneWidth = 500","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"tsneHeight = 500","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":"d3 = require('d3@6')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":660,"value":"firebase = {\n var firebase = (await require(\"https://www.gstatic.com/firebasejs/4.13.0/firebase.js\"))\n return firebase\n // var firebase = require(\"firebase@4.13.0\");\n // Required for side-effects\n // html``\n // var store = import(\"firebase/firestore\");\n // var store = require(\"https://unpkg.com/@firebase/firestore@0.4.1/dist/index.cjs.js\")\n // var store = import(\"https://www.gstatic.com/firebasejs/4.13.0/firebase-firestore.js\")\n // console.log(\"STORE\", store)\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":733,"value":"app = {\n var app = firebase.apps.filter(function(a) { return a.name_ == \"quickdraw-explore\" })[0]\n if(app) return app;\n app = firebase.initializeApp({\n apiKey: 'AIzaSyC9DY97nxcNmBm-GcLcn__IlPvyG-OovZs',\n authDomain: 'quickdraw-latent-explorer.firebaseapp.com',\n projectId: 'quickdraw-latent-explorer',\n storageBucket: \"quickdraw-latent-explorer.appspot.com\",\n messagingSenderId: \"297953189825\",\n databaseURL: \"https://quickdraw-latent-explorer.firebaseio.com\",\n }, \"quickdraw-explore\")\n return app\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":680,"value":"firebaseui = require('https://cdn.firebase.com/libs/firebaseui/2.7.0/firebaseui.js') ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":676,"value":"firebaseuiCSS = html``\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":671,"value":"db = {\n // Initialize Cloud Firestore through Firebase\n // var db = firebase.firestore();\n var db = firebase.database(app)\n return db;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":730,"value":"auth = {\n firebase.auth(app).signInAnonymously().catch(function(error) {\n // Handle Errors here.\n var errorCode = error.code;\n var errorMessage = error.message;\n // ...\n console.log(\"authed\", errorCode, errorMessage)\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":827,"value":"drawingLine = d3.line()\n .x(function(d) { return d.x })\n .y(function(d) { return d.y })\n .curve(d3.curveBasis)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":812,"value":"function strokifyDrawing(d) {\n var drawing = JSON.parse(JSON.stringify(d)) //well that's one way to copy\n var strokes = d.drawing.map(function(s) {\n var points = []\n s[0].forEach(function(x,i) {\n points.push({x: x, y: s[1][i] })\n })\n return points;\n })\n drawing.strokes = strokes;\n return drawing\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"// import {renderRows, renderEncodings} from \"@enjalot/latent-expressions\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W39","stdlib":"1","titling":"auto"}} 32:"$31:body"