30:T40c,viewof __searchBox = { const version = __versionInput; const filteredEmojiForSearch = emojiForSearch.filter( (d) => version === ALL_VERSIONS || version === d.version ); const searchField = Inputs.search(filteredEmojiForSearch, { label: "Search", format: (d) => d.toString() }); const performSearch = _.debounce( () => renderSearchResults(emojiTree, searchField.value), 600 ); const template = ([searchBox, clearButton]) => htl.html`

${searchBox}

`; d3.select(searchField).on("input", performSearch); if ( (await hashThing(filteredEmojiForSearch)) !== (await hashThing(emojiStore.prev)) ) { emojiStore.prev = filteredEmojiForSearch; performSearch(); } const form = Inputs.form([searchField], { template }); form.value.performSearch = performSearch; return form; }31:[{"id":"4270e48aa2aa0bec336615209990e81052bbb3bb87e370c23a077214ead89a14c0d3ba8672def79b9429e36f51fa7585c3f17c5b4307c9542c3e03183faac7ad","href":"https://static.observableusercontent.com/files/4270e48aa2aa0bec336615209990e81052bbb3bb87e370c23a077214ead89a14c0d3ba8672def79b9429e36f51fa7585c3f17c5b4307c9542c3e03183faac7ad","name":"2025-03-26-emoji-17.json","type":"application/json","lastModified":1743021069876.196,"size":772556}] 2e:{"title":"Emoji Explorer","cells":[{"id":0,"value":"# Emoji Explorer","pinned":false,"hidden":false,"mode":"md"},{"id":1516,"value":"renderVisitOnThumbtoolsButton()","pinned":false,"hidden":false,"mode":"ojs"},{"id":1107,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":1342,"value":"viewof __versionInput = Inputs.select(versions, {\n label: \"Version\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":312,"value":"viewof __emoji = {\n const { offsetWidth, offsetHeight } = d3.select(\"body\").node();\n \n return renderVoronoiChart({\n size: {\n width: offsetWidth,\n height: hostedOnThumbtools() ? offsetHeight * 0.7 : 500,\n },\n data: emojiTree,\n getName,\n getId: (d) => d.id,\n disableHover: isMobile(),\n dispatcher,\n showColorBoxInPath: false,\n showValueInPath: false,\n renderTooltipContent,\n onShiftClick: (event, node) =>\n navigator.clipboard.writeText(node.data.exemplar.emoji)\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":756,"value":"__style = {\n setPageTitle(\"Emoji Explorer\");\n return renderStyle({\n thumbToolsOnly: `\n @import url('https://fonts.googleapis.com/css2?family=Questrial&display=swap');\n\n body {\n font-family: 'Questrial', sans-serif;\n font-size: 1.2em;\n margin: 2em;\n }\n \n @media (pointer:none), (pointer:coarse) {\n form > label {\n _background: lightgreen;\n width: 200px !important;\n }\n\n form > div > input, form > select {\n font-size: 8vw !important;\n width: 400px !important;\n }\n\n body { \n font-size: 3em;\n margin: 1em;\n }\n }`\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":596,"value":"__variants = renderVariantes(__emoji)","pinned":false,"hidden":false,"mode":"ojs"},{"id":220,"value":"## Data","pinned":false,"hidden":false,"mode":"md"},{"id":1479,"value":"emojiStore = ({\n prev: emojiForSearch\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1223,"value":"versions = [ALL_VERSIONS, ...[...new Set(canonicalEmoji.map(d => d.version))].sort((a, b) => d3.descending(a, b)).map(d => `v${d}`)]","pinned":false,"hidden":false,"mode":"ojs"},{"id":300,"value":"emojiTree = {\n const tree = d3\n .stratify()\n .path(emojiPath)(canonicalEmoji)\n .sum((datum) => (!!datum ? 1 : 0))\n .each((node) => {\n node.backup = {\n children: node.children,\n id: node.id,\n element: node.id.split(\"/\").at(-1)\n };\n });\n recomputeTreeExemplars(tree);\n return tree;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1106,"value":"emojiForSearch = emojiTree\n .leaves()\n .map((d) => d.data.exemplar)\n .map(({ sub_group, version, ...rest }) => ({\n sub_group: sub_group.replaceAll(\"-\", \" \"),\n version: `v${version}`,\n ...rest\n }))","pinned":false,"hidden":false,"mode":"ojs"},{"id":13,"value":"canonicalEmojiComplete = establishCanonicalEmoji(\n await (\n fetchEmojis(\"17.0\") ?? FileAttachment(\"2025-03-26-emoji-17.json\").json()\n ).then((withDupes) =>\n [...d3.group(withDupes, emojiPathWithVaraint).values()]\n .map((d) => d[0])\n .flat()\n )\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":52,"value":"canonicalEmoji = canonicalEmojiComplete.filter((d) => !!d.exemplar)","pinned":false,"hidden":false,"mode":"ojs"},{"id":186,"value":"sampleEmoji = canonicalEmoji.slice(0, 14)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1104,"value":"dispatcher = createDispatcher()","pinned":false,"hidden":false,"mode":"ojs"},{"id":1260,"value":"ALL_VERSIONS = \"All\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1521,"value":"test = fetchEmojis()","pinned":false,"hidden":false,"mode":"ojs"},{"id":45,"value":"## Code","pinned":false,"hidden":false,"mode":"md"},{"id":1155,"value":"function removeElementFromNodeIds(node, element) {\n node.id = node.id\n .split(\"/\")\n .filter((d) => d !== element)\n .join(\"/\");\n\n node.children?.forEach((child) => removeElementFromNodeIds(child, element));\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1098,"value":"function removeStringyBranches(node) {\n if (!node.children) {\n return node;\n }\n\n if (node.children.length === 1 && node.id !== \"/\") {\n const [child] = node.children;\n //console.log({ s1: child.id, el: node.backup.element });\n removeElementFromNodeIds(child, node.backup.element);\n //console.log({ s2: child.id }); \n return removeStringyBranches(child);\n }\n\n node.children = node.children.map(removeStringyBranches);\n\n return node;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1096,"value":"renderSearchResults = (tree, searchResults) => {\n if (searchResults.length === 0) {\n return;\n }\n\n const targetMap = d3.group(searchResults, (d) => d.name);\n restoreTree(tree);\n tree\n .leaves()\n .filter((leaf) => !targetMap.get(leaf.data.exemplar.name))\n .forEach(hideSelf);\n tree = removeStringyBranches(tree);\n recomputeTreeMetrics(tree);\n tree = recomputeTreeExemplars(tree);\n tree.sum((datum) => (!!datum ? 1 : 0))\n dispatcher.call(EVENT_TYPE_REFOCUS, this, tree);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":985,"value":"getName = ({ id, exemplar, data, depth, height }, context, current) => {\n const title = id === \"/\" ? \"Emoji\" : id.split(\"/\").at(-1);\n\n switch (context) {\n case CONTEXT_PATH:\n return `${exemplar.emoji} ${title}`;\n case CONTEXT_VORONOI:\n return depth - current.depth !== 1 || height === 0\n ? exemplar.emoji\n : title;\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1101,"value":"restoreTree = (root) =>\n root.each((node) => {\n node.children = node.backup.children;\n node.id = node.backup.id;\n })","pinned":false,"hidden":false,"mode":"ojs"},{"id":869,"value":"showLabel = (node, current) => {\n return (\n node.depth === current.depth + 1 || node.depth === current.depth + 2 || current.height === 0\n );\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1097,"value":"function removeStringyBranches1(node) {\n if (!node.children) {\n return node;\n }\n\n if (node.children.length === 1) {\n const [child] = node.children;\n node.children = child.children ?? [child];\n }\n node.children.forEach(removeStringyBranches);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1095,"value":"function recomputeTreeMetrics(node, depth = 0) {\n node.depth = depth;\n if (!!node.children) {\n node.children.forEach(child => recomputeTreeMetrics(child, depth + 1));\n node.height = d3.max(node.children.map(d => d.height)) + 1;\n } else {\n node.height = 0;\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1094,"value":"recomputeTreeExemplars = (node) =>\n node.each((node) => (node.exemplar = node.leaves()[0].data.exemplar))","pinned":false,"hidden":false,"mode":"ojs"},{"id":1093,"value":"function hideSelf(node) {\n const { parent, id } = node;\n if (!parent) return;\n\n parent.children = parent.children.filter((d) => d.id !== id);\n if (parent.children.length === 0) {\n hideSelf(parent);\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":667,"value":"renderVariantes = (emoji) => {\n if (!emoji?.data?.variants) {\n return md`Select an emoji to see and copy its variants.`;\n }\n\n return htl.html`\n

${titleize(emoji.data.name)} v${emoji.data.version}

\n ${emoji?.data?.variants.map((d) => {\n return d3\n .create(\"div\")\n .style(\"cursor\", \"pointer\")\n .style(\"border\", \"0.5px solid #ccc\")\n .style(\"background\", \"white\")\n .style(\"border-radius\", \"4px\")\n .style(\"margin\", \"0.1em\")\n .style(\"padding\", \"0px 0.05em\")\n .attr(\"title\", titleize(d.name.replace(\": \", \"\\n\")))\n .on(\"click\", () => navigator.clipboard.writeText(d.emoji))\n .text(d.emoji)\n .node();\n })}\n

Click to Copy

`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":367,"value":"renderTooltipContent = ({\n datum: {\n data: {\n exemplar: { emoji, name, version }\n }\n }\n}) =>htl.html`

v${version}

${emoji}

${titleize(name)}

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":15,"value":"normalizeName = (name) => name.split(\":\")[0]","pinned":false,"hidden":false,"mode":"ojs"},{"id":31,"value":"establishCanonicalEmoji = (emoji) => {\n const normalizedMap = Object.fromEntries(\n d3.group(emoji, (d) => normalizeName(d.name))\n );\n return Object.entries(normalizedMap).map(([name, variants]) => ({\n name,\n version: variants[0].version,\n exemplar: variants.find((d) => d.name === name),\n variants\n }));\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":57,"value":"emojiPath = ({ exemplar: { group, sub_group, name } }) =>\n `${titleize(group)}/${titleize(sub_group)}/${titleize(name)}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":424,"value":"emojiPathWithVaraint = ({ group, sub_group, name }) => {\n const [prefix, detail] = name.split(\":\");\n\n return [group, sub_group, prefix, ...(!!detail ? [detail] : [])]\n .map(titleize)\n .join(\"/\");\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1341,"value":"async function hashThing(thing) {\n let str;\n\n if (typeof thing === 'object') {\n str = JSON.stringify(thing); // Serialize objects to strings\n } else if (typeof thing === 'string') {\n str = thing;\n } else {\n return null; // Handle other types (numbers, booleans, etc.) as needed\n }\n\n const utf8 = new TextEncoder().encode(str);\n const digest = await crypto.subtle.digest('SHA-256', utf8);\n const hashArray = Array.from(new Uint8Array(digest));\n const hashHex = hashArray\n .map((bytes) => bytes.toString(16).padStart(2, '0'))\n .join('');\n return hashHex;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":251,"value":"## Imports","pinned":false,"hidden":false,"mode":"md"},{"id":253,"value":"import { titleize } from \"@trebor/titleize\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1206,"value":"import {fetchEmojis} from \"@trebor/emoji-data-file-converter\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":758,"value":"import {\n renderStyle,\n windowSize,\n hostedOnThumbtools,\n isMobile,\n getThumbtoolsUrl,\n renderVisitOnThumbtoolsButton,\n setPageTitle\n} from \"@trebor/thumbtools\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":286,"value":"import { renderChart as renderVoronoiChart, CONTEXT_VORONOI, CONTEXT_PATH, createDispatcher, EVENT_TYPE_REFOCUS } with { showLabel } from \"@trebor/zoomable-voronoi-treemap\"","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}