import { useState } from "react"; import { useSQLQuery } from "@motherduck/react-sql-query"; import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer } from "recharts"; export const REQUIRED_DATABASES = [ { type: 'share', path: 'md:_share/nyc_data/86c78689-2e43-420c-aaa1-197bf6e31932', alias: 'nyc_data' } ]; const N = (v) => (v != null ? Number(v) : 0); const COLORS = { bg: "#f0f4ff", card: "#ffffff", border: "#a78bfa", borderLight: "#ddd6fe", textDark: "#1e1b4b", textMid: "#4338ca", textLight: "#7c3aed", female: "#f43f8a", male: "#3b82f6", accent: "#8b5cf6", highlight: "#f59e0b", infoBubble: "#312e81", pill1: "#fce7f3", pill2: "#ede9fe", toggleActive: "#7c3aed", toggleInactive: "#e5e7eb", toggleTextActive: "#ffffff", toggleTextInactive: "#6b7280", }; const THEME_DEFS = [ { theme: "Food", icon: "🍪", color: "#f59e0b", names: ["COOKIE","COCO","COCOA","BROWNIE","PEANUT","PEPPER","GINGER","HONEY","MOCHA","CINNAMON","OREO","BISCUIT","MOCHI","PICKLES","OLIVE","PEACHES","BUTTERSCOTCH","PANCAKE","WAFFLE","CUPCAKE","PUMPKIN","NUGGET","TACO","NACHO","HERSHEY","SUGAR","CHEWY","BISCOTTI","PRETZEL"] }, { theme: "Nature", icon: "🌿", color: "#10b981", names: ["DAISY","LILY","ROSE","WILLOW","POPPY","SAGE","MAPLE","RIVER","STORM","SKY","RAIN","SUNNY","CLOUD","OCEAN","FOREST","AUTUMN","WINTER","SUMMER","SNOW","STAR","HAZEL","JASPER","SANDY","HOLLY","FERN","CEDAR","HUNTER","MEADOW","BROOKS","CLOVER","PEBBLES"] }, { theme: "Royalty", icon: "👑", color: "#8b5cf6", names: ["KING","QUEEN","PRINCE","PRINCESS","DUKE","DUCHESS","LADY","ACE","EARL","BARON","COUNTESS","MAJESTY","REIGN","ROYAL","CROWN","SOVEREIGN","NOBLE","LORD"] }, { theme: "Mythology", icon: "⚡", color: "#ef4444", names: ["ZEUS","APOLLO","THOR","ATHENA","LOKI","ARES","ARTEMIS","HERMES","POSEIDON","HERCULES","TITAN","ODIN","FREYA","ANUBIS","RA","OSIRIS","ISIS","ATLAS","ORION","PERSEUS","HERA","DIANA","VENUS","MARS","MERCURY"] }, { theme: "Pop Culture", icon: "🎬", color: "#ec4899", names: ["SIMBA","NALA","SNOOPY","MICKEY","MINNIE","GIZMO","LOKI","THOR","HARLEY","MARLEY","BOWIE","ELVIS","DOLLY","CASPER","BAMBI","PLUTO","DUMBO","BOLT","GOOFY","COOPER","DEXTER","WALTER","SCOOBY","BENJI","LASSIE","ENZO","ROMEO","JULIET"] }, { theme: "Celestial", icon: "🌙", color: "#6366f1", names: ["LUNA","NOVA","STAR","COMET","COSMO","GALAXY","NEBULA","ECLIPSE","SOLEIL","AURORA","CELESTE","ASTRO","ORION","SKY","BLUE","SHADOW","MIDNIGHT","SUNNY","STARDUST","ZENITH"] }, { theme: "NYC / Places", icon: "🗽", color: "#0ea5e9", names: ["BROOKLYN","HUDSON","MANHATTAN","BRONX","HARLEM","MADISON","DAKOTA","JERSEY","TRIBECA","SOHO","QUEENS","CHELSEA","BLEECKER","BROADWAY"] }, { theme: "Luxury", icon: "💎", color: "#d97706", names: ["CHANEL","GUCCI","PRADA","DIOR","DIAMOND","PEARL","JEWEL","VERSACE","ARMANI","BENTLEY","ROLEX","CARTIER","TIFFANY","FENDI","HERMES","DOLCE","CAVIAR","CHAMPAGNE","MONACO","FERRARI"] }, ]; const getOverlappingCategories = (name, currentTheme) => THEME_DEFS.filter(t => t.theme !== currentTheme && t.names.includes(name)).map(t => `${t.icon} ${t.theme}`); const BREED_PROFILES = [ { breed: "French Bulldog", emoji: "🥐", color: "#6366f1", vibe: "Effortlessly chic — owners lean into the European aesthetic", nameStory: "FRENCH & FRENCHIE dominate (65× more likely!), followed by sophisticated picks like WINSTON, HUGO, and LOUIE. Very on-brand.", signatureNames: [ { name: "FRENCH", lift: 65.0, note: "named after the breed" }, { name: "FRENCHIE", lift: 40.6, note: "affectionate nickname" }, { name: "HUGO", lift: 6.9, note: "European flair" }, { name: "WINSTON", lift: null, note: "distinguished & British" }, { name: "STITCH", lift: 6.6, note: "quirky & cute" }, ] }, { breed: "Goldendoodle", emoji: "🌿", color: "#10b981", vibe: "Wholesome, outdoorsy, Brooklyn-family-dog energy", nameStory: "NOODLE (a pun on the breed) is 11× more likely. MAPLE, HUDSON, COOPER, and TEDDY round out a very 'farmers market on Sunday' vibe.", signatureNames: [ { name: "GOLDENDOODLE", lift: 67.2, note: "named after the breed" }, { name: "NOODLE", lift: 11.2, note: "playful breed pun" }, { name: "MAPLE", lift: 6.0, note: "nature & warmth" }, { name: "HUDSON", lift: 4.1, note: "NYC geography" }, { name: "TEDDY", lift: null, note: "fluffy & cuddly" }, ] }, { breed: "Yorkshire Terrier", emoji: "👑", color: "#8b5cf6", vibe: "Feisty little royals — the most popular breed in NYC", nameStory: "YORKIE (18×) is a fan favorite. PRINCE is a top male name — fitting for a breed with such regal bearing. RODRIGUEZ is a surprising outlier at 7×.", signatureNames: [ { name: "YORKIE", lift: 18.0, note: "beloved nickname" }, { name: "RODRIGUEZ", lift: 7.4, note: "cultural quirk — unique to Yorkies" }, { name: "MINDY", lift: 5.5, note: "classic & feisty" }, { name: "PRINCE", lift: null, note: "regal vibes" }, { name: "ZACK", lift: 4.5, note: "punchy & bold" }, ] }, { breed: "Shih Tzu", emoji: "🧸", color: "#f59e0b", vibe: "Living stuffed animals — soft, plush, and a little dramatic", nameStory: "GIZMO is 5× more likely here than average — the quintessential Shih Tzu name. PELUCHE (French for 'plush toy') and OREO also stand out.", signatureNames: [ { name: "SHIHTZU", lift: 19.6, note: "named after the breed" }, { name: "GIZMO", lift: 4.8, note: "the classic Shih Tzu name" }, { name: "PELUCHE", lift: 5.7, note: "French for 'plush toy'" }, { name: "OREO", lift: null, note: "black & white coloring" }, { name: "TEDDY", lift: null, note: "fluffy bear-like look" }, ] }, { breed: "Chihuahua", emoji: "🌶️", color: "#ef4444", vibe: "Big personality in a tiny body — spicy names all around", nameStory: "CHIQUITA (13×), CHICHI (8×), CHI (9×) dominate — owners lean hard into the breed's Latin identity and feisty reputation. PRINCESS is also a top female name.", signatureNames: [ { name: "CHIQUITA", lift: 12.8, note: "Latin identity, feisty" }, { name: "CHI", lift: 8.7, note: "short & punchy" }, { name: "CHICHI", lift: 8.4, note: "playful doubling" }, { name: "PRINCESS", lift: null, note: "tiny but mighty" }, { name: "LUCKY", lift: null, note: "classic small dog name" }, ] }, { breed: "Maltese", emoji: "❄️", color: "#0ea5e9", vibe: "Pure white fluffballs — names inspired by their coat", nameStory: "SNOWBALL (13×) and SNOWFLAKE (10×) are massively overrepresented — owners are clearly riffing on the white coat. COTTON (9×) follows the same logic.", signatureNames: [ { name: "SNOWBALL", lift: 13.3, note: "white coat inspiration" }, { name: "SNOWFLAKE", lift: 10.1, note: "white coat inspiration" }, { name: "COTTON", lift: 9.3, note: "soft & white" }, { name: "PRINCESS", lift: null, note: "dainty & elegant" }, { name: "DAISY", lift: null, note: "delicate & sweet" }, ] }, { breed: "Labrador Retriever", emoji: "🍫", color: "#92400e", vibe: "Strong, loyal, and color-coded — coat drives the name", nameStory: "HERSHEY (chocolate labs), RAVEN (black labs), and MAJOR/FINNEGAN suggest owners match names to coat color and the breed's working-dog dignity.", signatureNames: [ { name: "HERSHEY", lift: 3.9, note: "chocolate coat" }, { name: "RAVEN", lift: 4.1, note: "black coat" }, { name: "MAJOR", lift: 3.7, note: "military dignity" }, { name: "FINNEGAN", lift: 4.7, note: "classic retriever name" }, { name: "BUDDY", lift: null, note: "loyal companion" }, ] }, { breed: "Poodle", emoji: "🌸", color: "#ec4899", vibe: "Elegant, theatrical — fluffy names for a fluffy dog", nameStory: "Poodle owners name their dogs POODLE at 70× the average rate — the highest self-referential naming of any breed. FLUFFY and TEDDY also shine.", signatureNames: [ { name: "POODLE", lift: 69.9, note: "highest self-naming rate!" }, { name: "FLUFFY", lift: 4.5, note: "coat texture" }, { name: "TEDDY", lift: 2.6, note: "soft & cuddly" }, { name: "COCO", lift: null, note: "chic & classic" }, { name: "BELLA", lift: null, note: "timeless favorite" }, ] }, ]; function InfoTooltip({ children, content }) { const [visible, setVisible] = useState(false); return (

setVisible(true)} onMouseLeave={() => setVisible(false)}> {children} {visible && (

{content}

)}

); } const TABS = [ { id: "halloffame", label: "🏆 Hall of Fame" }, { id: "borough", label: "🗺️ By Borough" }, { id: "trending", label: "📈 Trending" }, { id: "breeds", label: "🐕 Breed × Name" }, { id: "unique", label: "✨ One-of-a-Kind" }, { id: "themes", label: "🎨 Themes" }, ]; export default function NYCDogNames() { const [activeTab, setActiveTab] = useState("halloffame"); const [selectedBorough, setSelectedBorough] = useState("Brooklyn"); const [selectedYear, setSelectedYear] = useState(2024); const [trendStartYear, setTrendStartYear] = useState(2023); const [trendEndYear, setTrendEndYear] = useState(2024); const [showTooltip, setShowTooltip] = useState(false); const [uniqueMode, setUniqueMode] = useState("year"); const [uniqueYear, setUniqueYear] = useState(2024); const [themeMode, setThemeMode] = useState("year"); const [themeYear, setThemeYear] = useState(2024); const [expandedTheme, setExpandedTheme] = useState(null); const [expandedBreed, setExpandedBreed] = useState(null); const boroughs = ["Bronx", "Brooklyn", "Manhattan", "Queens", "Staten Island"]; const years = [2015, 2016, 2017, 2018, 2019, 2020, 2021, 2022, 2023, 2024]; const BOROUGH_CTE = ` WITH borough_mapping AS ( SELECT ZipCode, CASE WHEN ZipCode BETWEEN 10001 AND 10282 THEN 'Manhattan' WHEN ZipCode BETWEEN 10451 AND 10475 THEN 'Bronx' WHEN ZipCode BETWEEN 11201 AND 11256 THEN 'Brooklyn' WHEN ZipCode BETWEEN 11001 AND 11697 THEN 'Queens' WHEN ZipCode BETWEEN 10301 AND 10314 THEN 'Staten Island' ELSE 'Other' END AS Borough FROM "nyc_data"."dog"."licenses" WHERE ZipCode IS NOT NULL GROUP BY ZipCode )`; const allNamesQuery = useSQLQuery(`${BOROUGH_CTE} SELECT YEAR(LicenseIssuedDate) as year, bm.Borough, d.AnimalGender, d.AnimalName, COUNT(*) as count FROM "nyc_data"."dog"."licenses" d JOIN borough_mapping bm ON d.ZipCode = bm.ZipCode WHERE LicenseIssuedDate IS NOT NULL AND AnimalName IS NOT NULL AND AnimalName NOT IN ('UNKNOWN','NA','NONE','NAME NOT PROVIDED','NAME') AND AnimalGender IS NOT NULL AND bm.Borough != 'Other' AND YEAR(LicenseIssuedDate) = ${selectedYear} GROUP BY year, bm.Borough, d.AnimalGender, d.AnimalName ORDER BY count DESC `, { enabled: activeTab === "borough" }); const topNamesQuery = useSQLQuery(`${BOROUGH_CTE} SELECT d.AnimalName, d.AnimalGender, COUNT(*) as total_count FROM "nyc_data"."dog"."licenses" d JOIN borough_mapping bm ON d.ZipCode = bm.ZipCode WHERE LicenseIssuedDate IS NOT NULL AND AnimalName IS NOT NULL AND AnimalName NOT IN ('UNKNOWN','NA','NONE','NAME NOT PROVIDED','NAME') AND AnimalGender IS NOT NULL AND bm.Borough != 'Other' AND YEAR(LicenseIssuedDate) >= 2015 GROUP BY d.AnimalName, d.AnimalGender ORDER BY total_count DESC LIMIT 10 `, { enabled: activeTab === "halloffame" }); const trendingQuery = useSQLQuery(`${BOROUGH_CTE}, counts_end AS ( SELECT d.AnimalName, d.AnimalGender, COUNT(*) as count_end FROM "nyc_data"."dog"."licenses" d JOIN borough_mapping bm ON d.ZipCode = bm.ZipCode WHERE YEAR(LicenseIssuedDate) = ${trendEndYear} AND AnimalName IS NOT NULL AND AnimalName NOT IN ('UNKNOWN','NA','NONE','NAME NOT PROVIDED','NAME') AND AnimalGender IS NOT NULL AND bm.Borough != 'Other' GROUP BY d.AnimalName, d.AnimalGender ), counts_start AS ( SELECT d.AnimalName, d.AnimalGender, COUNT(*) as count_start FROM "nyc_data"."dog"."licenses" d JOIN borough_mapping bm ON d.ZipCode = bm.ZipCode WHERE YEAR(LicenseIssuedDate) = ${trendStartYear} AND AnimalName IS NOT NULL AND AnimalName NOT IN ('UNKNOWN','NA','NONE','NAME NOT PROVIDED','NAME') AND AnimalGender IS NOT NULL AND bm.Borough != 'Other' GROUP BY d.AnimalName, d.AnimalGender ) SELECT ce.AnimalName, ce.AnimalGender, ce.count_end, COALESCE(cs.count_start,0) as count_start, ((ce.count_end - COALESCE(cs.count_start,0)) * 100.0 / NULLIF(cs.count_start,1)) as growth_pct FROM counts_end ce LEFT JOIN counts_start cs ON ce.AnimalName=cs.AnimalName AND ce.AnimalGender=cs.AnimalGender WHERE ce.count_end >= 10 ORDER BY growth_pct DESC LIMIT 30 `, { enabled: activeTab === "trending" && trendStartYear < trendEndYear }); const uniqueYearQuery = useSQLQuery(`${BOROUGH_CTE}, name_counts AS ( SELECT d.AnimalName, d.AnimalGender, COUNT(*) as count FROM "nyc_data"."dog"."licenses" d JOIN borough_mapping bm ON d.ZipCode = bm.ZipCode WHERE YEAR(LicenseIssuedDate) = ${uniqueYear} AND AnimalName IS NOT NULL AND AnimalName NOT IN ('UNKNOWN','NA','NONE','NAME NOT PROVIDED','NAME') AND AnimalGender IS NOT NULL AND bm.Borough != 'Other' GROUP BY d.AnimalName, d.AnimalGender HAVING COUNT(*) = 1 ) SELECT AnimalName, AnimalGender FROM name_counts ORDER BY RANDOM() LIMIT 30 `, { enabled: activeTab === "unique" && uniqueMode === "year" }); const uniqueAllTimeQuery = useSQLQuery(`${BOROUGH_CTE}, name_counts AS ( SELECT d.AnimalName, d.AnimalGender, COUNT(*) as count FROM "nyc_data"."dog"."licenses" d JOIN borough_mapping bm ON d.ZipCode = bm.ZipCode WHERE AnimalName IS NOT NULL AND AnimalName NOT IN ('UNKNOWN','NA','NONE','NAME NOT PROVIDED','NAME') AND AnimalGender IS NOT NULL AND bm.Borough != 'Other' GROUP BY d.AnimalName, d.AnimalGender HAVING COUNT(*) = 1 ) SELECT AnimalName, AnimalGender FROM name_counts ORDER BY RANDOM() LIMIT 30 `, { enabled: activeTab === "unique" && uniqueMode === "alltime" }); const themeYearQuery = useSQLQuery(`${BOROUGH_CTE} SELECT d.AnimalName, d.AnimalGender, COUNT(*) as count FROM "nyc_data"."dog"."licenses" d JOIN borough_mapping bm ON d.ZipCode = bm.ZipCode WHERE LicenseIssuedDate IS NOT NULL AND AnimalName IS NOT NULL AND AnimalName NOT IN ('UNKNOWN','NA','NONE','NAME NOT PROVIDED','NAME') AND AnimalGender IS NOT NULL AND bm.Borough != 'Other' AND YEAR(LicenseIssuedDate) = ${themeYear} GROUP BY d.AnimalName, d.AnimalGender ORDER BY count DESC `, { enabled: activeTab === "themes" && themeMode === "year" }); const themeAllTimeQuery = useSQLQuery(`${BOROUGH_CTE} SELECT d.AnimalName, d.AnimalGender, COUNT(*) as count FROM "nyc_data"."dog"."licenses" d JOIN borough_mapping bm ON d.ZipCode = bm.ZipCode WHERE LicenseIssuedDate IS NOT NULL AND AnimalName IS NOT NULL AND AnimalName NOT IN ('UNKNOWN','NA','NONE','NAME NOT PROVIDED','NAME') AND AnimalGender IS NOT NULL AND bm.Borough != 'Other' GROUP BY d.AnimalName, d.AnimalGender ORDER BY count DESC `, { enabled: activeTab === "themes" && themeMode === "alltime" }); const allNamesData = Array.isArray(allNamesQuery.data) ? allNamesQuery.data : []; const topFemaleNames = allNamesData.filter(d => d.Borough === selectedBorough && d.AnimalGender === "F").slice(0, 5).map(d => ({ name: d.AnimalName, count: N(d.count) })); const topMaleNames = allNamesData.filter(d => d.Borough === selectedBorough && d.AnimalGender === "M").slice(0, 5).map(d => ({ name: d.AnimalName, count: N(d.count) })); const topNamesData = Array.isArray(topNamesQuery.data) ? topNamesQuery.data : []; const trendingData = Array.isArray(trendingQuery.data) ? trendingQuery.data : []; const trendingFemale = trendingData.filter(d => d.AnimalGender === "F").slice(0, 8).map(d => ({ name: d.AnimalName, growth: N(d.growth_pct) })); const trendingMale = trendingData.filter(d => d.AnimalGender === "M").slice(0, 8).map(d => ({ name: d.AnimalName, growth: N(d.growth_pct) })); const uniqueNamesData = uniqueMode === "year" ? (Array.isArray(uniqueYearQuery.data) ? uniqueYearQuery.data : []) : (Array.isArray(uniqueAllTimeQuery.data) ? uniqueAllTimeQuery.data : []); const uniqueLoading = uniqueMode === "year" ? uniqueYearQuery.isLoading : uniqueAllTimeQuery.isLoading; const themeSourceData = themeMode === "year" ? (Array.isArray(themeYearQuery.data) ? themeYearQuery.data : []) : (Array.isArray(themeAllTimeQuery.data) ? themeAllTimeQuery.data : []); const themeLoading = themeMode === "year" ? themeYearQuery.isLoading : themeAllTimeQuery.isLoading; const themeData = THEME_DEFS.map(t => { const matches = themeSourceData.filter(d => t.names.includes(d.AnimalName)); const grouped = matches.reduce((acc, d) => { const ex = acc.find(a => a.name === d.AnimalName); if (ex) ex.count += N(d.count); else acc.push({ name: d.AnimalName, count: N(d.count) }); return acc; }, []).sort((a, b) => b.count - a.count); return { ...t, totalRegistrations: grouped.reduce((s, d) => s + d.count, 0), uniqueNameCount: grouped.length, matchingDogs: grouped }; }); const selectStyle = { padding: "8px 12px", fontSize: "14px", borderRadius: "8px", border: `2px solid ${COLORS.border}`, background: "#fff", color: COLORS.textDark, cursor: "pointer" }; const cardStyle = { background: COLORS.card, padding: "20px", borderRadius: "16px", border: `3px solid ${COLORS.border}`, boxShadow: "0 4px 20px rgba(124,58,237,0.08)" }; const PillToggle = ({ mode, setMode, showYearPicker = false, year, setYear }) => (

{["year", "alltime"].map(val => ( ))}

{showYearPicker && mode === "year" && ( )}

); return (

🐾 NYC's Top Dog Names 🐾

Exploring the most pawpular names across the five boroughs (2015–2024)

{/* Tab bar: inline-flex inside a centered block so it truly centers */}

{TABS.map(tab => ( ))}

{activeTab === "halloffame" && (

🏆 Hall of Fame: Most Popular Names (2015–2024)

🏆

BELLA has been NYC's #1 dog name every single year from 2015–2024 — a decade of undisputed dominance.

{topNamesQuery.isLoading ? (

{[...Array(10)].map((_, i) =>

)}

) : (

{topNamesData.map((dog, i) => (

{dog.AnimalName === "BELLA" ? "👑" : dog.AnimalGender === "F" ? "🎀" : "🦴"}

{dog.AnimalName}

{N(dog.total_count).toLocaleString()} dogs

))}

)}

)} {activeTab === "borough" && (

🗺️ Explore by Borough & Year

Year

Borough

{allNamesQuery.isLoading ?

: (

🎀 Female Names

{topFemaleNames.length === 0 ?

No names found

: ( )}

🦴 Male Names

{topMaleNames.length === 0 ?

No names found

: ( )}

)}

)} {activeTab === "trending" && (

📈 Trending Names

setShowTooltip(true)} onMouseLeave={() => setShowTooltip(false)} style={{ width: "20px", height: "20px", borderRadius: "50%", background: COLORS.accent, color: "#fff", display: "flex", alignItems: "center", justifyContent: "center", fontSize: "12px", fontWeight: "bold", cursor: "pointer", userSelect: "none" }}>i

{showTooltip &&

How it's calculated: Growth % shows change in dog counts between the two selected years. Only names with 10+ occurrences in the end year are shown.

}

Compare name popularity between any two years

Start Year

End Year

{trendStartYear >= trendEndYear ? (

⚠️ Please select a start year before the end year

) : trendingQuery.isLoading ?

: (

🎀 Female Names

{trendingFemale.length === 0 ?

No trending names found

: ( [`+${v.toFixed(0)}%`, "Growth"]} /> )}

🦴 Male Names

{trendingMale.length === 0 ?

No trending names found

: ( [`+${v.toFixed(0)}%`, "Growth"]} /> )}

)}

)} {activeTab === "breeds" && (

🐕 Breed × Name Correlations

Do owners name their dogs based on breed personality, coat color, or cultural identity? The data says: absolutely yes.

"Lift" = how much more likely a name is for this breed vs. the overall average. Click any breed to see details.

{BREED_PROFILES.map((bp) => { const isExpanded = expandedBreed === bp.breed; const liftNames = bp.signatureNames.filter(n => n.lift !== null); const chartData = liftNames.map(n => ({ name: n.name, lift: n.lift })); return (

setExpandedBreed(isExpanded ? null : bp.breed)} style={{ padding: "14px 16px", cursor: "pointer", display: "flex", alignItems: "center", gap: "12px" }}> {bp.emoji}

{bp.breed}

{bp.vibe}

{isExpanded ? "▲" : "▼"}

{isExpanded && (

{bp.nameStory}

{bp.signatureNames.map((n, i) => (

{n.name} {n.lift && {n.lift}×} {n.note}

))}

{chartData.length > 0 && ( <>

Name lift vs. NYC average

[`${v}× more likely`, "Lift"]} /> `${v}×` }} /> )}

)}

); })}

