2f:null 30:["$","title",null,{"children":"Popular Baby Names in New York City (with sonification) | Ri | Observable"}] 35:T828,chart = { const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]); const g = svg.append("g"); const title = svg .append("text") .text("Popular baby names by race, " + selectedYear) .attr("class", "title") .attr("x", width / 2) .attr("y", 20) .attr("text-anchor", "middle"); const yLabel = svg .append("text") .text("Count of babies") .attr("class", "title") .attr("transform", `translate(20, ${height / 2}) rotate(-90, 0, 0)`) .attr("text-anchor", "middle"); const circles = g .selectAll("g") .data(data) .join("g") .attr("class", "circles") .attr("data-ethcty", ({ ethcty }) => ethcty) .attr("data-cnt", ({ cnt }) => cnt) .attr("transform", (d) => `translate(${d.x}, ${d.y})`); simulation.on("tick", function (e) { circles.attr("transform", (d) => `translate(${d.x}, ${d.y})`); }); circles .append("circle") .attr("fill", (d) => color(d.ethcty)) .attr("r", chartConfig.radiusSize); const handleActive = function (e, d, i) { mutable current = d; if (sonification) { playNote(frequencyScales.get(d.ethcty)(d.cnt)); } }; circles.on("mouseenter", handleActive); // Make the vis focusable! circles.on("focus", handleActive); circles.attr("tabindex", 0); circles .append("text") .attr("class", "text-labels") // .attr('font-family', 'Fira Sans') // .attr('font-weight', 'bold') .attr("style", "fill: black") .attr("font-size", 12) .attr("dy", 15) .attr("text-anchor", "middle") .text((d) => "#" + d.rnk); circles .append("text") .attr("class", "text-labels") .attr("font-family", "Fira Sans") // .attr('font-weight', 'bold') .attr("style", "fill: black") .attr("font-size", 11) .attr("text-anchor", "middle") .text((d) => d.nm); circles.append("title").text((d) => "Count: " + d.cnt); circles.call(drag(simulation)); svg.append("g").call(yAxis); const xA = svg.append("g").call(xAxis); invalidation.then(() => simulation.stop()); return svg.node(); }36:[{"id":"e39a48809ad2f7a214cf7b9648659fb97ce1794a6b1a102d96ca8203c19e6430d4b25c95989eab44243d2520100d08a5c2ee6e6899053722cc7e72afbb34f17a","href":"https://static.observableusercontent.com/files/e39a48809ad2f7a214cf7b9648659fb97ce1794a6b1a102d96ca8203c19e6430d4b25c95989eab44243d2520100d08a5c2ee6e6899053722cc7e72afbb34f17a","name":"popularBabyNames@1.json","type":"application/json","lastModified":1606264590758.672,"size":1124880}] 33:{"id":"4394ea787f2806a5","slug":"popular-baby-names-in-new-york-city-with-sonification","title":"Popular Baby Names in New York City (with sonification)","thumbnail":"ba87a0fd58037890cf9c0ba96e99ede5f1fe0813adc4bc0fe1209746ac4c54ac","access_level":"public","create_time":"$D2020-11-25T00:36:30.758Z","update_time":"$D2025-03-22T21:18:01.835Z","view_time":null,"first_public_time":"$D2020-11-25T01:31:34.211Z","has_unpublished_edits":null,"fork":{"id":"3b7973eceabbd19f","slug":"popular-baby-names-in-new-york-city","title":"Popular Baby Names in New York City","owner":{"id":"7a5a5a266053fb35","login":"riledigital","name":"Ri"}},"stars":1,"starred":false,"owner":{"type":"team","id":"7a5a5a266053fb35","login":"riledigital","name":"Ri","avatar_url":"https://avatars-next.observableusercontent.com/87b813ad2cf4fc91f9ba3492ee7a7821963c890a8b1c8fa84df022812727095d","tier":"starter_2024"},"version":1119,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"d301c97fd368361d","login":"riledigital","name":"Ri","avatar_url":"https://avatars-next.observableusercontent.com/87b813ad2cf4fc91f9ba3492ee7a7821963c890a8b1c8fa84df022812727095d","tier":null}],"members":[{"type":"individual","id":"d301c97fd368361d","login":"riledigital","name":"Ri","avatar_url":"https://avatars-next.observableusercontent.com/87b813ad2cf4fc91f9ba3492ee7a7821963c890a8b1c8fa84df022812727095d","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"title":"Popular Baby Names in New York City (with sonification)","cells":[{"id":0,"value":"md`# Popular Baby Names in New York City (with sonification)\n\nThis chart uses d3.force to show popular baby names by race in New York City. Check Observable's \"View in Fullscreen\" in the top-right ellipsis menu to get a better view.\n\nData available from [NYC Open Data](https://data.cityofnewyork.us/Health/Popular-Baby-Names/25th-nujf/data), see the [API docs](https://dev.socrata.com/foundry/data.cityofnewyork.us/25th-nujf)\n\n# Sonification\n\nThis visualization also uses Tone.js and Tonal to enable sonification of this dataset, mapping count of names to the C major scale.\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":875,"value":"viewof sonification = checkbox({\n description: \"Enable sonification\",\n options: [{ value: \"toggle\", label: \"On\" }],\n value: \"toggle\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":757,"value":"viewof maxRank = slider({\n min: 1,\n max: 100,\n step: 1,\n value: 16,\n title: \"Max rank\",\n description: \"The top # to filter by. Warning: >25 becomes unwieldy\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":729,"value":"html`\n

