30: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(); }31: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); }32: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; }33:[{"id":"83c8c466ee25841aee037c6c2af8f27eb0fe169cf884f9f24d0ab94c8514f989a77f66329c728ad336fa02f9b300f19eb5a57fc68790604411ecc096d159b0ab","href":"https://static.observableusercontent.com/files/83c8c466ee25841aee037c6c2af8f27eb0fe169cf884f9f24d0ab94c8514f989a77f66329c728ad336fa02f9b300f19eb5a57fc68790604411ecc096d159b0ab","name":"sortedProcessed2.json","type":"application/json","lastModified":1601350649103.228,"size":35880},{"id":"0a3f1d3f209b5327b50d1d663bdbc1239e8474d7b74576887b45101458b47e43a701da342af149369abc01e6edba47cf2d40597820fb9ecab590ec59de3c64dc","href":"https://static.observableusercontent.com/files/0a3f1d3f209b5327b50d1d663bdbc1239e8474d7b74576887b45101458b47e43a701da342af149369abc01e6edba47cf2d40597820fb9ecab590ec59de3c64dc","name":"Emoji_Sentiment_Data_v1.0.csv","type":"text/csv","lastModified":1601339040202.153,"size":78880},{"id":"3ff70d87c6298d2503e244567b26189ebf746603fa91ada27f018b82358ba16fb745c1255066097cc494f11d8badfa07a16837114bb38e6c3fb13f9a3cd7e0df","href":"https://static.observableusercontent.com/files/3ff70d87c6298d2503e244567b26189ebf746603fa91ada27f018b82358ba16fb745c1255066097cc494f11d8badfa07a16837114bb38e6c3fb13f9a3cd7e0df","name":"sortedProcessed2@1.json","type":"application/json","lastModified":1601351290240.814,"size":21478},{"id":"8dca4bc57eb3151925428d13b850d8371c108a1470dcad2bc2d18ea98bc0e4687f519ea51202a248907a6bb812d9eefed768bb579e4463907847ec302792b48d","href":"https://static.observableusercontent.com/files/8dca4bc57eb3151925428d13b850d8371c108a1470dcad2bc2d18ea98bc0e4687f519ea51202a248907a6bb812d9eefed768bb579e4463907847ec302792b48d","name":"preprocessed.json","type":"application/json","lastModified":1601351680924.324,"size":366861}] 2e:{"title":"Emojis","cells":[{"id":0,"value":"md`# Emojis`","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"id":224,"value":"md`Original pixel data`","pinned":false,"hidden":false,"mode":"ojs"},{"id":204,"value":"renderImageData(emojipixels)","pinned":false,"hidden":false,"mode":"ojs"},{"id":646,"value":"md`EJ's interpretation`","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"id":275,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":236,"value":"html`\n${topcolors.map(d => {\n return html`

`;\n})}\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":220,"value":"md`Rerendered with only top colors`","pinned":false,"hidden":false,"mode":"ojs"},{"id":187,"value":"renderImageData(processed)","pinned":false,"hidden":false,"mode":"ojs"},{"id":606,"value":"md`Click on an emoji to change the visualizations above.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":21,"value":"viewof choice = {\n // let div = html`

${\n // sorted.map(d => {\n // return html`

${d.Emoji}

`;\n // })\n // }

`;\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 });\n\n return div;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":345,"value":"chosen = choice.Emoji","pinned":false,"hidden":false,"mode":"ojs"},{"id":428,"value":"choice","pinned":false,"hidden":false,"mode":"ojs"},{"id":349,"value":"sortedEmojis = sorted.map(d => d.Emoji)","pinned":true,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"id":9,"value":"emojis = FileAttachment(\"Emoji_Sentiment_Data_v1.0.csv\").csv({ typed: false })","pinned":true,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"id":52,"value":"md`# Dominant Colors`","pinned":false,"hidden":false,"mode":"ojs"},{"id":55,"value":"// chosen = ({\n// // Emoji: \"🙈\"\n// // Emoji: \"😱\"\n// Emoji: \"🍁\"\n// })\n// //sorted[6]","pinned":true,"hidden":false,"mode":"ojs"},{"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"},{"id":300,"value":"// chosen = ({ Emoji: \"🔥\" })","pinned":true,"hidden":false,"mode":"ojs"},{"id":60,"value":"fontSize = 40","pinned":true,"hidden":false,"mode":"ojs"},{"id":65,"value":"canvasSize = fontSize + 10","pinned":true,"hidden":false,"mode":"ojs"},{"id":114,"value":"emojipixels = emojicanvas\n .getContext(\"2d\")\n .getImageData(0, 0, canvasSize, canvasSize)","pinned":true,"hidden":false,"mode":"ojs"},{"id":371,"value":"seedSize = 100","pinned":true,"hidden":false,"mode":"ojs"},{"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"},{"id":342,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":170,"value":"result = dominantColors(chosen)","pinned":true,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"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"},{"id":396,"value":"promises = files.map(file => file.json())","pinned":true,"hidden":false,"mode":"ojs"},{"id":399,"value":"datasets = Promise.all(promises)","pinned":true,"hidden":false,"mode":"ojs"},{"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"},{"id":295,"value":"treemapWidth = 100","pinned":true,"hidden":false,"mode":"ojs"},{"id":260,"value":"treemapHeight = 100","pinned":true,"hidden":false,"mode":"ojs"},{"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"},{"id":264,"value":"data = ({\n name: \"emojis\",\n children: topcolors\n})","pinned":true,"hidden":false,"mode":"ojs"},{"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"},{"id":176,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":131,"value":"pixelSize = 10","pinned":true,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"id":121,"value":"d3.extent(emojipixels.data)","pinned":true,"hidden":false,"mode":"ojs"},{"id":19,"value":"d3.extent(emojis, d => d.Position)","pinned":true,"hidden":false,"mode":"ojs"},{"id":16,"value":"d3 = require(\"d3@6\")","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":278,"value":"import { Scrubber } from \"@mbostock/scrubber\"","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}