🔍 Key finding: Owners frequently name dogs after the breed itself (POODLE at 70×, GOLDENDOODLE at 67×, FRENCH at 65×) — but even when they don't, coat color and breed personality strongly predict the name. White dogs get snow names. Chocolate labs get HERSHEY. Tiny feisty dogs get spicy Latin names. NYC dog owners contain multitudes, but their naming instincts are surprisingly predictable.

)} {activeTab === "unique" && (

✨ One-of-a-Kind Names

{uniqueMode === "year" ? `Unique names that appeared only once in ${uniqueYear}` : "Names that appear only once across all years (2015–2024)"}

{uniqueLoading ?

: (

{uniqueNamesData.map((dog, i) => (

{dog.AnimalGender === "F" ? "🎀" : "🦴"} {dog.AnimalName}

))}

)}

)} {activeTab === "themes" && (

🎨 Name Themes

{themeMode === "year" ? `Naming categories in ${themeYear}` : "Naming categories across all years (2015–2024)"}

Click a category to see the names inside 👇

{ setThemeMode(m); setExpandedTheme(null); }} showYearPicker year={themeYear} setYear={(y) => { setThemeYear(y); setExpandedTheme(null); }} /> {themeLoading ?

: ( <>

{themeData.map((theme) => { const isExpanded = expandedTheme === theme.theme; const periodLabel = themeMode === "year" ? `in ${themeYear}` : "across all years (2015–2024)"; const regTooltip = ({theme.totalRegistrations.toLocaleString()} total registrations with a {theme.theme.toLowerCase()}-themed name {periodLabel}.

⚠️ Some names appear in multiple categories.); const namesTooltip = ({theme.uniqueNameCount} distinct names from this category were used {periodLabel}.); return (

setExpandedTheme(isExpanded ? null : theme.theme)} style={{ textAlign: "center", padding: "16px 12px", borderRadius: "14px", background: isExpanded ? `${theme.color}25` : `${theme.color}10`, border: `2px solid ${isExpanded ? theme.color : theme.color + "35"}`, cursor: "pointer", transition: "all 0.15s", boxShadow: isExpanded ? `0 4px 16px ${theme.color}30` : "none" }}>

{theme.icon}

{theme.totalRegistrations.toLocaleString()}

registrations

{theme.uniqueNameCount}

unique names

{theme.theme}

{isExpanded ? "▲ hide" : "▼ explore"}

); })}

{expandedTheme && (() => { const theme = themeData.find(t => t.theme === expandedTheme); if (!theme) return null; return (

{theme.icon} {theme.theme} Names {themeMode === "year" ? `(${themeYear})` : "(All Time)"}

sorted by popularity

⚠️ Some names (e.g. LOKI, THOR, ORION) appear in multiple categories.

{theme.matchingDogs.length === 0 ? (

No matches found for this period

) : (

{theme.matchingDogs.map((dog, i) => { const overlaps = getOverlappingCategories(dog.name, theme.theme); const periodLabel = themeMode === "year" ? `in ${themeYear}` : "across all years"; const nameTooltip = ({dog.count.toLocaleString()} registrations for {dog.name} {periodLabel}.{overlaps.length > 0 &&

⚠️ Also in: {overlaps.join(", ")}}); return (

0 ? theme.color + "aa" : theme.color + "60"}`, color: theme.color, display: "flex", alignItems: "center", gap: "6px", cursor: "help" }}> {dog.name} {overlaps.length > 0 && 🔀} {dog.count.toLocaleString()}

); })}

)}

); })()} )}

)}

Data source:{" "} NYC Dog Licensing Dataset {" "}— NYC Department of Health and Mental Hygiene, via NYC Open Data

); }