32:Td2e,chart = { const width = chartWidth; const svg = d3 .select(DOM.svg(width, height)) .style("width", "100%") .style("height", "auto"); svg.append("defs").html(""); const rect = svg .selectAll("g") .data(y01z) .enter() .append("g") .attr("fill", (d, i) => z[i]) .selectAll("rect") .data(d => d) .enter() .append("rect") .attr("x", (d, i) => x(xz[i])) .attr("y", height - margin.bottom) .attr("width", x.bandwidth()) .attr("height", 0); rect.append("title").text(d=>d[2] == 0 ? d[1] + " females" : d[1] - d[0] + " males"); const axisLabelSize = 12; svg.append("g").call(xAxis); svg .append("text") .attr( "transform", `translate(${(width - margin.right - margin.left) / 2 + margin.left} ${height - margin.bottom + 35})` ) .attr("font-size", axisLabelSize) .attr("text-anchor", "middle") .text(`Age (${binSize} year bins)`); svg .append("g") .attr("class", "yAxis") .call(yAxis); svg .append("text") .attr("transform", `translate(${0} ${margin.top - 5})`) .attr("font-size", axisLabelSize) .text("Count"); const legendGroups = svg .append("g") .attr("transform", `translate(${width - margin.right - 200} ${margin.top})`) .selectAll(".legend-elements") .data(z) .join("g") .attr("transform", (d, i) => `translate(${i * 90} 0)`); legendGroups .append("rect") .attr("width", 20) .attr("height", 20) .attr("class", "legend-elements") .attr("fill", d => d) .attr("stroke", "none"); legendGroups .append("text") .attr("dy", 15) .attr("dx", 25) .attr("font-size", axisLabelSize) .text((d, i) => (i == 0 ? "Female" : "Male")); svg .append("text") .attr( "transform", `translate(${(width - margin.right - margin.left) / 2 + margin.left} 20)` ) .attr("font-size", 16) .attr("text-anchor", "middle") .text("Number of Psychologists by Age and Sex, North Carolina, 2017"); svg.node().appendChild( createSVGtext({ text: note, x: 10, y: height - margin.bottom + 55, maxCharsPerLine: 120, fontSize: 10 }) ); d3.select(svg.node().appendChild(logo.childNodes[0].cloneNode(true))); d3.select(svg.node().appendChild(logo.childNodes[2].cloneNode(true))).attr( "transform", `translate(${width - margin.right - 250},${height - margin.bottom + 45}) scale(0.35)` ); function transitionGrouped() { y.domain([0, y1Max]); rect .transition() .duration(500) .delay((d, i) => i * 20) .attr("x", (d, i) => x(xz[i]) + (x.bandwidth() / n) * d[2]) .attr("width", x.bandwidth() / n) .transition() .attr("y", d => y(d[1] - d[0])) .attr("height", d => y(0) - y(d[1] - d[0])); } function transitionStacked() { y.domain([0, y1Max]); rect .transition() .duration(500) .delay((d, i) => i * 20) .attr("y", d => y(d[1])) .attr("height", d => y(d[0]) - y(d[1])) .transition() .attr("x", (d, i) => x(xz[i])) .attr("width", x.bandwidth()); } function update(layout) { if (layout === "stacked") transitionStacked(); else transitionGrouped(); } return Object.assign(svg.node(), { update }); }33:[] 30:{"title":"Population Structure for North Carolina Psychologists, 2017","cells":[{"id":0,"value":"md`## Population Structure for North Carolina Psychologists, 2017`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3,"value":"viewof layout = {\n const form = html``;\n form.oninput = () => (form.value = form.radio.value);\n form.onchange = () => {\n // Safari…\n form.value = form.radio.value;\n form.dispatchEvent(new CustomEvent(\"input\"));\n };\n form.value = form.radio.value;\n setTimeout(() => {\n form.value = form.radio.value = \"grouped\";\n form.dispatchEvent(new CustomEvent(\"input\"));\n }, 3000);\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":371,"value":"viewof binSize = slider({\n min: 1, \n max: 10, \n step: 1, \n value: 5, \n title: \"Bin Size\", \n description: \"Choose between 1 and 10\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":365,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":142,"value":"update = {\n chart.update(layout);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":75,"value":"xz = profNoGaps.map(d=>d.age)","pinned":false,"hidden":false,"mode":"ojs"},{"id":88,"value":"yz = [profNoGaps.map(d=>d.female), profNoGaps.map(d=>d.male)] // the y-values of each of the n series","pinned":false,"hidden":false,"mode":"ojs"},{"id":95,"value":"y01z = d3.stack()\n .keys(d3.range(yz.length))\n (d3.transpose(yz)) // stacked yz\n .map((data, i) => data.map(([y0, y1]) => [y0, y1, i]))","pinned":false,"hidden":false,"mode":"ojs"},{"id":78,"value":"yMax = d3.max(yz, y => d3.max(y))","pinned":false,"hidden":false,"mode":"ojs"},{"id":101,"value":"y1Max = d3.max(y01z, y => d3.max(y, d => d[1]))","pinned":false,"hidden":false,"mode":"ojs"},{"id":104,"value":"x = d3\n .scaleBand()\n .domain(xz)\n .rangeRound([margin.left, chartWidth - margin.right])\n .padding(0.08)","pinned":false,"hidden":false,"mode":"ojs"},{"id":107,"value":"y = d3.scaleLinear()\n .domain([0, y1Max])\n .range([height - margin.bottom, margin.top])","pinned":false,"hidden":false,"mode":"ojs"},{"id":232,"value":"n = yz.length","pinned":false,"hidden":false,"mode":"ojs"},{"id":110,"value":"z = [\"#8704FF\", \"#01C4A7\"]","pinned":false,"hidden":false,"mode":"ojs"},{"id":178,"value":"xAxis = svg => svg.append(\"g\")\n .attr(\"transform\", `translate(0,${height - margin.bottom})`)\n .call(d3.axisBottom(x).tickValues(xz).tickSizeOuter(0).tickFormat(d=>binSize < 3 ? d : `${d} to ${d+binSize-1}`))","pinned":false,"hidden":false,"mode":"ojs"},{"id":286,"value":"yAxis = svg => svg.append(\"g\")\n .attr(\"transform\", `translate(${margin.left}, 0)`)\n .call(d3.axisLeft(y))","pinned":false,"hidden":false,"mode":"ojs"},{"id":508,"value":"chartWidth = 960","pinned":false,"hidden":false,"mode":"ojs"},{"id":113,"value":"height = 500","pinned":false,"hidden":false,"mode":"ojs"},{"id":118,"value":"margin = ({ top: 50, right: 0, bottom: 100, left: 30 })","pinned":false,"hidden":false,"mode":"ojs"},{"id":315,"value":"profLong = {\n let arr = [];\n profNoGaps.forEach(function(d){\n arr.push({age: d.age, sex: 1, count: d.male});\n arr.push({age: d.age, sex: 2, count: d.female});\n })\n \n return arr;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":275,"value":"profNoGaps = {\n const ext = d3.extent(professionals, d=>d.age);\n const range = d3.range(ext[0], ext[1] + 1);\n \n const oneYearBins = range.map(function(d){\n let profValues = [0,0]\n if(profMap.get(d)){\n profValues = profMap.get(d)\n }\n return {age: d, female: profValues[0], male: profValues[1]}\n });\n \n const nYearBins = oneYearBins.reduce(function(acc, curr){\n if(curr.age % binSize == 0 | acc.length == 0){\n let currAge = curr.age - curr.age % binSize;\n acc.push({age: currAge, female:curr.female, male:curr.male});\n } else {\n let lastIndex = acc.length - 1;\n acc[lastIndex].female = acc[lastIndex].female + curr.female;\n acc[lastIndex].male = acc[lastIndex].male + curr.male;\n }\n \n return acc;\n }, []);\n \n //filter bins with n less than 5\n return nYearBins.filter(d=>d.female + d.male >= 5)\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":474,"value":"note =\n \"Notes: Data include active, licensed psychologists in practice in North Carolina as of October 31, 2017. Psychologist data are derived from the North Carolina Psychology Board. Source: North Carolina Health Professions Data System, Program on Health Workforce Research and Policy, Cecil G. Sheps Center for Health Services Research, University of North Carolina at Chapel Hill. Chart code and design derived from https://observablehq.com/@d3/d3-stacked-to-grouped-bars.\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":267,"value":"profMap = new Map(professionals.map(d=>[d.age, [d.female, d.male]]))","pinned":false,"hidden":false,"mode":"ojs"},{"id":213,"value":"professionals = d3.tsvParse(`age\tfemale\tmale\n27\t2\t2\n28\t3\t1\n29\t8\t5\n30\t24\t5\n31\t35\t4\n32\t47\t3\n33\t40\t4\n34\t42\t4\n35\t50\t6\n36\t41\t15\n37\t47\t12\n38\t42\t17\n39\t36\t14\n40\t49\t16\n41\t44\t12\n42\t34\t11\n43\t33\t9\n44\t35\t13\n45\t50\t18\n46\t42\t21\n47\t35\t19\n48\t28\t8\n49\t31\t14\n50\t25\t17\n51\t25\t15\n52\t32\t19\n53\t27\t10\n54\t32\t12\n55\t18\t17\n56\t32\t16\n57\t28\t13\n58\t28\t19\n59\t25\t22\n60\t21\t16\n61\t29\t19\n62\t30\t28\n63\t33\t31\n64\t30\t32\n65\t34\t25\n66\t29\t39\n67\t23\t43\n68\t25\t33\n69\t27\t32\n70\t15\t22\n71\t11\t20\n72\t7\t21\n73\t7\t13\n74\t7\t13\n75\t5\t11\n76\t4\t12\n77\t2\t3\n78\t3\t4\n79\t2\t5\n80\t1\t2\n81\t3\t4\n82\t1\t3\n83\t2\t1\n84\t0\t1\n85\t0\t1\n86\t0\t1\n88\t0\t1\n90\t0\t1\n92\t0\t1\n95\t0\t1\n`, function(d) {\n return {\n age: +d.age, \n male: +d.male, \n female: +d.female\n };\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":82,"value":"d3 = require(\"d3\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":489,"value":"import {logo} from \"@gallowayevan/sheps-health-workforce-nc-logo\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":477,"value":"import {createSVGtext} from \"@gallowayevan/svg-word-wrap\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":348,"value":"import {slider} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}