31:T61e,viewof chosen = { let div = html`

`; div.value = sortedProcessed[0]; d3.select(div) .selectAll("div.emoji") .data( sortedProcessed .filter(d => d.topColors.length) .sort((a, b) => c2h(a.topColors[0]) - c2h(b.topColors[0])) ) .join("div") .classed("emoji", true) // .style("font-size", d => sizeScale(d.Occurrences) + "px") .style("display", "inline-block") // .style("margin-right", "7px") .style("cursor", "pointer") // .style("opacity", d => { // return opacityScale(d.Occurences); // }) .attr("title", d => d["Unicode name"]) // .text(d => d.Emoji) .each(function(d) { let span = html``; d3.select(span) .style("font-size", `${treemapSize}px`) .style("line-height", `${treemapSize}px`) .style("vertical-align", "super"); this.appendChild(span); this.appendChild(colorTreemap(d)); }) .on("click", (event, d) => { div.value = d; div.dispatchEvent(new CustomEvent("input", { bubbles: true })); }) .on("mouseover", function(event, d) { d3.select(this) .select("span") .style("display", "inline-block"); d3.select(this) .select("svg") .style("display", "none"); }) .on("mouseout", function(event, d) { d3.select(this) .select("span") .style("display", "none"); d3.select(this) .select("svg") .style("display", "inline-block"); }); return div; }32:T59e,viewof chosen2 = { let div = html`

`; div.value = sortedProcessed[0]; d3.select(div) .selectAll("div.emoji") .data(subset) .join("div") .classed("emoji", true) // .style("font-size", d => sizeScale(d.Occurrences) + "px") .style("display", "inline-block") // .style("margin-right", "7px") .style("cursor", "pointer") // .style("opacity", d => { // return opacityScale(d.Occurences); // }) .attr("title", d => d["Unicode name"]) // .text(d => d.Emoji) .each(function(d) { let span = html``; d3.select(span) .style("font-size", `${treemapSize}px`) .style("line-height", `${treemapSize}px`) .style("vertical-align", "super"); this.appendChild(span); this.appendChild(colorTreemap(d)); }) .on("click", (event, d) => { div.value = d; div.dispatchEvent(new CustomEvent("input", { bubbles: true })); }) .on("mouseover", function(event, d) { d3.select(this) .select("span") .style("display", "inline-block"); d3.select(this) .select("svg") .style("display", "none"); }) .on("mouseout", function(event, d) { d3.select(this) .select("span") .style("display", "none"); d3.select(this) .select("svg") .style("display", "inline-block"); }); return div; }33:[] 2f:{"title":"Emoji Treemap Small Multiples","cells":[{"id":0,"value":"md`# Emoji Treemap Small Multiples\nWatch this short video to see how we made this visualization. \n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":199,"value":"html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":206,"value":"md`You can also check out the companion [Emojis notebook](https://observablehq.com/@codingwithfire/emojis).`","pinned":false,"hidden":false,"mode":"ojs"},{"id":34,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":144,"value":"c2h = function(c) {\n let d = d3.hsl(\"rgb(\" + c.color.join(\",\") + \")\");\n return d.l;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":4,"value":"import { sortedProcessed } from '@codingwithfire/emojis'","pinned":true,"hidden":false,"mode":"ojs"},{"id":100,"value":"treemapSize = 40","pinned":true,"hidden":false,"mode":"ojs"},{"id":113,"value":"colorTreemap(sortedProcessed[0])","pinned":true,"hidden":false,"mode":"ojs"},{"id":123,"value":"sortedProcessed.map(d => d.topColors)","pinned":true,"hidden":false,"mode":"ojs"},{"id":209,"value":"sortedProcessed","pinned":true,"hidden":false,"mode":"ojs"},{"id":99,"value":"function colorTreemap(emoji) {\n let treemap = d3\n .treemap()\n .tile(d3.treemapSquarify)\n .size([treemapSize, treemapSize])\n .padding(1);\n // .round(true)\n\n let data = {\n name: \"emojis\",\n children: emoji.topColors\n };\n\n let root = d3\n .hierarchy(data)\n .sum(d => d.value)\n .sort((a, b) => b.value - a.value);\n\n let tree = treemap(root);\n\n let svg = d3\n .create(\"svg\")\n .attr(\"width\", treemapSize)\n .attr(\"height\", treemapSize);\n\n let leaf = svg\n .selectAll(\"g\")\n .data(tree.leaves())\n .join(\"g\")\n .attr(\"transform\", d => `translate(${d.x0},${d.y0})`);\n\n leaf\n .append(\"rect\")\n .attr(\"width\", d => d.x1 - d.x0)\n .attr(\"height\", d => d.y1 - d.y0)\n // .attr(\"fill\", d => { while (d.depth > 1) d = d.parent; return color(d.data.name) })\n // .attr(\"fill\", d => { return color(d.data.name) })\n .attr(\n \"fill\",\n d => `rgb(${d.data.color ? d.data.color.join(\",\") : \"255,255,255\"})`\n )\n .attr(\"fill-opacity\", 1);\n\n return svg.node();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":78,"value":"sortedProcessed","pinned":true,"hidden":false,"mode":"ojs"},{"id":159,"value":"haveColor = sortedProcessed\n .filter(d => d.topColors.length)\n .sort((a, b) => c2h(a.topColors[0]) - c2h(b.topColors[0]))","pinned":true,"hidden":false,"mode":"ojs"},{"id":161,"value":"subset = haveColor.slice(0, 150).concat(haveColor.slice(500, 672))","pinned":true,"hidden":false,"mode":"ojs"},{"id":156,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"},{"id":37,"value":"d3 = require(\"d3@6\")","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}