\n\"${current.ethcty}\", ${current.gndr}\n

${current.nm}

${current.brth_yr}

Rank #${current.rnk}

Number of children born with name: ${current.cnt}

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":953,"value":"viewof filterName = text({\n title: \"Filter by name\",\n placeholder: \"Olivia\",\n description: \"Enter a name to search for\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":424,"value":"viewof selectedYear = Scrubber(\n Array.from(new Array(15), (x, i) => i + 2011),\n {\n autoplay: false,\n delay: 10000\n }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":69,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":979,"value":"// ","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1026,"value":"chartConfig = ({\n radiusSize: 20,\n padding: 2\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":256,"value":"padding = 2","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":99,"value":"margin = ({ top: 50, right: 150, bottom: 100, left: 175 })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":396,"value":"mutable current = 0","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":132,"value":"simulation = d3\n .forceSimulation(data)\n .force(\"x\", d3.forceX((d) => x(d.ethcty)).strength(1))\n .force(\"y\", d3.forceY((d) => y(d.cnt)).strength(1))\n .force(\"collide\", d3.forceCollide(chartConfig.radiusSize + padding))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":641,"value":"drag = simulation => {\n function dragstarted(event) {\n if (!event.active) simulation.alphaTarget(0.3).restart();\n event.subject.fx = event.subject.x;\n event.subject.fy = event.subject.y;\n if (sonification) {\n dragSynth.triggerAttack(\"c2\", now);\n }\n }\n\n function dragged(event) {\n event.subject.fx = event.x;\n event.subject.fy = event.y;\n }\n\n function dragended(event) {\n if (!event.active) simulation.alphaTarget(0);\n event.subject.fx = null;\n event.subject.fy = null;\n\n dragSynth.triggerRelease(now);\n }\n\n return d3\n .drag()\n .on(\"start\", dragstarted)\n .on(\"drag\", dragged)\n .on(\"end\", dragended);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":616,"value":"yAxis = g =>\n g.attr(\"transform\", `translate(${60}, 0)`).call(d3.axisLeft(y).ticks(7))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":276,"value":"xAxis = g =>\n g.attr(\"transform\", `translate(0,${margin.top})`).call(d3.axisTop(x).ticks(7))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":628,"value":"color = d3.scaleOrdinal(d3.schemeTableau10).domain(ethnicGroups)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":43,"value":"x = d3\n .scalePoint()\n .domain(ethnicGroups)\n .range([margin.left, width - margin.right])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":61,"value":"y = d3\n .scaleLinear()\n .domain(d3.extent(data.map(d => d.cnt)))\n .range([height - margin.bottom, margin.top + 50])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":63,"value":"radius = d3\n .scaleLinear()\n .domain(d3.extent(data.map(d => d.cnt)))\n .range([0, 50])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":45,"value":"ethnicGroups = {\n let groups = d3.group(data.map(d => d.ethcty));\n let uniques = new Set();\n for (let g of groups) {\n uniques.add(g);\n }\n return uniques;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":549,"value":"olddata = await FileAttachment(\"popularBabyNames@1.json\")\n .json()\n .then((data) => data.filter((d) => d.rnk <= maxRank))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1040,"value":"data = fetch(\n `https://data.cityofnewyork.us/resource/25th-nujf.json?$limit=2000&$where=rnk <= ${maxRank}&brth_yr=${selectedYear}`\n).then((response) => response.json())","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":534,"value":"_ = require('lodash')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":418,"value":"import { Scrubber } from \"@mbostock/scrubber\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":754,"value":"import { slider } from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"d3 = require('d3@6')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":71,"value":"height = 700","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":791,"value":"synth = new Tone.MonoSynth(synthParams).connect(reverb)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":888,"value":"dragSynth = new Tone.MonoSynth({\n volume: -8,\n detune: 0,\n portamento: 0,\n envelope: {\n attack: 0.2,\n attackCurve: \"linear\",\n decay: 0.3,\n decayCurve: \"exponential\",\n release: 1,\n releaseCurve: \"exponential\",\n sustain: 0.4\n },\n filter: {\n Q: 1,\n detune: 0,\n frequency: 0,\n gain: 0,\n rolloff: -12,\n type: \"lowpass\"\n },\n filterEnvelope: {\n attack: 0.001,\n attackCurve: \"linear\",\n decay: 0.7,\n decayCurve: \"exponential\",\n release: 1,\n releaseCurve: \"exponential\",\n sustain: 0.1,\n baseFrequency: 300,\n exponent: 2,\n octaves: 4\n },\n oscillator: {\n detune: 0,\n frequency: 440,\n partialCount: 8,\n partials: [\n 0.31640625,\n 0.0625,\n 0.019775390625,\n 0.00390625,\n 0.0000482253086419754,\n 0.0000482253086419754,\n 0.0000482253086419754,\n 0\n ],\n phase: 0,\n type: \"custom\"\n }\n}).connect(reverb)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":868,"value":"reverb = new Tone.Reverb({\n wet: 0.5,\n decay: 2,\n preDelay: 0.01\n}).toDestination()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":858,"value":"playNote = note => {\n synth.triggerAttackRelease(note, \"8n\");\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":789,"value":"// Create notes off of name count...\nfreq = d3\n .scaleQuantize()\n .domain(d3.extent(data.map(d => d.cnt)))\n .range(outNotes)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":935,"value":"freqWithKey = key =>\n d3\n .scaleQuantize()\n .domain(d3.extent(data.map(d => d.cnt)))\n .range(noteRange(key)(`${key}2`, `${key}8`))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":849,"value":"synthParams = ({\n volume: -8,\n detune: 0,\n portamento: 0,\n envelope: {\n attack: 0.015,\n attackCurve: \"exponential\",\n decay: 0.1,\n decayCurve: \"exponential\",\n release: 0.8,\n releaseCurve: \"exponential\",\n sustain: 0\n },\n filter: {\n Q: 1,\n detune: 0,\n frequency: 0,\n gain: 0,\n rolloff: -12,\n type: \"lowpass\"\n },\n filterEnvelope: {\n attack: 0.0005,\n attackCurve: \"linear\",\n decay: 0.7,\n decayCurve: \"exponential\",\n release: 0.8,\n releaseCurve: \"exponential\",\n sustain: 0.1,\n baseFrequency: 300,\n exponent: 2,\n octaves: 4\n },\n oscillator: {\n detune: 0,\n frequency: 440,\n partialCount: 8,\n partials: [\n 1.2732395447351628,\n 0,\n 0.4244131815783876,\n 0,\n 0.25464790894703254,\n 0,\n 0.18189136353359467,\n 0\n ],\n phase: 0,\n type: \"square8\"\n }\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":800,"value":"outNotes = noteRange(\"c\")(\"C2\", \"C8\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":903,"value":"now = Tone.now()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":805,"value":"// Create keys based off of categories\nkey = d3\n .scaleQuantize()\n .domain(ethnicGroups)\n .range([\"c\", \"g\", \"a\", \"f\"])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":930,"value":"frequencyScales = {\n let scales = new Map();\n for (let group of ethnicGroups) {\n console.log(freqWithKey(key(group)));\n debugger;\n const noteScale = freqWithKey(key(group));\n scales.set(group, noteScale);\n }\n return scales;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":803,"value":"// Create notes from scale\nnoteRange = note => Tonal.Scale.rangeOf(`${note.toUpperCase()} major`)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1038,"value":"Tonal = import(\"https://cdn.jsdelivr.net/npm/tonal@6.4.1/+esm\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":793,"value":"Tone = require('tone@14')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":876,"value":"import { checkbox } from \"@jashkenas/inputs\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":952,"value":"import {text} from \"@jashkenas/inputs\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":321,"value":"html`\n\n\n\n\n\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W36","stdlib":"1","titling":"auto"}} 34:"$33:body"