Baby Names
Popularity of baby names in the United States from 1925 to 2024. Click a name to highlight that name and display the number of babies. (Data from SSA.gov)
Source Code for this Sketch
const ssaNames = [{"name":"James","population":4545686},{"name":"Mary","population":2913902},{"name":"Michael","population":4354983},{"name":"Patricia","population":1539442},{"name":"John","population":4254027},{"name":"Jennifer","population":1470844},{"name":"Robert","population":4248470},{"name":"Linda","population":1448119},{"name":"David","population":3562294},{"name":"Elizabeth","population":1387113},{"name":"William","population":3400779},{"name":"Barbara","population":1371191},{"name":"Richard","population":2387091},{"name":"Susan","population":1100642},{"name":"Joseph","population":2263825},{"name":"Jessica","population":1048746},{"name":"Thomas","population":2115411},{"name":"Karen","population":986097},{"name":"Christopher","population":2059450},{"name":"Sarah","population":983348},{"name":"Charles","population":1989647},{"name":"Lisa","population":965906},{"name":"Daniel","population":1913775},{"name":"Nancy","population":953532},{"name":"Matthew","population":1632726},{"name":"Sandra","population":873340},{"name":"Anthony","population":1411666},{"name":"Ashley","population":857349},{"name":"Mark","population":1350570},{"name":"Emily","population":848035},{"name":"Steven","population":1286709},{"name":"Kimberly","population":845195},{"name":"Donald","population":1275459},{"name":"Betty","population":829528},{"name":"Andrew","population":1259356},{"name":"Margaret","population":819413},{"name":"Joshua","population":1241518},{"name":"Donna","population":816178},{"name":"Paul","population":1228352},{"name":"Michelle","population":815556},{"name":"Kenneth","population":1187175},{"name":"Carol","population":799326},{"name":"Kevin","population":1182429},{"name":"Amanda","population":774482},{"name":"Brian","population":1172425},{"name":"Melissa","population":757109},{"name":"Timothy","population":1077042},{"name":"Deborah","population":740811},{"name":"Ronald","population":1070225},{"name":"Stephanie","population":740151},{"name":"Jason","population":1048271},{"name":"Rebecca","population":728579},{"name":"George","population":1037090},{"name":"Sharon","population":720843},{"name":"Edward","population":1003529},{"name":"Laura","population":706057},{"name":"Jeffrey","population":978511},{"name":"Cynthia","population":705775},{"name":"Ryan","population":960101},{"name":"Amy","population":684793},{"name":"Jacob","population":959832},{"name":"Kathleen","population":672182},{"name":"Nicholas","population":902466},{"name":"Angela","population":661416},{"name":"Gary","population":900286},{"name":"Dorothy","population":658259},{"name":"Eric","population":884769},{"name":"Shirley","population":633958},{"name":"Jonathan","population":865327},{"name":"Emma","population":618298},{"name":"Stephen","population":836135},{"name":"Brenda","population":606313},{"name":"Larry","population":800777},{"name":"Nicole","population":593347},{"name":"Justin","population":787011},{"name":"Pamela","population":592709},{"name":"Benjamin","population":774140},{"name":"Samantha","population":588877},{"name":"Scott","population":770944},{"name":"Anna","population":576509},{"name":"Brandon","population":768672},{"name":"Katherine","population":559386},{"name":"Samuel","population":729241},{"name":"Christine","population":552035},{"name":"Gregory","population":709015},{"name":"Debra","population":548285},{"name":"Alexander","population":704160},{"name":"Rachel","population":545141},{"name":"Patrick","population":667246},{"name":"Olivia","population":544237},{"name":"Frank","population":629555},{"name":"Carolyn","population":533294},{"name":"Jack","population":627750},{"name":"Maria","population":532853},{"name":"Raymond","population":622479},{"name":"Janet","population":530602},{"name":"Dennis","population":609827},{"name":"Heather","population":524157},{"name":"Tyler","population":601316},{"name":"Diane","population":514776},{"name":"Aaron","population":599646},{"name":"Catherine","population":512453},{"name":"Jerry","population":598361},{"name":"Julie","population":507440},{"name":"Jose","population":572970},{"name":"Victoria","population":499542},{"name":"Nathan","population":567716},{"name":"Helen","population":491538},{"name":"Adam","population":566952},{"name":"Joyce","population":489848},{"name":"Henry","population":553398},{"name":"Lauren","population":474679},{"name":"Zachary","population":549577},{"name":"Kelly","population":472947},{"name":"Douglas","population":542783},{"name":"Christina","population":471370},{"name":"Peter","population":532119},{"name":"Joan","population":458352},{"name":"Noah","population":503865},{"name":"Judith","population":449376},{"name":"Kyle","population":484179},{"name":"Ruth","population":448694},{"name":"Ethan","population":478323},{"name":"Hannah","population":446882},{"name":"Christian","population":447252},{"name":"Evelyn","population":445047},{"name":"Jeremy","population":444813},{"name":"Andrea","population":442601},{"name":"Keith","population":428826},{"name":"Virginia","population":442263},{"name":"Austin","population":427563},{"name":"Megan","population":439341},{"name":"Sean","population":422810},{"name":"Cheryl","population":436895},{"name":"Roger","population":422271},{"name":"Jacqueline","population":417953},{"name":"Terry","population":421954},{"name":"Madison","population":414743},{"name":"Walter","population":418903},{"name":"Sophia","population":412185},{"name":"Dylan","population":412115},{"name":"Abigail","population":406539},{"name":"Gerald","population":410541},{"name":"Teresa","population":402638},{"name":"Carl","population":397874},{"name":"Isabella","population":398465},{"name":"Jordan","population":397231},{"name":"Sara","population":398301},{"name":"Bryan","population":386987},{"name":"Janice","population":396114},{"name":"Gabriel","population":386188},{"name":"Martha","population":391465},{"name":"Jesse","population":386161},{"name":"Gloria","population":391418},{"name":"Harold","population":380758},{"name":"Kathryn","population":389152},{"name":"Lawrence","population":380691},{"name":"Ann","population":387222},{"name":"Logan","population":379844},{"name":"Charlotte","population":385119},{"name":"Arthur","population":378468},{"name":"Judy","population":376884},{"name":"Bruce","population":373076},{"name":"Amber","population":372827},{"name":"Billy","population":369190},{"name":"Julia","population":372586},{"name":"Elijah","population":363648},{"name":"Grace","population":372014},{"name":"Joe","population":359301},{"name":"Denise","population":371278},{"name":"Alan","population":356380},{"name":"Danielle","population":371135},{"name":"Juan","population":354980},{"name":"Natalie","population":368251},{"name":"Liam","population":336845},{"name":"Alice","population":364227},{"name":"Willie","population":334370},{"name":"Marilyn","population":363919},{"name":"Mason","population":334123},{"name":"Diana","population":363855},{"name":"Albert","population":329982},{"name":"Beverly","population":363089},{"name":"Randy","population":328839},{"name":"Jean","population":361487},{"name":"Wayne","population":328463},{"name":"Brittany","population":360163},{"name":"Vincent","population":324743},{"name":"Theresa","population":356640},{"name":"Lucas","population":319151},{"name":"Frances","population":356365},{"name":"Caleb","population":316696},{"name":"Kayla","population":344827},{"name":"Luke","population":312434},{"name":"Alexis","population":343834},{"name":"Bobby","population":311580},{"name":"Tiffany","population":338298},{"name":"Isaac","population":311345},{"name":"Lori","population":337995},{"name":"Bradley","population":311031},{"name":"Kathy","population":331776}]
let names = []
let totalpop = 0
class Dot{
constructor() {
this.x = Math.random() * width
this.y = Math.random() * height
}
draw(active) {
if(active) {
circle(this.x, this.y, 8)
} else {
circle(this.x, this.y, 4)
}
}
}
class Name {
static _hue = 0
constructor(name, population) {
this.name = name
this.hue = Name._hue
Name._hue += 32
if (Name._hue > 360) {
Name._hue -= 360
}
this.pop = population
this.dots = []
this.x = 0
this.y = 0
// If text size is changed at some point these need to be recalculated
this.width = textWidth(name)
this.height = textSize()
}
pos(x, y) {
this.x = x
this.y = y
}
active() {
return (mouseX >= this.x && mouseX < this.x+this.width && mouseY >= this.y && mouseY < this.y+this.height)
}
initializeDots(factor) {
for (let i = 0; i < this.pop/factor; i++) {
this.dots.push(new Dot())
}
}
drawLabel() {
let alpha = .3
if (this.active()) {
alpha = 1
} else if(mouseIsPressed) {
return
}
fill(this.hue, 100, 50, alpha)
rect(this.x-2, this.y-2, this.width+4, this.height + 4)
if(this.active()) {
fill(0)
} else {
fill(0, 0, 100, alpha)
}
text(this.name, this.x, this.y)
if(this.active() && mouseIsPressed) {
fill(100)
text(this.pop.toLocaleString(), this.x, this.y+this.height+4)
}
}
// This is going on a lower layer than the name boxes so we'll put it in
// a separate function.
drawPoints() {
noStroke()
if(this.active()) {
fill(this.hue, 100, 50, 1)
} else {
fill(this.hue, 100, 50, .4)
}
this.dots.forEach(point => {point.draw(this.active())})
}
}
function setup() {
createCanvas(800, 620, P2D, canvas)
chrisDefaults()
// Set text size before we initialize Name objects so we get the right width
textSize(20)
textStyle(BOLD)
textAlign(LEFT, TOP)
// Track total population
totalpop = 0
ssaNames.sort((a, b) => {return a.name.localeCompare(b.name)})
ssaNames.forEach(name => {
names.push(new Name(name.name, name.population))
totalpop += name.population
})
// we want to limit the total number of dots we're drawing to a sane number
// (< 10,000) so we'll figure out how many 0's we have, and limit to 4.
// Note: with the current data we end up with 1 dot per 100,000 or so.
let factor = Math.pow(10, Math.abs(4-Math.ceil(Math.log10(totalpop))))
// Initialize the dots
names.forEach(name => {
name.initializeDots(factor)
})
// Initialize the position for each name
const margin = 10
const spacing = 9
let currentX = margin
let currentY = margin
let prevWidth = 0
names.forEach(name => {
// Typewriter return when we get too wide
if (currentX + name.width + margin > width) {
currentY += textSize() + spacing
currentX = margin
}
name.pos(currentX + prevWidth, currentY)
currentX += name.width+spacing
})
}
function draw() {
background(0)
names.forEach(name => {
name.drawPoints()
})
names.forEach(name => {
name.drawLabel()
})
}
You may use all or part of the p5 code seen on this page for your own creations, without restriction. Attribution is appreciated but not required.
This sketch also includes the following sources: p5common.js . Sources are available under their respective licenses.