2b:null 2c:["$","title",null,{"children":"Birth Statistics: Mother's Age for First Born | Dan Bridges | Observable"}] 32:T443,md`This interactive demo displays the distribution of ages when a woman has her first child. It has been widely reported that the average age for starting a family has been increasing over time. By looking at the distribution for the year 2003, we can see that it actually consists of two overlapping populations, one centered around 19 years of age, and a broader population centered around 28 years of age. As we march forward in time, both distributions display an overall shift to the right, but the most prominent effect is the shrinking in amplitude of the number of babies born to younger women. This effect stays even when correcting for the general population size of women in that age group, which can be shown by changing the measurement select to Birth Rate. The secondary effect of an overall reduction in birth rate between 2003 and 2017 is also visible. More information on this notebook and its data sources can be found in my blog post: [Visualizing Birth Statistics Using D3.js](https://medium.com/parallel-thinking/visualizing-birth-statistics-using-d3-js-4a43337f6976)`33:T515,chart = { const svg = d3.select(DOM.svg(width, height)); svg.append("g") .call(xAxis); svg.append("g") .call(yAxis); if (chartType == "line") { svg.append("path") .datum(filteredData) .attr("fill", "#FFFFFF") .attr("stroke", "#7FB3D5") .attr("stroke-width", 2.5) .attr("stroke-linejoin", "round") .attr("stroke-linecap", "round") .attr("d", line); } else { svg.selectAll(".bar") .data(filteredData) .enter().append("rect") .attr("class", "bar") .attr("x", d => x(d.age)) .attr("y", d => y(d[measurement])) .attr("width", x.bandwidth()) .attr("height", d => height - y(d[measurement]) - margin.bottom) .attr("fill", "#7FB3D5"); } // Title svg.append("text") .text(labels.title) .attr("x", width - margin.right - 20) .attr("y", margin.top + 20) .attr("text-anchor", "end") .attr("font-size", 40) .attr("font-family", "sans-serif") // Year label svg.append("text") .text(year) .attr("x", width - margin.right - 20) .attr("y", margin.top + 60) .attr("text-anchor", "end") .attr("font-size", 35) .attr("font-family", "sans-serif") .attr("fill", "gray") return svg.node(); }34:[] 2f:{"id":"fb6cc7148d29b7b8","slug":"birth-statistics-distribution-of-mothers-age-for-first-bor","title":"Birth Statistics: Mother's Age for First Born","thumbnail":"5fc4cc6df59a41d1ab10c9abd84301d19bd3f0d3778d396ea889866e5f93c23a","access_level":"public","create_time":"$D2018-05-16T03:18:52.575Z","update_time":"$D2018-05-22T21:18:51.806Z","view_time":null,"first_public_time":"$D2018-05-18T04:49:33.804Z","fork":true,"stars":3,"starred":false,"owner":{"type":"team","id":"ec7d91e7edaefa2d","login":"dbridges","name":"Dan Bridges","avatar_url":"https://avatars-next.observableusercontent.com/8ae67489a8f8f73b5f102c88c8dd30d2842e1c2aa5e2dff302384b765cf26dec","tier":"starter_2024"},"version":329,"publish_version":329,"role":null,"authored":false,"authors":[{"type":"individual","id":"ac1892211398a1b8","login":"dbridges","name":"Dan Bridges","avatar_url":"https://avatars-next.observableusercontent.com/8ae67489a8f8f73b5f102c88c8dd30d2842e1c2aa5e2dff302384b765cf26dec","tier":null}],"members":[{"type":"individual","id":"ac1892211398a1b8","login":"dbridges","name":"Dan Bridges","avatar_url":"https://avatars-next.observableusercontent.com/8ae67489a8f8f73b5f102c88c8dd30d2842e1c2aa5e2dff302384b765cf26dec","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"title":"Birth Statistics: Mother's Age for First Born","cells":[{"id":0,"value":"md`# Birth Statistics: Mother's Age for First Born`","pinned":false,"hidden":false,"mode":"ojs"},{"id":186,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":11,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":79,"value":"viewof year = labeledSlider({ min: 2003, max: 2016, step: 1, initial: 2003})","pinned":false,"hidden":false,"mode":"ojs"},{"id":280,"value":"viewof measurement = html`\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":177,"value":"viewof chartType = html`\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":20,"value":"height = width / 1.618","pinned":false,"hidden":false,"mode":"ojs"},{"id":13,"value":"margin = ({top: 20, right: 20, bottom: 50, left: 70})","pinned":false,"hidden":false,"mode":"ojs"},{"id":29,"value":"x = d3.scaleBand()\n .rangeRound([margin.left, width - margin.right])\n .padding(0.1)\n .domain(d3.range(15, 50, 1))","pinned":false,"hidden":false,"mode":"ojs"},{"id":31,"value":"y = d3.scaleLinear()\n .domain([0, d3.max(data, d => d[measurement])]).nice()\n .range([height - margin.bottom, margin.top])","pinned":false,"hidden":false,"mode":"ojs"},{"id":42,"value":"xAxis = g => g\n .attr(\"transform\", `translate(0,${height - margin.bottom})`)\n .call(d3.axisBottom(x).ticks(width / 80))\n .call(g => g.append(\"text\")\n .attr(\"x\", (width / 2) + margin.right)\n .attr(\"y\", 35)\n .attr(\"fill\", \"black\")\n .attr(\"font-size\", 14)\n .text(labels.x))","pinned":false,"hidden":false,"mode":"ojs"},{"id":45,"value":"yAxis = g => g\n .attr(\"transform\", `translate(${margin.left},0)`)\n .call(d3.axisLeft(y).ticks(5))\n .call(g => g.append(\"text\")\n .attr(\"transform\", \"rotate(-90)\")\n .attr(\"x\", -height / 2 + margin.top)\n .attr(\"y\", -margin.left + 15)\n .attr(\"text-anchor\", \"middle\")\n .attr(\"fill\", \"black\")\n .attr(\"font-size\", 14)\n .text(labels.y))","pinned":false,"hidden":false,"mode":"ojs"},{"id":57,"value":"line = d3.line()\n .curve(d3.curveCatmullRom)\n .x(d => x(d.age))\n .y(d => y(d[measurement]))","pinned":false,"hidden":false,"mode":"ojs"},{"id":297,"value":"labels = ({\n x: \"Mother's Age (yr)\",\n y: (measurement == \"births\" ? \"Number of Births\" : \"Birth Rate (%)\"),\n title: (measurement == \"births\" ? \"Birth Count - First Born\" : \"Birth Rate - First Born\")\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"d3 = require(\"https://d3js.org/d3.v5.min.js\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"data = {\n const data = await d3.csv(\"https://gist.githubusercontent.com/dbridges/de31e66a9176688315d9426c51c6a12c/raw/37d3bf06379bb6ae3ba15dbc4bceed9dff793e37/birth_counts_mother_age_2002_2016.csv\", ({year, age, births, population, adjustedBirths}) => ({\n year: +year,\n age: +age,\n births: +births,\n adjustedBirths: +adjustedBirths\n })); \n return data;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":195,"value":"filteredData = data.filter(d => d.year == year)","pinned":false,"hidden":false,"mode":"ojs"},{"id":216,"value":"style = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":254,"value":"labeledSlider = (options) => {\n {\n const defaults = {\n min: 0,\n max: 100,\n step: 1,\n initial: 0\n };\n \n options = Object.assign(defaults, options);\n \n const input = html``;\n const valueReadout = html`${options.initial}`;\n const result = md`${input} ${valueReadout}`;\n \n input.addEventListener(\"input\", () => update());\n\n function update() {\n valueReadout.innerText = input.valueAsNumber;\n result.value = input.valueAsNumber;\n }\n\n result.value = options.initial;\n return result;\n }\n}","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W34","stdlib":"1","titling":"auto"}} 30:"$2f:body"