44:["$","title",null,{"children":"Emojis with input picker | Ammø | Observable"}] 4c:T4e0,colorTreemap = { let tree = treemap(root); let svg = d3 .create("svg") .attr("width", treemapWidth) .attr("height", treemapHeight); let leaf = svg .selectAll("g") .data(tree.leaves()) .join("g") .attr("transform", d => `translate(${d.x0},${d.y0})`); leaf .append("rect") .attr("width", d => d.x1 - d.x0) .attr("height", d => d.y1 - d.y0) // .attr("fill", d => { while (d.depth > 1) d = d.parent; return color(d.data.name) }) // .attr("fill", d => { return color(d.data.name) }) .attr( "fill", d => `rgb(${d.data.color ? d.data.color.join(",") : "255,255,255"})` ) .attr("fill-opacity", 1); leaf .append("text") .selectAll("tspan") .data(d => d3.range(d.value).map(i => ({ name: d.data.name, parent: d }))) .join("tspan") .attr("x", (d, i, nodes) => { let w = d.parent.x1 - d.parent.x0 - 5; let n = Math.floor(w / fontSize); return 3 + (i % n) * fontSize; }) .attr("y", (d, i, nodes) => { let w = d.parent.x1 - d.parent.x0 - 5; let n = Math.floor(w / fontSize); return 25 + Math.floor(i / n) * fontSize; }) .style("font-size", `${fontSize}px`) .text(d => d.name); return svg.node(); }4d:T883,dominantColors = function(emoji) { // emojicanvas let canvas = d3 .create("canvas") .attr("width", canvasSize) .attr("height", canvasSize) .node(); // canvas.width = `${canvasSize}px`; // canvas.height = `${canvasSize}px`; let ctx = canvas.getContext("2d"); ctx.fillStyle = "#fff"; ctx.fillRect(0, 0, canvasSize, canvasSize); ctx.fillStyle = "#000"; ctx.font = `${fontSize}px sanserif`; ctx.fillText(emoji, 0, fontSize); let imageData = ctx.getImageData(0, 0, canvasSize, canvasSize); //matrix const result = []; let x = 0; let y = 0; let maxLab = 0; let minLab = 0; result.height = imageData.height; result.width = imageData.width; for (let i = 0; i < imageData.data.length; i += 4) { const pixel = { rgba: { r: imageData.data[i], g: imageData.data[i + 1], b: imageData.data[i + 2], a: imageData.data[i + 3] }, position: { x: x, y: y } }; result.push(pixel); if (x >= result.width - 1) { x = 0; y++; } else { x++; } } result.maxLab = maxLab; result.minLab = minLab; let matrix = result; // samples const step = Math.floor(matrix.length / seedSize); const seed = []; let points = matrix.map(p => { const result = [p.rgba.r, p.rgba.g, p.rgba.b]; result.point = p; return result; }); for (let i = 0; i < points.length; i += step) { seed.push(points[i]); } const results = []; for (let k = 1; k <= 20; k++) { const centroids = kmeans(seed, k).centroids; results.push({ k: k, centroids: centroids, variance: centroids.map(c => c.variance).reduce((a, b) => a + b, 0) / k }); } let samples = results; let minimum = samples[0]; for (let i = 1; i < samples.length; i++) { if (minimum.variance - samples[i].variance < 256) { i = samples.length; } else { minimum = samples[i]; } } // // // points // points = matrix.map(p => { // const result = [p.rgba.r, p.rgba.g, p.rgba.b]; // result.point = p; // return result; // }); return kmeans(points, minimum.k, minimum.centroids); }4e:T46c,processed = { let imageData = emojipixels; const context = DOM.context2d(imageData.width, imageData.height, 1); const canvas = context.canvas; const imageData2 = context.getImageData( 0, 0, imageData.width, imageData.height ); const centroids = result.centroids; //.filter(d => !!d.variance); for (let i = 0; i < imageData.data.length; i += 4) { const rgb = [ imageData.data[i], imageData.data[i + 1], imageData.data[i + 2] ]; const closest = { centroid: centroids[0], distance: distance(rgb, centroids[0]) }; for (let i = 1; i < centroids.length; i++) { const _distance = distance(rgb, centroids[i]); if (_distance < closest.distance) { closest.centroid = centroids[i]; closest.distance = _distance; } } imageData2.data[i] = closest.centroid[0]; imageData2.data[i + 1] = closest.centroid[1]; imageData2.data[i + 2] = closest.centroid[2]; imageData2.data[i + 3] = closest.centroid.variance ? 255 : 0; } // context.putImageData(imageData2, 0, 0) // return canvas return imageData2; }4f:[{"id":"0a3f1d3f209b5327b50d1d663bdbc1239e8474d7b74576887b45101458b47e43a701da342af149369abc01e6edba47cf2d40597820fb9ecab590ec59de3c64dc","href":"https://static.observableusercontent.com/files/0a3f1d3f209b5327b50d1d663bdbc1239e8474d7b74576887b45101458b47e43a701da342af149369abc01e6edba47cf2d40597820fb9ecab590ec59de3c64dc","name":"Emoji_Sentiment_Data_v1.0.csv","type":"text/csv","lastModified":1669549483009.516,"size":78880},{"id":"8dca4bc57eb3151925428d13b850d8371c108a1470dcad2bc2d18ea98bc0e4687f519ea51202a248907a6bb812d9eefed768bb579e4463907847ec302792b48d","href":"https://static.observableusercontent.com/files/8dca4bc57eb3151925428d13b850d8371c108a1470dcad2bc2d18ea98bc0e4687f519ea51202a248907a6bb812d9eefed768bb579e4463907847ec302792b48d","name":"preprocessed.json","type":"application/json","lastModified":1669549483009.516,"size":366861}] 48:{"id":"c395d17db9924ff0","slug":"emojis-with-input-picker","title":"Emojis with input picker","thumbnail":"3587e9b148ab54101da09188188516d3036cb6fe02268e5b66748fc237510a8b","access_level":"public","create_time":"$D2022-11-27T11:44:43.009Z","update_time":"$D2022-11-27T12:41:09.710Z","view_time":null,"first_public_time":"$D2022-11-27T11:44:43.009Z","has_unpublished_edits":null,"fork":{"id":"5bfd35348f5890ec","slug":"emojis","title":"Emojis","owner":{"id":"82bbf5c48c1a81ef","login":"codingwithfire","name":"Coding with Fire"}},"stars":1,"starred":false,"owner":{"type":"team","id":"46ff62597172a6f5","login":"a2m0","name":"Ammø","avatar_url":"https://avatars-next.observableusercontent.com/801308717e022f39d6a78bd80cfec7302e0665d1daae92a3138770843dd73213","tier":"starter_2024","bio":"","following":false},"version":698,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"590e135bc61781ed","login":"a2m0","name":"Ammø","avatar_url":"https://avatars-next.observableusercontent.com/801308717e022f39d6a78bd80cfec7302e0665d1daae92a3138770843dd73213","tier":null,"bio":"","following":false}],"members":[{"type":"individual","id":"590e135bc61781ed","login":"a2m0","name":"Ammø","avatar_url":"https://avatars-next.observableusercontent.com/801308717e022f39d6a78bd80cfec7302e0665d1daae92a3138770843dd73213","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Emojis with input picker","cells":[{"id":0,"value":"md`# Emojis _with input picker_`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"md`\nTreating emojis as data. We looked at these datasets \n[Kaggle Dataset on Emojis](https://www.kaggle.com/thomasseleck/emoji-sentiment-data?select=Emoji_Sentiment_Data_v1.0.csv) \n[Every Emoji](https://observablehq.com/@jashkenas/every-emoji)\n\nThis short video goes over how we made this notebook and our [Treemap Small Multiples](https://observablehq.com/@codingwithfire/emoji-treemap-small-multiples) visualization as well:\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":58,"value":"emojicanvas = {\n let canvas = d3\n .create(\"canvas\")\n .attr(\"width\", canvasSize)\n .attr(\"height\", canvasSize)\n .node();\n // canvas.width = `${canvasSize}px`;\n // canvas.height = `${canvasSize}px`;\n\n let ctx = canvas.getContext(\"2d\");\n\n ctx.fillStyle = \"#fff\";\n ctx.fillRect(0, 0, canvasSize, canvasSize);\n ctx.fillStyle = \"#000\";\n ctx.font = `${fontSize}px sans-serif`;\n ctx.fillText(chosen, 0, fontSize);\n\n return canvas;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":224,"value":"md`Original pixel data`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":204,"value":"renderImageData(emojipixels)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":646,"value":"md`EJ's interpretation`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":138,"value":"viewof q5Canvas = {\n let q5, el;\n let width = canvasSize * pixelSize;\n if (this) {\n el = this;\n q5 = this.value;\n } else {\n q5 = new Q5();\n q5.createCanvas(width, width);\n el = html`${q5.canvas}`;\n el.value = q5;\n }\n yield el;\n q5.clear();\n q5.noStroke();\n\n q5.fill(\"rgba(255,255,255, 1)\");\n q5.rect(0, 0, width, width);\n\n let a = emojipixels.data;\n let pixelMagnitude = 1.4;\n for (let i = 0; i < emojipixels.data.length; i += 4) {\n let x = ((i / 4) % canvasSize) * pixelSize;\n let y = Math.floor(i / 4 / canvasSize) * pixelSize;\n\n let avg = (a[i] + a[i + 1] + a[i + 2]) / 3 / 4;\n\n q5.fill(`rgba(${[a[i], a[i + 1], a[i + 2], a[i + 3]]})`);\n // q5.fill(`rgba(${255 - avg},${255 - avg},${255 - avg},0.8)`);\n // q5.rect(x, y, pixelSize - 2, pixelSize - 2);\n // q5.circle(x, y, Math.sqrt(avg));\n q5.circle(x, y, avg * 0.25);\n }\n\n yield el;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":649,"value":"md`Top colors, using [this technique](https://observablehq.com/@romaklimenko/finding-palettes-of-dominant-colors-with-the-k-means-cluste).`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":275,"value":"$4c","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":236,"value":"html`\n${topcolors.map(d => {\n return html`

`;\n})}\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":220,"value":"md`Rerendered with only top colors`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":187,"value":"renderImageData(processed)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":606,"value":"md`Click on an emoji to change the visualizations above.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":672,"value":"// modified by #SkyFi to use a function instead of in-lined code - the function allows the code to be shared\nviewof choice = inputEmojiPicker()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":345,"value":"chosen = choice.Emoji","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":428,"value":"choice","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":349,"value":"sortedEmojis = sorted.map(d => d.Emoji)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":39,"value":"sizeScale = d3\n .scaleLog()\n .domain(d3.extent(emojis, d => d.Occurrences))\n .range([2, 64])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":316,"value":"opacityScale = d3\n .scaleLinear()\n .domain(d3.extent(emojis, d => d.Occurrences))\n .range([0.1, 1])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"emojis = FileAttachment(\"Emoji_Sentiment_Data_v1.0.csv\").csv({ typed: false })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":59,"value":"emojisWithMoreData = emojis.map(e => {\n e.descLength = e['Unicode name'].length;\n e.descWords = e['Unicode name'].split(' ').length;\n // e.topColors = topColors(e.Emoji);\n return e;\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":24,"value":"//sorted = emojisWithMoreData.sort((a, b) => b.Occurrences - a.Occurrences)\nsorted = emojis.sort((a, b) => a.descWords - b.descWords)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":52,"value":"md`# Dominant Colors`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":55,"value":"// chosen = ({\n// // Emoji: \"🙈\"\n// // Emoji: \"😱\"\n// Emoji: \"🍁\"\n// })\n// //sorted[6]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":271,"value":"// viewof chosen = Scrubber(emojisWithMoreData, {\n// delay: 2500,\n// autoplay: false,\n// format: e => e.Emoji\n// })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":300,"value":"// chosen = ({ Emoji: \"🔥\" })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":60,"value":"fontSize = 40","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":65,"value":"canvasSize = fontSize + 10","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":114,"value":"emojipixels = emojicanvas\n .getContext(\"2d\")\n .getImageData(0, 0, canvasSize, canvasSize)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":371,"value":"seedSize = 100","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":167,"value":"// import { result, distance }\n// with {\n// emojipixels as imageData\n// }\nimport {\n distance,\n // seedSize,\n kmeans\n} from \"@romaklimenko/finding-palettes-of-dominant-colors-with-the-k-means-cluste\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":342,"value":"$4d","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":170,"value":"result = dominantColors(chosen)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":197,"value":"topcolors = result.centroids\n .filter(d => {\n return d.variance && (d[0] < 253 && d[1] < 253 && d[2] < 253);\n })\n .map(d => {\n return {\n color: d,\n value: d.points.length\n };\n })\n .sort((a, b) => b.value - a.value)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":360,"value":"// preprocessed = sorted.slice(0, 1000).map(d => {\n// console.log(d.Emoji);\n// return {\n// ...d,\n// topColors: dominantColors(d.Emoji)\n// .centroids.filter(d => {\n// return d.variance && (d[0] < 252 && d[1] < 252 && d[2] < 252);\n// })\n// .map(d => {\n// return {\n// color: d,\n// value: d.points.length\n// };\n// })\n// .sort((a, b) => b.value - a.value)\n// };\n// })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":391,"value":"files = [\n FileAttachment(\"preprocessed.json\")\n // FileAttachment(\"sortedProcessed2@1.json\")\n // FileAttachment(\"sortedProcessed (1).json\"),\n // FileAttachment(\"sortedProcessed (2).json\"),\n // FileAttachment(\"sortedProcessed (3).json\"),\n // FileAttachment(\"sortedProcessed (4).json\"),\n // FileAttachment(\"sortedProcessed (5).json\"),\n // FileAttachment(\"sortedProcessed (6).json\"),\n // FileAttachment(\"sortedProcessed (7).json\"),\n // FileAttachment(\"sortedProcessed (8).json\"),\n // FileAttachment(\"sortedProcessed (9).json\")\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":396,"value":"promises = files.map(file => file.json())","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":399,"value":"datasets = Promise.all(promises)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":406,"value":"sortedProcessed = {\n let result = [];\n datasets.forEach(d => {\n result = result.concat(d);\n });\n\n return result;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":295,"value":"treemapWidth = 100","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":260,"value":"treemapHeight = 100","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":258,"value":"treemap = d3\n .treemap()\n .tile(d3.treemapSquarify)\n .size([treemapWidth, treemapHeight])\n .padding(1)\n// .round(true)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":264,"value":"data = ({\n name: \"emojis\",\n children: topcolors\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":263,"value":"root = d3\n .hierarchy(data)\n .sum(d => d.value)\n .sort((a, b) => b.value - a.value)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":176,"value":"$4e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":131,"value":"pixelSize = 10","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":130,"value":"reconstructed = {\n let canvas = d3\n .create(\"canvas\")\n .attr(\"width\", canvasSize * pixelSize)\n .attr(\"height\", canvasSize * pixelSize)\n .node();\n // canvas.width = `${canvasSize}px`;\n // canvas.height = `${canvasSize}px`;\n\n let ctx = canvas.getContext(\"2d\");\n\n ctx.fillStyle = \"black\";\n // ctx.fillRect(0, 0, canvasSize, canvasSize);\n\n let a = emojipixels.data;\n for (let i = 0; i < emojipixels.data.length; i += 4) {\n let x = ((i / 4) % canvasSize) * pixelSize;\n let y = Math.floor(i / 4 / canvasSize) * pixelSize;\n\n ctx.fillStyle = `rgba(${[a[i], a[i + 1], a[i + 2], a[i + 3]]})`;\n ctx.fillRect(x, y, pixelSize - 2, pixelSize - 2);\n }\n\n return canvas;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":181,"value":"function renderImageData(imageData) {\n let canvas = d3\n .create(\"canvas\")\n .attr(\"width\", canvasSize * pixelSize)\n .attr(\"height\", canvasSize * pixelSize)\n .node();\n // canvas.width = `${canvasSize}px`;\n // canvas.height = `${canvasSize}px`;\n\n let ctx = canvas.getContext(\"2d\");\n\n ctx.fillStyle = \"black\";\n // ctx.fillRect(0, 0, canvasSize, canvasSize);\n\n let a = imageData.data;\n for (let i = 0; i < a.length; i += 4) {\n let x = ((i / 4) % canvasSize) * pixelSize;\n let y = Math.floor(i / 4 / canvasSize) * pixelSize;\n\n ctx.fillStyle = `rgba(${[a[i], a[i + 1], a[i + 2], a[i + 3]]})`;\n ctx.fillRect(x, y, pixelSize - 2, pixelSize - 2);\n }\n\n return canvas;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":121,"value":"d3.extent(emojipixels.data)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"d3.extent(emojis, d => d.Position)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"d3 = require(\"d3@6\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":135,"value":"Q5 = require(\"https://cdn.jsdelivr.net/gh/LingDong-/q5xjs/q5.min.js\").catch(\n () => window.Q5\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":278,"value":"import { Scrubber } from \"@mbostock/scrubber\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":664,"value":"_p.s._ This modifies the original notebook by using a function #SkyFi","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":676,"value":"### Embedded Emoji Picker\n\nThis is the orginal \"choice\" var from @codingwithfire/emojis notebook. Original had this code inside of viewof, which not friendly to embedding. Instead, we make it a function, taking the main encoder HTML input control to appended the \"picked emoji\". \n\nIt take one param, `control`. If `control` is missing (as in this notebook), the it just \"returns\" the last clicked emoji. If `control` is provided a DOM element (e.g. `viewof _your_input_text_control`), it will append the selected emoji to the value of the control.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":662,"value":"inputEmojiPicker = (control) => {\n let div = html`

`;\n div.value = sorted[0];\n d3.select(div)\n .selectAll(\"div.emoji\")\n .data(sorted)\n .join(\"div\")\n .classed(\"emoji\", true)\n // .style(\"font-size\", d => sizeScale(d.Occurrences) + \"px\")\n .style(\"font-size\", \"25px\")\n .style(\"display\", \"inline-block\")\n .style(\"cursor\", \"pointer\")\n .style(\"opacity\", d => {\n return opacityScale(d.Occurences);\n })\n .attr(\"title\", d => d[\"Unicode name\"])\n .text(d => d.Emoji)\n .on(\"click\", (event, d) => {\n div.value = d;\n div.dispatchEvent(new CustomEvent(\"input\", { bubbles: true }));\n // THIS IS THE CODE THE UPDATES THE MAIN INPUT:\n if (control) {\n control.value += d[\"Emoji\"]\n control.dispatchEvent(new CustomEvent(\"input\", { bubbles: true }));\n }\n });\n\n return div;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":683,"value":"For example,","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":680,"value":"viewof someInputText = Inputs.text({value: \"👍\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":694,"value":"Then, call `inputEmojiPicker(viewof someInputText)` which will display the list of emojis. Clicking on an emoji causes the control to be appended with the selected emoji.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":690,"value":"inputEmojiPicker(viewof someInputText)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4f","stdlib":"1"}} 24:null