2b:null 2c:["$","title",null,{"children":"Emoji Treemap Small Multiples | Coding with Fire | Observable"}] 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:{"id":"8df7036c6ee71980","slug":"emoji-treemap-small-multiples","title":"Emoji Treemap Small Multiples","thumbnail":"1e3d78d3b86d0d3f5619513bfe5fcc16f432c67435cff9bdcbe1cd84deae4163","access_level":"public","create_time":"$D2020-09-29T01:39:09.123Z","update_time":"$D2020-10-12T01:56:43.281Z","view_time":null,"first_public_time":"$D2020-09-29T01:40:30.140Z","fork":false,"stars":32,"starred":false,"owner":{"type":"team","id":"82bbf5c48c1a81ef","login":"codingwithfire","name":"Coding with Fire","avatar_url":"https://avatars-next.observableusercontent.com/0efd3ecc6a639fdb4fe7962b37ca4a79746ef2d2f29888495c28572970019a78","tier":"starter_2024"},"version":210,"publish_version":210,"role":null,"authored":false,"authors":[{"type":"individual","id":"beed161c3770e09c","login":"ejfox","name":"EJ Fox","avatar_url":"https://avatars-next.observableusercontent.com/b117d362b89a664de5bd3cb86aaeef7ed91e89e4ddbf29cf73c7bdb4279d7b4b","tier":null}],"members":[{"type":"team","id":"82bbf5c48c1a81ef","login":"codingwithfire","name":"Coding with Fire","avatar_url":"https://avatars-next.observableusercontent.com/0efd3ecc6a639fdb4fe7962b37ca4a79746ef2d2f29888495c28572970019a78","tier":"starter_2024","role":"editor"},{"type":"individual","id":"beed161c3770e09c","login":"ejfox","name":"EJ Fox","avatar_url":"https://avatars-next.observableusercontent.com/b117d362b89a664de5bd3cb86aaeef7ed91e89e4ddbf29cf73c7bdb4279d7b4b","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"subscribed":null,"forks":7,"collection":{"id":"f04fe829cdd37f61","slug":"coding-with-fire","title":"Season 1","owner":{"id":"82bbf5c48c1a81ef","login":"codingwithfire","name":"Coding with Fire"}},"type":"notebook","body":{"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","author":"$undefined","summary":"$undefined"},{"id":199,"value":"html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":206,"value":"md`You can also check out the companion [Emojis notebook](https://observablehq.com/@codingwithfire/emojis).`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":34,"value":"$31","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"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","author":"$undefined","summary":"$undefined"},{"id":4,"value":"import { sortedProcessed } from '@codingwithfire/emojis'","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":100,"value":"treemapSize = 40","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":113,"value":"colorTreemap(sortedProcessed[0])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":123,"value":"sortedProcessed.map(d => d.topColors)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":209,"value":"sortedProcessed","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"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","author":"$undefined","summary":"$undefined"},{"id":78,"value":"sortedProcessed","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"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","author":"$undefined","summary":"$undefined"},{"id":161,"value":"subset = haveColor.slice(0, 150).concat(haveColor.slice(500, 672))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":156,"value":"$32","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":37,"value":"d3 = require(\"d3@6\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}} 30:"$2f:body"