31:T40e,viewof popularityRange = { const year = new Date().getFullYear() const from = html`` const to = html`` const past5Years = html`the past 5 years` const since1910 = html`since 1910` const duringThe80s = html`during the '80s` const form = md`## Popularity Most popular names from ${from} to ${to}. Try ${past5Years}, ${since1910}, or ${duringThe80s}.` function updateValue(f, t) { if (f && t) { from.value = f; to.value = t; } form.value = [ +from.value, +to.value ] form.dispatchEvent(new CustomEvent('input')) } from.oninput = to.oninput = updateValue past5Years.onclick = e => { e.preventDefault(); updateValue(year - 5, year) } since1910.onclick = e => { e.preventDefault(); updateValue(1910, year) } duringThe80s.onclick = e => { e.preventDefault(); updateValue(1980, 1990) } updateValue(1980, 1990) return form }32:Tcfb,function chart(data) { const rowHeight = 45 const bands = 4 const padding = { top: 20, right: 10, bottom: 20, left: 10 } const grouped = d3.group(data, d => d.name, d => d.gender) const height = grouped.size * rowHeight const x = d3.scaleTime() .domain(yearExtent.map(y => new Date(y, 0, 1))) .range([0, width - padding.left - padding.right]) const y = d3.scaleSqrt() .domain([0, d3.max(data, d => d.number) / bands]) .range([rowHeight, 0]) const color = d3.scaleOrdinal(d3.schemeAccent) const area = d3.area() .x(d => x(new Date(d.year, 0, 1))) .y0(y(0)) .y1(d => y(d.number)) const svg = DOM.svg(width + padding.left + padding.right, height + padding.top + padding.bottom) // clip path const clip = DOM.uid('clip') d3.select(svg).append('clipPath') .attr('id', clip.id) .append('rect') .attr('width', width) .attr('height', rowHeight) const chart = d3.select(svg).append('g') .attr('transform', `translate(${padding.left}, ${padding.top})`) .style('user-select', 'none') .style('-moz-user-select', 'none') .style('-webkit-user-select', 'none') // axes const axes = chart.selectAll('g.axis').data([0, height]) .enter().append('g') .attr('transform', d => `translate(0, ${d})`) .each(function (d) { d3.select(this).call(d === 0 ? d3.axisTop(x) : d3.axisBottom(x)) }) // names const names = chart.selectAll('g.name').data(Array.from(grouped)) .enter().append('g') .attr('transform', (d, i) => `translate(0, ${i * rowHeight})`) .attr('clip-path', clip) // genders const genders = names.selectAll('g.gender').data(d => Array.from(d[1])) .enter().append('g') for (let i = 0; i < bands; i++) genders.append('path') .attr('fill', d => color(d[0])) .attr('opacity', 1/bands) .attr('transform', `translate(0, ${i * rowHeight})`) .attr('d', d => area(d[1])) // name names.append('text') .attr('y', rowHeight - 5) .text(d => d[0]) // values, brush const rule = chart.append('g') rule.append('rect') .attr('width', 1) .attr('height', height) const brushTicks = rule.selectAll('text').data([-8.5, height + 17]) .enter().append('text') .attr('y', d => d) .attr('text-anchor', 'middle') .attr('font-size', 12) const opacity = d3.scalePow([0, 10], [0, 1]).exponent(2).clamp(true) const values = genders.append('text') .attr('text-anchor', 'end') .attr('fill', d => color(d[0])) .attr('y', d => d[0] === 'F' ? rowHeight - 5 : rowHeight - 25) brush(x(x.domain()[1])) d3.select(svg) .on('mousemove', () => brush(d3.mouse(chart.node())[0])) .on('touchmove', () => brush(d3.touches(chart.node())[0][0])) function brush(px) { const year = x.invert(px).getFullYear() rule .attr('transform', `translate(${px}, 0)`) brushTicks .text(year) axes.selectAll('text') .attr('opacity', d => opacity(Math.abs(d.getFullYear() - year))) values .attr('x', px - 5) .text(d => { const found = d[1].find(v => v.year == year) // TODO: bisect return found ? format(found.number) : '' }) } return svg }33:[] 2f:{"title":"Baby Names","cells":[{"id":0,"value":"md`# Baby Names ${search !== example ? `– ` + search : ''}\n\nNumber of babies with a given name born in the United States over time. Charts are [horizon][3]-like. \nData from the [Social Security Administration][1] hosted on [Google BigQuery][2].\n\nDeclared genders are at birth:\n female male.\n\n[1]: https://www.ssa.gov/oact/babynames/limits.html\n[2]: https://console.cloud.google.com/marketplace/details/social-security-administration/us-names?filter=solution-type:dataset&q=public%20data%20names&id=7a385178-115c-44b0-8ec2-4da800e47888\n[3]: https://github.com/d3/d3-plugins/tree/master/horizon\n[4]: https://square.github.io/cubism/`","pinned":false,"hidden":false,"mode":"ojs"},{"id":773,"value":"md`## Search\n\nGot a specific name on your mind? Search for whatever names you're interested in. \n[Link to your results](?names=${search})`","pinned":false,"hidden":false,"mode":"ojs"},{"id":50,"value":"viewof search = {\n const match = decodeURIComponent(html``.search).match(/names=([^&]+)/)\n return text({\n title: \"Names\",\n value: match ? match[1] : example,\n submit: \"Search\"\n })\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":765,"value":"{\n const names = search\n .replace(/\\s+/g, '')\n .split(',')\n .map(n => n.charAt(0).toUpperCase() + n.slice(1).toLowerCase())\n return chart(await query(`\n SELECT name, gender, CAST(year AS STRING) as year, SUM(number) AS number\n FROM \\`bigquery-public-data.usa_names.usa_1910_current\\`\n WHERE name IN UNNEST(@names)\n GROUP BY 1, 2, 3\n ORDER BY name, gender, year DESC\n `, { names }))\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":750,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":777,"value":"chart(await query(`\n WITH popular AS (\n SELECT name, SUM(number)\n FROM \\`bigquery-public-data.usa_names.usa_1910_current\\`\n WHERE year BETWEEN ? AND ?\n GROUP BY 1\n ORDER BY 2 DESC\n )\n SELECT name, gender, CAST(year AS STRING) as year, SUM(number) AS number\n FROM \\`bigquery-public-data.usa_names.usa_1910_current\\`\n WHERE name IN (\n SELECT name FROM popular LIMIT 8\n )\n GROUP BY 1, 2, 3\n ORDER BY name, gender, year DESC\n`, popularityRange))","pinned":false,"hidden":false,"mode":"ojs"},{"id":753,"value":"viewof movementYear = {\n const year = html``\n \n const form = md`## Movers\nInstead of popularity, what about quick rises in popularity? These names were really gaining traction in ${year}.`\n\n year.oninput = () => {\n form.value = +year.value\n form.dispatchEvent(new CustomEvent('input'))\n }\n year.oninput()\n \n return form\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":802,"value":"chart(await query(`\n WITH current_year AS (\n SELECT name, SUM(number) AS number\n FROM \\`bigquery-public-data.usa_names.usa_1910_current\\`\n WHERE year = @movementYear\n GROUP BY 1\n ),\n last_year AS (\n SELECT name, SUM(number) AS number\n FROM \\`bigquery-public-data.usa_names.usa_1910_current\\`\n WHERE year = @movementYear - 1\n GROUP BY 1\n ),\n changers AS (\n SELECT c.name, (c.number - l.number)\n FROM current_year c\n JOIN last_year l on l.name = c.name\n GROUP BY 1, 2\n ORDER BY 2 DESC\n )\n SELECT name, gender, CAST(year AS STRING) as year, SUM(number) AS number\n FROM \\`bigquery-public-data.usa_names.usa_1910_current\\`\n WHERE name IN (\n SELECT name FROM changers LIMIT 8\n )\n GROUP BY 1, 2, 3\n ORDER BY name, gender, year DESC\n`, { movementYear }))","pinned":false,"hidden":false,"mode":"ojs"},{"id":882,"value":"md`## Unisex\nNames popular with all genders. \"Unknown\" is likely a standard Social Security Administration practice when a child went unnamed at birth.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":953,"value":"chart(await query(`\n WITH male AS (\n SELECT name, SUM(number) AS number\n FROM \\`bigquery-public-data.usa_names.usa_1910_current\\`\n WHERE gender = 'M'\n GROUP BY 1\n ),\n female AS (\n SELECT name, SUM(number) AS number\n FROM \\`bigquery-public-data.usa_names.usa_1910_current\\`\n WHERE gender = 'F'\n GROUP BY 1\n ),\n unisex AS (\n SELECT m.name, ABS(m.number - f.number), m.number + f.number AS t\n FROM male m\n JOIN female f on f.name = m.name\n WHERE m.number + f.number > 10000\n ORDER BY 2 ASC, 3 DESC\n )\n SELECT name, gender, CAST(year AS STRING) as year, SUM(number) AS number\n FROM \\`bigquery-public-data.usa_names.usa_1910_current\\`\n WHERE name IN (\n SELECT name FROM unisex LIMIT 8\n )\n GROUP BY 1, 2, 3\n ORDER BY name, gender, year DESC\n`))","pinned":false,"hidden":false,"mode":"ojs"},{"id":988,"value":"md`# TODO\n\n- Normalize to yearly cohort (numbers as % of births that year)\n- Regional trends\n- Making a comeback (bimodal shape)\n- Draw an arbitrary shape`","pinned":false,"hidden":false,"mode":"ojs"},{"id":89,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs"},{"id":728,"value":"example = \"Amanda, Ashley, Ava, Jane, Karen, Ken, Noah, Oliver, Thomas, Morgan, Emerson, Jessie\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":213,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":570,"value":"format = d3.format(',')","pinned":false,"hidden":false,"mode":"ojs"},{"id":997,"value":"yearExtent = {\n const result = await query('SELECT MIN(year) AS min, MAX(year) AS max FROM \\`bigquery-public-data.usa_names.usa_1910_current\\`')\n return [result[0].min, result[0].max]\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2,"value":"async function query(sql, params) {\n const res = await fetch('https://names.visnup.now.sh', {\n method: 'POST',\n headers: { 'Content-Type': 'application/json' },\n body: JSON.stringify({ query: sql, params })\n })\n\n if (res.ok) {\n return await res.json()\n } else {\n const contentType = res.headers.get('content-type')\n if (contentType && contentType.indexOf('application/json') !== -1) {\n const error = await res.json()\n throw Error(error.message)\n } else {\n throw Error(await res.text())\n }\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":64,"value":"html`