31:T869,viewof set = { var div = html`

` var size = 100; // var nested = d3.nest() // .key(function(d) { return d.word }) // .rollup(function(leaves) { return leaves }) // .entries(fbsets) fbsets.sort(function(a,b) { return a.word - b.word }) div.value = fbsets[0].set; // console.log("nested", nested) var dd = d3.select(div).select("div.sets").selectAll("div.set") // .data(nested) .data(fbsets) .enter().append("div").classed("set", true) // dd.append("div").text(function(d) { return d.key }) // var sd = dd.selectAll("div.set").data(function(d) { return d.value }) // .enter().append("div").classed("set", true) dd.append("svg").attr("width", size).attr("height", size) .append("g").selectAll("path.stroke").data(function(d) { var c = d.chosen[0] var strokes if(c.data) { strokes = c.data.strokes } else { strokes = c.strokes } return center(strokes, size, size, size/300*1) }) .enter().append("path").classed("stroke", true) .attr("d", drawingLine) .style("fill", "none") .style("stroke-linecap", "round") .style("stroke-opacity", 1.0) dd.append("span").text(function(d) { return d.word }).style("font-weight", "bold") dd.append("span").text(function(d) { return "(" + d.num + "): " + d.description }) dd.on("click", function(d) { div.value = d.set div.dispatchEvent(new CustomEvent("input")) d3.select(div).selectAll(".set").classed("selected", false) d3.select(this).classed("selected", true) }) return div }32:T63c,{ var w = 900 var size = 100; var n = 8 var chosens = setsby[set].chosen var h = chosens.length/n * size + size var el = DOM.svg(w, h + 50) var svg = d3.select(el) var g = svg.append("g").attr("transform", "translate(0, 20)") var bw = size var bscale = bw/300 //var cols = Math.floor(w/bw) - 1; // var h = (datas.length/cols + 2) * (bw) var positioned = chosens.map(function(d,i) { var x = bw/2 + (i % n) * bw var y = bw/2 + Math.floor(i/n) * bw return { x: x, y: y, i: i, data: d.data ? d.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", bw).attr("height", bw).style("fill", "#fff").style("fill-opacity", 0) .style("stroke", "none") bgs.selectAll("path.stroke").data(function(d) { console.log(d) var strokes = center(strokifyDrawing(d.data).strokes,bw,bw,bscale * 1.15) strokes.forEach(function(s) { s.nstrokes = strokes.length }) return 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" }) return el }33:T168c,viewof big = { var w = 900 var bw = lilwidth var bscale = bw/300 var cols = Math.floor(w/bw) - 1; var bigh = 450 var h = (datas.length/cols + 2) * (bw) + bigh var el = DOM.svg(w,h) var svg = d3.select(el) //.style("background-color", "black") // var color = function(t) { return d3.interpolatePurples((1 - t) * 0.8 + 0.2) } // var bigcolor = function(t) { return d3.interpolatePuRd((1 - t) * 0.8 + 0.2) } // var lilcolor = function(t) { return d3.interpolatePuRd((1 - t) * 0.8 + 0.2) } var bigcolor = function(t) { return d3.interpolatePurples((1 - t) * 0.6 + 0.4) } var lilcolor = function(t) { return d3.interpolatePurples((1 - t) * 0.6 + 0.4) } 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) } function prepBig(d) { var big = strokifyDrawing(d) //var big = strokifyDrawing(chosen[bigindex]) big.strokes = center(big.strokes,w,bigh,bigh/300) return big } var index = 13//8; // var big = prepBig(el.value || chosen[index]) var big = prepBig(el.value || datas[index]) el.value = big // var positioned = chosen.map(function(d,i) { var positioned = datas.map(function(d,i) { var x = bw/2 + (i % cols) * bw var y = bw/2 + Math.floor(i/cols) * bw; var strokes = center(strokifyDrawing(d).strokes,bw,bw,bscale * 1.15) strokes.forEach(function(s) { s.nstrokes = strokes.length s.recognized = d.recognized }) return { x: x, y: y, i: i, data: d, strokes: strokes, } }) var littles = svg.append("g").classed("littles", true).attr("transform", `translate(0,${bigh})`) var bgs = littles// .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", bw).attr("height", bw).style("fill", "#fff").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 bigg = svg.append("g").classed("bigone", true) bigg .selectAll("path.stroke").data(big.strokes) .enter().append("path").classed("stroke", true) .attr("d", drawingLine) .style("fill", "none") // .style("stroke", "#111") .style("stroke", function(d,i) { return bigcolor(i/big.strokes.length) }) .style("stroke-width", bigthick) .style("stroke-linecap", "round") .style("stroke-opacity", 1.0) var btext = svg.append("g").attr("transform","translate(650,20)") .append("text").text(big.key_id + " #" + index + " " + big.countrycode + " ") var chosen = [] bgs .on("click", function(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 littles.selectAll("g.bg").selectAll("path.stroke") .style("stroke", function(d,i) { if(d.recognized) return strokecolor(i/d.nstrokes) return unreccolor(i/d.nstrokes) }) littles.selectAll("g.bg") .filter(function(f) { return chosen.indexOf(f) >= 0 }) .selectAll("path.stroke") .style("stroke", "#26a69a") // draw big var strokes = prepBig(d.data).strokes var be = bigg.selectAll("path.stroke").data(strokes) be.enter().append("path").classed("stroke", true) .attr("d", drawingLine) .style("fill", "none") //.style("stroke", "#111") .style("stroke", function(d,i) { return bigcolor(i/strokes.length) }) .style("stroke-width", bigthick) .style("stroke-linecap", "round") be.attr("d", drawingLine) be.exit().remove() btext.text(d.data.key_id + " #" + d.i + " " + d.data.countrycode + " ") }) // .on("click", function(d) { // console.log("click", d) // var strokes = prepBig(d.data).strokes // var be = bigg.selectAll("path.stroke").data(strokes) // be.enter().append("path").classed("stroke", true) // .attr("d", drawingLine) // .style("fill", "none") // //.style("stroke", "#111") // .style("stroke", function(d,i) { // return bigcolor(i/strokes.length) // }) // .style("stroke-width", bigthick) // .style("stroke-linecap", "round") // be.attr("d", drawingLine) // be.exit().remove() // el.value = prepBig(d.data) // delete el.value.drawing // el.dispatchEvent(new CustomEvent("input")) // btext.text(d.data.key_id + " #" + d.i + " " + d.data.countrycode + " ") // }) var defs = svg.append("defs"); var filter = defs.append("filter").attr("id","gooeyCodeFilter"); filter.append("feGaussianBlur") .attr("in","SourceGraphic") .attr("stdDeviation",blur) .attr("color-interpolation-filters","sRGB") .attr("result","blur"); filter.append("feColorMatrix") .attr("in","blur") .attr("mode","matrix") .attr("values","1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 18 -7") .attr("result","gooey") bigg.style("filter", "url(#gooeyCodeFilter)") el.value = [] return el }34:T6a6,{ var size = 100; var scale = size/300; var n = 8 var h = big.length/n * size + size var el = DOM.svg(960, h + 50) var svg = d3.select(el) var g = svg.append("g").attr("transform", "translate(0, 20)") var positioned = big.map(function(d,i) { var x = size/2 + (i % n) * size var y = size/2 + Math.floor(i/n) * size; var strokes = center(strokifyDrawing(d.data).strokes,size,size,scale * 1.05) return { x: x, y: y, i: i, data: d, strokes: strokes } }) 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 1.25 }) 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.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 }35:T472,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 } 36:[] 2f:{"title":"Latent Grid Subset Viewer","cells":[{"id":0,"value":"md`# Latent Grid Subset Viewer`","pinned":false,"hidden":false,"mode":"ojs"},{"id":605,"value":"viewof username = DOM.select([\"enjalot\", \"enoex\", \"mei\"])","pinned":false,"hidden":false,"mode":"ojs"},{"id":405,"value":"viewof fbsets = {\n// fbsets = {\n var el = html`

fetch

`\n var div = d3.select(el)\n \n \n var enjasets = db.ref(`chosen-sets/${username}`);\n // var promise = new Promise(function(resolve, reject) {\n enjasets.on('value', snapshot)\n div.on(\"click\", function() { enjasets.on(\"value\", snapshot) })\n\n function snapshot(snapshot) {\n var setsby = snapshot.val()\n var sets = Object.keys(setsby).map(function(k) { return setsby[k] })\n console.log(\"val\", setsby, sets)\n resolve(sets)\n\n el.value = sets\n el.dispatchEvent(new CustomEvent(\"input\"))\n // console.log(\"value?\", el.value)\n }\n // })\n return el\n // return promise\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":647,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":435,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":20,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":394,"value":"md`showing ${datas.length} ${setsby[set].word}s`","pinned":false,"hidden":false,"mode":"ojs"},{"id":303,"value":"big","pinned":false,"hidden":false,"mode":"ojs"},{"id":793,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":49,"value":"lilwidth = 70","pinned":false,"hidden":false,"mode":"ojs"},{"id":266,"value":"//viewof blur = DOM.range(0, 5, 0.01)\nblur = 1.95","pinned":false,"hidden":false,"mode":"ojs"},{"id":282,"value":"md`blur: ${blur}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":98,"value":"//viewof bigthick = DOM.range(1, 30, 1)\nbigthick = 5","pinned":false,"hidden":false,"mode":"ojs"},{"id":280,"value":"md`bigthick: ${bigthick}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":29,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":24,"value":"drawingLine = d3.line()\n .x(function(d) { return d.x })\n .y(function(d) { return d.y })\n .curve(d3.curveBasis)","pinned":false,"hidden":false,"mode":"ojs"},{"id":32,"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":false,"hidden":false,"mode":"ojs"},{"id":11,"value":"datas = {\n // var results = [];\n // for (var i = 0; i < sets.length; i++) {\n // var s = sets[i];\n var s = setsby[set]\n var results = await d3.json(`https://storage.googleapis.com/quickdraw-data/words/grid-${s.word}/${s.set}`);\n // set.forEach(function(d) { results.push(d) })\n // }\n return results;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":14,"value":"d3 = require('d3')","pinned":false,"hidden":false,"mode":"ojs"},{"id":397,"value":"firebase = {\n var firebase = (await require(\"https://www.gstatic.com/firebasejs/4.13.0/firebase.js\"))\n return firebase\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":399,"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"},{"id":401,"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"},{"id":403,"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"},{"id":422,"value":"fbsets","pinned":false,"hidden":false,"mode":"ojs"},{"id":377,"value":"setsby = {\n var setsby = {}\n fbsets.forEach(function(d) { setsby[d.set] = d })\n return setsby\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":363,"value":"// sets\noldsets = [\n {word: \"pig\", description: \"cute faces\", set: \"pig_-6.52_-3.5_1.25.json\", chosen: [] },\n {word: \"bird\", description: \"twitter\", set: \"bird_10.36_-8.37_1.25.json\", chosen: [] },\n {word: \"bird\", description: \"little bird flocks\", set: \"bird_-27.14_9.13_1.25.json\", chosen: [] }, // mini flock\n {word: \"cat\", description: \"cute cat faces\", set: \"cat_11_6.22_1.25.json\", chosen: []}, // cute cat faces\n {word: \"ant\", description: \"cute peanut ants\", set: \"ant_11.4_-34.9_1.25.json\", chosen: []} // cute peanut ants\n\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"chosen = (await fetch(`https://storage.googleapis.com/fun-data/quickdraw/chosen/cat-complex-tjk-200.json`)).json()\n//chosen = (await fetch(`https://storage.googleapis.com/fun-data/quickdraw/chosen/pig-complex-tjk-200.json`)).json()","pinned":false,"hidden":false,"mode":"ojs"},{"id":365,"value":"chosens = [\n {word: \"yoga\", description: \"cross-legged\", key_ids: [\"5225452840943616\",\"6601870590083072\",\"4931295278792704\",\"6341024060276736\",\"4588745313484800\",\"6265652849410048\",\"5402938686046208\",\"6495858545655808\",\"5983404963135488\",\"6224056296669184\",\"4537123099115520\",\"6126213162598400\",\"4694720947159040\",\"5250342344196096\",\"6329032884879360\",\"5926131863650304\",\"5384321835728896\",\"6753469111205888\",\"6704295024001024\",\"4515563311202304\",\"4856589511032832\",\"5838530246868992\",\"5322733749534720\",\"5773813407023104\",\"6501747717570560\",\"5732634770538496\",\"6258887722270720\",\"4719439004041216\",\"5254105444384768\",\"5072155840610304\",\"5968851185434624\",\"6403938125348864\",\"5822550036709376\",\"5915072821985280\",\"5886756643667968\",\"4714677512699904\",\"6597359079260160\",\"6519574084190208\",\"4519475476955136\",\"6596263862599680\"] },\n \n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":371,"value":"// viewof set = DOM.select(fbsets.map(function(d) { return d.set }))\nviewof sssset = html``","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W36","stdlib":"1","titling":"auto"}