Published
Edited
Dec 15, 2021
9 stars
babynames = FileAttachment("2021-06-18_topbabynames_1960-2019.csv").csv({typed: true})
lettersByCount = d3.flatRollup(babynames, v => v.length, d => d.Name[0]).sort((a,b) => b[1] - a[1]).map(d => d[0])
alphabet = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'
orderedAlphabet = alphabet.split("").sort((a,b) => {
const indexA = lettersByCount.indexOf(a) == -1 ? 26 : lettersByCount.indexOf(a);
const indexB = lettersByCount.indexOf(b) == -1 ? 26 : lettersByCount.indexOf(b);
return indexA - indexB
})
colorRange =
["#ccc", '#d70000','#8c3cff','#028800','#00acc7','#e7a500','#ff7fd1','#6c004f','#583b00','#005759','#15e18d','#0000dd','#a2766a','#bcb7ff','#c004b9','#645473','#790000','#0774d8','#739b7d','#ff7852','#004b00','#8f7b01','#f3007b','#8fba00','#a67bb8','#5a02a3','#e3afaf','#a03a52','#a2c8c8','#9e4b00','#546745','#bbc389','#5f7b88','#60383c','#8388ff','#390000','#e353ff','#305382','#7fcaff','#c5668f','#00816a','#929eb7','#cc7407','#7f2b8e','#00bea4','#2db152','#4e33ff','#00e500','#ff00ce','#c85848','#e59cff','#1da1ff','#6e70ab','#c89a69','#78573b','#04dae6','#c1a3c4','#ff6a8a','#bb00fe','#925380','#9f0274','#94a150','#374425','#af6dff','#596d00','#ff3147','#838057','#006d2e','#8956af','#5a4aa3','#773516','#86c39a','#5f1123','#d58581','#a42918','#0088b1','#cb0044','#ffa056','#eb4e00','#6c9700','#538649','#755a00','#c8c440','#92d370','#4b9894','#4d230d','#61345c','#8400cf','#8b0031','#9f6e32','#ac8499','#c63189','#025438','#086b84','#87a8ec','#6466ef','#c45dba','#019f70','#815159','#836f8c','#b3c0da','#b99129','#ff97b2','#a793e1','#698dbe','#4c5001','#4802cc','#61006e','#456a66','#9d5743','#7bacb5','#cd84bd','#0054c1','#7b2f4f','#fb7c00','#34c000','#ff9c88','#e1b769','#536177','#5c3a7c','#eda5da','#f053a3','#5d7e69','#c47750','#d14868','#6e00eb','#1f3400','#c14104','#6dd5c2','#46709f','#a201c4','#0a8289','#afa601','#a65c6b','#fe77ff','#8b85ae','#c77fe9','#9aab85','#876cd9','#01baf7','#af5ed2','#59512b','#b6005f','#7cb66a','#4985ff','#00c282','#d295ab','#a34ba8','#e306e3','#16a300','#392e00','#843033','#5e95aa','#5a1000','#7b4600','#6f6f31','#335826','#4d60b6','#a29564','#624028','#45d458','#70aad0','#2e6b4e','#73af9e','#fd1500','#d8b492','#7a893b','#7dc6d9','#dc9137','#ec615e','#ec5fd4','#e57ba7','#a66c98','#009744','#ba5f22','#bcad53','#88d830','#873573','#aea8d2','#e38c63','#d1b1ec','#37429f','#3abec2','#669d4d','#9e0399','#4e4e7a','#7b4c86','#c33531','#8d6677','#aa002d','#7f0175','#01824d','#734a67','#727791','#6e0099','#a0ba52','#e16e31','#c56a71','#6d5b96','#a33c74','#326200','#880050','#335869','#ba8d7c','#1959ff','#919202','#2c8bd5','#1726ff','#21d3ff','#a490af','#8b6d4f','#5e213e','#dc03b3','#6f57ca','#652821','#ad7700','#a3bff7','#b58446','#9738dc','#b25194','#7242a3','#878fd1','#8a70b1','#6baf36','#5a7ac9','#c79fff','#56841a','#00d6a7','#824739','#11431d','#5aab75','#915b01','#f64570','#ff9703','#e14231','#ba92cf','#34584d','#f8807d','#913400','#b3cd00','#2e9fd3','#798b9f','#51817d','#c136d7','#ec0553','#b9ac7e','#487032','#849565','#d99d89','#0064a3','#4c9078','#8f6198','#ff5338','#a7423b','#006e70','#98843e','#dcb0c8'
]
color = ({ domain: ["-", ...Plot.valueof(babynames, d => d.Name.replace("*", ""))], range: colorRange})
filterFunction = {
if (typeOfFilter == "name starts with..."){
return (n, match) => n.toLowerCase().startsWith(match.toLowerCase())
}
return (n, match) => n.toLowerCase().includes(match.toLowerCase())
}
import {addTooltips} from "@mkfreeman/plot-tooltip"
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
