2e:null 2f:["$","title",null,{"children":"Popular Baby Names in New York City | Ri | Observable"}] 34:T6dd,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(filtered) .join('g') .attr('class', 'circles') .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', radiusSize); circles.on('mouseover', function(e, d, i) { mutable current = d; }); 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(); }35:[{"id":"e39a48809ad2f7a214cf7b9648659fb97ce1794a6b1a102d96ca8203c19e6430d4b25c95989eab44243d2520100d08a5c2ee6e6899053722cc7e72afbb34f17a","href":"https://static.observableusercontent.com/files/e39a48809ad2f7a214cf7b9648659fb97ce1794a6b1a102d96ca8203c19e6430d4b25c95989eab44243d2520100d08a5c2ee6e6899053722cc7e72afbb34f17a","name":"popularBabyNames@1.json","type":"application/json","lastModified":1605933098477.417,"size":1124880}] 32:{"id":"3b7973eceabbd19f","slug":"popular-baby-names-in-new-york-city","title":"Popular Baby Names in New York City","thumbnail":"da553d1a63e27d2f70dd2513df112636cd84f1bde59a1ed0f51120388f7d35f5","access_level":"public","create_time":"$D2020-11-19T16:11:33.774Z","update_time":"$D2020-11-21T06:05:16.917Z","view_time":null,"first_public_time":"$D2020-11-21T05:24:26.966Z","has_unpublished_edits":null,"fork":false,"stars":3,"starred":false,"owner":{"type":"team","id":"7a5a5a266053fb35","login":"riledigital","name":"Ri","avatar_url":"https://avatars-next.observableusercontent.com/87b813ad2cf4fc91f9ba3492ee7a7821963c890a8b1c8fa84df022812727095d","tier":"starter_2024"},"version":785,"publish_version":785,"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":2,"collection":null,"type":"notebook","body":{"title":"Popular Baby Names in New York City","cells":[{"id":0,"value":"md`# Popular Baby Names in New York City\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`","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":424,"value":"viewof selectedYear = Scrubber([2011, 2012, 2013, 2014, 2015, 2016], {\n autoplay: true,\n delay: 6000\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} is rank #${current.rnk}, with ${current.cnt} born in ${current.brth_yr}

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":69,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":249,"value":"radiusSize = 20","pinned":false,"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(filtered)\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(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 }\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\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":413,"value":"filtered = data.filter(d => d.brth_yr === selectedYear)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":549,"value":"data = 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":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":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":"$W35","stdlib":"1","titling":"auto"}} 33:"$32:body"