2e:null 2f:["$","title",null,{"children":"Bears Will Be Boys | Yonsei University | Observable"}] 34:T5de7,{ const raw = await FileAttachment("kids-book-animals.csv").csv({ typed: true }); const availableAnimals = [ "aardvark", "alligator", "ape", "armadillo", "baboon", "badger", "bat", "bear", "beaver", "bee", "bird", "boa constrictor", "bug", "butterfly", "camel", "cat", "caterpillar", "chameleon", "chicken", "chimpanzee", "chipmunk", "clam", "cobra", "cow", "crab", "cricket", "crocodile", "crow", "deer", "dinosaur", "dog", "dolphin", "donkey", "dragonfly", "duck", "eagle", "eel", "elephant", "falcon", "firefly", "fish", "flamingo", "flea", "fly", "fox", "frog", "gecko", "giraffe", "goat", "goose", "gorilla", "grasshopper", "groundhog", "guinea pig", "hawk", "hedgehog", "hen", "hippo", "hog", "horse", "hyena", "iguana", "inchworm", "jaguar", "jellyfish", "kangaroo", "koala", "ladybug", "lemming", "leopard", "lion", "lizard", "llama", "lobster", "luna moth", "meerkat", "mink", "mole", "mongoose", "monkey", "moose", "mosquito", "moth", "mouse", "muskrat", "narwhal", "newt", "no-animal", "octopus", "opossum", "orangutan", "ostrich", "otter", "owl", "ox", "penguin", "pig", "pigeon", "pony", "porcupine", "praying mantis", "rabbit", "raccoon", "rat", "reindeer", "rhino", "robin", "rooster", "seal", "sheep", "skunk", "sloth", "snail", "snake", "sparrow", "spider", "squid", "squirrel", "stag beetle", "starfish", "stink bug", "swan", "tiger", "toad", "tortoise", "turkey", "turtle", "vulture", "walking stick", "walrus", "warthog", "whale", "wolf", "wolverine", "woodchuck", "worm", "yellow jacket", "zebra" ]; const availableSet = new Set(availableAnimals); const aliases = new Map([ ["bunny", "rabbit"], ["hare", "rabbit"], ["kitten", "cat"], ["puppy", "dog"], ["lamb", "sheep"], ["minnow", "fish"], ["lantern fish", "fish"], ["trout", "fish"], ["boa", "boa constrictor"], ["python", "snake"], ["ladybird", "ladybug"], ["rhino beetle", "stag beetle"], ["maybug", "bug"], ["beetle", "stag beetle"], ["possum", "opossum"], ["dove", "bird"], ["magpie", "bird"], ["parrot", "bird"], ["partridge", "bird"], ["raven", "bird"], ["seagull", "bird"], ["stork", "bird"], ["swallow", "bird"], ["wren", "bird"] ]); function normalizeAnimalName(name) { return String(name) .toLowerCase() .trim() .replace(/_/g, " ") .replace(/-/g, " ") .replace(/\s+/g, " "); } function titleCase(s) { return String(s) .split(" ") .map(w => w.charAt(0).toUpperCase() + w.slice(1)) .join(" "); } function pronounGroup(p) { const clean = String(p).toLowerCase().trim(); if (clean === "he/him" || clean === "he" || clean === "him" || clean === "his") { return "he/him"; } if (clean === "she/her" || clean === "she" || clean === "her" || clean === "hers") { return "she/her"; } return "other"; } function pronounLabel(p) { if (p === "he/him") return "He/him"; if (p === "she/her") return "She/her"; return "Other"; } function levenshtein(a, b) { const m = a.length; const n = b.length; const dp = Array.from({ length: m + 1 }, () => Array(n + 1).fill(0)); for (let i = 0; i <= m; i++) dp[i][0] = i; for (let j = 0; j <= n; j++) dp[0][j] = j; for (let i = 1; i <= m; i++) { for (let j = 1; j <= n; j++) { const cost = a[i - 1] === b[j - 1] ? 0 : 1; dp[i][j] = Math.min( dp[i - 1][j] + 1, dp[i][j - 1] + 1, dp[i - 1][j - 1] + cost ); } } return dp[m][n]; } function tokenScore(a, b) { const aTokens = new Set(a.split(" ")); const bTokens = new Set(b.split(" ")); let shared = 0; for (const token of aTokens) { if (bTokens.has(token)) shared++; } return shared / Math.max(aTokens.size, bTokens.size); } function closestAnimalName(name) { const clean = normalizeAnimalName(name); if (availableSet.has(clean)) return clean; if (aliases.has(clean)) return aliases.get(clean); let best = "no-animal"; let bestScore = Infinity; for (const candidate of availableAnimals) { const distance = levenshtein(clean, candidate); const maxLen = Math.max(clean.length, candidate.length); const normalizedDistance = distance / maxLen; const sharedTokenBonus = tokenScore(clean, candidate); let score = normalizedDistance - sharedTokenBonus * 0.45; if (candidate.includes(clean) || clean.includes(candidate)) { score -= 0.3; } if (score < bestScore) { bestScore = score; best = candidate; } } return best; } const rows = raw .filter(d => d.title && d.animal && d.pronoun) .map(d => { const specificAnimal = normalizeAnimalName(d.animal); const groupedAnimal = normalizeAnimalName(d.animal_group || d.animal); const iconAnimal = closestAnimalName(specificAnimal); const groupedPronoun = pronounGroup(d.pronoun); return { title: String(d.title).trim(), animal: groupedAnimal, specific_animal: specificAnimal, icon_animal: iconAnimal, pronoun_raw: String(d.pronoun).trim(), pronoun: groupedPronoun, author: d.author ? String(d.author).trim() : "Unknown author", pub_year: d.pub_year ? String(d.pub_year).trim() : "", book_cover_image: d.book_cover_image ? String(d.book_cover_image).trim() : "", icon_url: `https://raw.githubusercontent.com/the-pudding/kids-book-animals/refs/heads/main/static/assets/animals/${encodeURIComponent(iconAnimal)}.png` }; }); const fullAnimalCounts = new Map(); for (const d of rows) { fullAnimalCounts.set(d.animal, (fullAnimalCounts.get(d.animal) || 0) + 1); } function sortByAnimalCount(items) { const localCounts = new Map(); for (const d of items) { localCounts.set(d.animal, (localCounts.get(d.animal) || 0) + 1); } return items.slice().sort((a, b) => (localCounts.get(b.animal) - localCounts.get(a.animal)) || (fullAnimalCounts.get(b.animal) - fullAnimalCounts.get(a.animal)) || a.animal.localeCompare(b.animal) || a.title.localeCompare(b.title) ); } const data = sortByAnimalCount(rows); const animals = [ "All animals", ...Array.from(new Set(data.map(d => d.animal))).sort((a, b) => a.localeCompare(b)) ]; const pronouns = [ { label: "All pronouns", value: "All pronouns" }, { label: "He/him", value: "he/him" }, { label: "She/her", value: "she/her" }, { label: "Other", value: "other" } ]; const root = html`

Explore All Animal Characters

When I spend time with kids, I become hyperconscious of my word choices. “Look at Mr. Frog in the pond. Doesn’t he look grumpy?” Why did I say Mr. Frog? Why did I say he?

Where do these gendered presumptions even come from, and how pervasive are they? Is it common to assume that a frog is a “he?” What about a bear, or a bird, or a cat, or a pig?

I wanted to know: Which animals do we gender, and why?

Search by title

Filter by animal

Filter by pronoun

Hover an animal icon for details

`; const searchInput = root.querySelector(".search"); const clearSearch = root.querySelector(".clear-search"); const suggestions = root.querySelector(".suggestions"); const animalFilter = root.querySelector(".animal-filter"); const pronounFilter = root.querySelector(".pronoun-filter"); const labels = root.querySelector(".summary-labels"); const bar = root.querySelector(".summary-bar"); const count = root.querySelector(".count"); const grid = root.querySelector(".icon-grid"); const scrollBox = root.querySelector(".icon-scroll"); const tooltip = root.querySelector(".tooltip"); for (const a of animals) { animalFilter.appendChild(new Option(a === "All animals" ? a : titleCase(a), a)); } for (const p of pronouns) { pronounFilter.appendChild(new Option(p.label, p.value)); } const state = { search: "", animal: "All animals", pronoun: "All pronouns" }; function pct(n, total) { return total ? `${((n / total) * 100).toFixed(1)}%` : "0.0%"; } function pronounClass(p) { if (p === "he/him") return "tip-he"; if (p === "she/her") return "tip-she"; return "tip-other"; } function placeTooltip(event) { const rootRect = root.getBoundingClientRect(); const tipRect = tooltip.getBoundingClientRect(); let left = event.clientX - rootRect.left + 18; let top = event.clientY - rootRect.top + 18; if (left + tipRect.width > rootRect.width - 12) { left = event.clientX - rootRect.left - tipRect.width - 18; } if (top + tipRect.height > rootRect.height - 12) { top = event.clientY - rootRect.top - tipRect.height - 18; } tooltip.style.left = `${Math.max(10, left)}px`; tooltip.style.top = `${Math.max(10, top)}px`; } function showTooltip(event, d) { tooltip.replaceChildren(); const animal = document.createElement("div"); animal.className = "tip-animal"; animal.textContent = titleCase(d.animal); const pronoun = document.createElement("div"); pronoun.className = `tip-pronoun ${pronounClass(d.pronoun)}`; pronoun.textContent = pronounLabel(d.pronoun); const coverWrap = document.createElement("div"); coverWrap.className = "tip-cover-wrap"; const cover = document.createElement("img"); cover.className = "tip-cover"; cover.src = d.book_cover_image; cover.alt = d.title; coverWrap.appendChild(cover); const title = document.createElement("div"); title.className = "tip-title"; title.textContent = d.title; const author = document.createElement("div"); author.className = "tip-author"; author.textContent = `By ${d.author}`; const year = document.createElement("div"); year.className = "tip-year"; year.textContent = d.pub_year; tooltip.append(animal, pronoun, coverWrap, title, author, year); tooltip.style.opacity = 1; placeTooltip(event); } function hideTooltip() { tooltip.style.opacity = 0; } function hideSuggestions() { suggestions.style.display = "none"; } function showSuggestions() { suggestions.style.display = "block"; } function baseSuggestionData() { const q = state.search.trim().toLowerCase(); const matches = data.filter(d => { const matchAnimal = state.animal === "All animals" || d.animal === state.animal; const matchPronoun = state.pronoun === "All pronouns" || d.pronoun === state.pronoun; const matchSearch = !q || d.title.toLowerCase().includes(q); return matchAnimal && matchPronoun && matchSearch; }); const seen = new Set(); const unique = []; for (const d of matches.sort((a, b) => a.title.localeCompare(b.title))) { const key = `${d.title}|${d.author}|${d.pub_year}`; if (!seen.has(key)) { seen.add(key); unique.push(d); } } return unique.slice(0, 12); } function renderSuggestions() { suggestions.replaceChildren(); const rows = baseSuggestionData(); if (!rows.length) { hideSuggestions(); return; } for (const d of rows) { const item = document.createElement("button"); item.className = "suggestion-item"; item.textContent = `${d.title} (${d.pub_year}) — ${d.author}`; item.addEventListener("mousedown", event => { event.preventDefault(); state.search = d.title; searchInput.value = d.title; render(); hideSuggestions(); }); suggestions.appendChild(item); } } function renderSummary(items) { const total = items.length; const he = items.filter(d => d.pronoun === "he/him").length; const she = items.filter(d => d.pronoun === "she/her").length; const other = items.filter(d => d.pronoun === "other").length; labels.replaceChildren(); const heLabel = document.createElement("div"); heLabel.textContent = `He/him: ${pct(he, total)}`; const sheLabel = document.createElement("div"); sheLabel.textContent = `She/her: ${pct(she, total)}`; const otherLabel = document.createElement("div"); otherLabel.textContent = `Other: ${pct(other, total)}`; labels.append(heLabel, sheLabel, otherLabel); bar.replaceChildren(); const parts = [ { value: he, cls: "bar-he" }, { value: she, cls: "bar-she" }, { value: other, cls: "bar-other" } ]; for (const part of parts) { const seg = document.createElement("div"); seg.className = part.cls; seg.style.width = total ? `${(part.value / total) * 100}%` : "0%"; seg.style.height = "100%"; bar.appendChild(seg); } } function filteredData() { const q = state.search.trim().toLowerCase(); const items = data.filter(d => { const matchSearch = !q || d.title.toLowerCase().includes(q); const matchAnimal = state.animal === "All animals" || d.animal === state.animal; const matchPronoun = state.pronoun === "All pronouns" || d.pronoun === state.pronoun; return matchSearch && matchAnimal && matchPronoun; }); return sortByAnimalCount(items); } function renderGrid(items) { grid.replaceChildren(); if (!items.length) { const empty = document.createElement("div"); empty.className = "empty"; empty.textContent = "No matching animal characters found."; grid.appendChild(empty); return; } for (const d of items) { const btn = document.createElement("button"); btn.className = "animal-icon"; btn.setAttribute("aria-label", `${titleCase(d.animal)}, ${pronounLabel(d.pronoun)}, ${d.title}`); const img = document.createElement("img"); img.src = d.icon_url; img.alt = titleCase(d.icon_animal); img.loading = "lazy"; btn.appendChild(img); btn.addEventListener("mouseenter", event => showTooltip(event, d)); btn.addEventListener("mousemove", event => placeTooltip(event)); btn.addEventListener("mouseleave", hideTooltip); grid.appendChild(btn); } } function render() { const items = filteredData(); count.textContent = `${items.length.toLocaleString()} animal characters shown`; clearSearch.style.visibility = state.search ? "visible" : "hidden"; renderSummary(items); renderGrid(items); renderSuggestions(); } searchInput.addEventListener("focus", () => { renderSuggestions(); showSuggestions(); }); searchInput.addEventListener("input", event => { state.search = event.target.value; render(); showSuggestions(); }); clearSearch.addEventListener("click", () => { state.search = ""; searchInput.value = ""; render(); searchInput.focus(); showSuggestions(); }); animalFilter.addEventListener("change", event => { state.animal = event.target.value; render(); }); pronounFilter.addEventListener("change", event => { state.pronoun = event.target.value; render(); }); root.addEventListener("pointerdown", event => { if (!event.target.closest(".search-shell")) { hideSuggestions(); } }); scrollBox.addEventListener("scroll", hideTooltip); render(); return root; }35:[{"id":"75b689ef0b53c8d3a7beeeb695bec49ad0fd08d103e0d716af36bf146681ed6e422883ba3e725a4021e9d24c87bb29848d35010ed213846b269d1c46a2014ef4","href":"https://static.observableusercontent.com/files/75b689ef0b53c8d3a7beeeb695bec49ad0fd08d103e0d716af36bf146681ed6e422883ba3e725a4021e9d24c87bb29848d35010ed213846b269d1c46a2014ef4","name":"kids-book-animals.csv","type":"text/csv","lastModified":1779980477855.308,"size":747261}] 32:{"id":"a12257cd3d0871cd","slug":"bears-will-be-boys","title":"Bears Will Be Boys","thumbnail":"61404bfcae927dc168b4d43de2dc68f2a63a3c3103bcb82f98f5af3f2aeea0e9","access_level":"public","create_time":"$D2026-05-28T14:59:00.090Z","update_time":"$D2026-05-28T15:25:22.131Z","view_time":null,"first_public_time":"$D2026-05-28T15:22:23.081Z","has_unpublished_edits":null,"fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"6686209f2dacbb68","login":"yonsei-university","name":"Yonsei University","avatar_url":"https://avatars-next.observableusercontent.com/0ef313aea0a6d14e694642337ad9fb2c3d61bab08e797d7bf396f201ea06499b","tier":"starter_2024"},"version":23,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"993abe2b01c94697","login":"apikeu-muhammad-afiq-aiman-bin-affandi","name":"아피크 Muhammad Afiq Aiman bin Affandi","avatar_url":"https://avatars-next.observableusercontent.com/a3c91dc94a67b55a27b9cb13cd75d20a8cd74d4570e4acc69327d28827cd0613","tier":null}],"members":[{"type":"individual","id":"993abe2b01c94697","login":"apikeu-muhammad-afiq-aiman-bin-affandi","name":"아피크 Muhammad Afiq Aiman bin Affandi","avatar_url":"https://avatars-next.observableusercontent.com/a3c91dc94a67b55a27b9cb13cd75d20a8cd74d4570e4acc69327d28827cd0613","tier":null,"role":"editor"},{"type":"team","id":"6686209f2dacbb68","login":"yonsei-university","name":"Yonsei University","avatar_url":"https://avatars-next.observableusercontent.com/0ef313aea0a6d14e694642337ad9fb2c3d61bab08e797d7bf396f201ea06499b","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Bears Will Be Boys","cells":[{"id":0,"value":"# Bears Will Be Boys","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":7,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"[Original chart, images, and data](https://pudding.cool/2025/07/kids-books/) by Melanie Walsh (with Russell Samora, Michelle Pera-McGhee, Jan Diehm) on [The Pudding](https://pudding.cool/)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"}],"files":"$W35","stdlib":"1","titling":"auto"}} 33:"$32:body"