31:T1e3c,function drawWaitingChart(waitingData) { const width = multWidth; const height = multHeight; const marginTop = 5; const marginRight = 5; const marginLeft = 5; // style things const radius = 15; const strokeWidth = 7; const lightTeal = '#819999'; const midTeal = '#46696a'; const darkTeal = '#013d3e'; // data things const n = waitingData.length; const waitingLength = waitingData.waitingLength; // select "div" const parentEl = d3.select(this); // draw chart element const chartEls = parentEl.append('g') .selectAll('g') .data([waitingData]) .join('g') .attr('class', 'chartEl'); // draw headlines const stateLabel = chartEls.append('g') .attr('class', 'stateLabelGroup'); stateLabel.append('text') .attr('class', `stateLabel ${waitingData.location}`) .attr('x', (0 - (marginLeft + marginRight))) .attr('y', -height) .attr('font-family', 'sans-serif') .attr('font-size', '0.8em') .attr('font-weight', '600') .text(waitingData.locationAbbr); // create texture const textureNone = textures.lines() .orientation('vertical') .strokeWidth(1) .size(8) .stroke('#ffffff'); chartEls.call(textureNone); // draw main circle if (waitingData.hasWaiting === 1) { const mainCircle = chartEls.append('circle') .attr('cx', '0') .attr('cy', '0') .attr('r', radius + marginTop) .style('fill', 'white') .style('fill-opacity', '0.8'); } else { const mainCircle = chartEls.append('circle') .attr('cx', '0') .attr('cy', '0') .attr('r', (radius * 1.25) + marginTop) .style('stroke', 'white') .style('stroke-width', '1') .style('fill', textureNone.url()); } // draw waiting length if (waitingLength === 18) { const arc = d3.arc() .innerRadius(radius + marginTop) .outerRadius(radius + marginTop); const drawnArc = chartEls.append('path') .style('stroke', lightTeal) .style('stroke-width', strokeWidth) .attr('d', arc({ startAngle: 0, endAngle: (Math.PI * 1.5) })); } else if (waitingLength === 24) { chartEls.append('circle') .attr('cx', '0') .attr('cy', '0') .attr('r', radius + marginTop) .style('stroke', lightTeal) .style('stroke-width', strokeWidth) .style('fill', 'none'); } else if (waitingLength === 48) { // draw 24 hours circle chartEls.append('circle') .attr('cx', '0') .attr('cy', '0') .attr('r', radius + marginTop) .style('stroke', lightTeal) .style('stroke-width', strokeWidth) .style('fill', 'none'); // draw 48 hours circle chartEls.append('circle') .attr('cx', '0') .attr('cy', '0') .attr('r', (radius * 2) * 0.9) .style('stroke', midTeal) .style('stroke-width', strokeWidth) .style('fill', 'none'); } else if (waitingLength === 72) { // draw 24 hours circle chartEls.append('circle') .attr('cx', '0') .attr('cy', '0') .attr('r', radius + marginTop) .style('stroke', lightTeal) .style('stroke-width', strokeWidth) .style('fill', 'none'); // draw 48 hours circle chartEls.append('circle') .attr('cx', '0') .attr('cy', '0') .attr('r', (radius * 2) * 0.9) .style('stroke', midTeal) .style('stroke-width', strokeWidth) .style('fill', 'none'); // draw 72 hours circle chartEls.append('circle') .attr('cx', '0') .attr('cy', '0') .attr('r', radius * 2.2) .style('stroke', darkTeal) .style('stroke-width', strokeWidth) .style('fill', 'none'); } // draw labels if (waitingData.location === 'Alabama') { // BACKGROUND const twoDayLabelBG = chartEls.append('text') .selectAll('tspan') .data(['48 hours']) .enter().append('tspan') .attr('class', 'oneLabel bg') .attr('x', 0) .attr('y', 0 + marginTop) .attr('text-anchor', 'middle') .attr('fill','white') .attr('stroke','white') .attr('stroke-width','6') .attr('stroke-linejoin','round') .attr('font-family', 'monospace') .attr('font-size', '0.8em') .text((d) => d); // FOREGROUND const twoDayLabelFG = chartEls.append('text') .selectAll('tspan') .data(['48 hours']) .enter().append('tspan') .attr('class', 'oneLabel') .attr('x', 0) .attr('y', 0 + marginTop) .attr('text-anchor', 'middle') .attr('font-family', 'monospace') .attr('font-size', '0.8em') .text((d) => d); } if (waitingData.location === 'Alaska') { // BACKGROUND const twoDayLabelBG = chartEls.append('text') .selectAll('tspan') .data(['No waiting', 'period']) .enter().append('tspan') .attr('class', 'oneLabel bg') .attr('x', 0) .attr('y', (d, i) => { return (0) + (i * 14); }) .attr('text-anchor', 'middle') .attr('fill','white') .attr('stroke','white') .attr('stroke-width','6') .attr('stroke-linejoin','round') .attr('font-family', 'monospace') .attr('font-size', '0.8em') .text((d) => d); // FOREGROUND const twoDayLabelFG = chartEls.append('text') .selectAll('tspan') .data(['No waiting', 'period']) .enter().append('tspan') .attr('class', 'oneLabel') .attr('x', 0) .attr('y', (d, i) => { return (0) + (i * 14); }) .attr('text-anchor', 'middle') .attr('font-family', 'monospace') .attr('font-size', '0.8em') .text((d) => d); } if (waitingData.location === 'Arizona') { // BACKGROUND const twoDayLabelBG = chartEls.append('text') .selectAll('tspan') .data(['24 hours']) .enter().append('tspan') .attr('class', 'oneLabel bg') .attr('x', 0) .attr('y', 0 + marginTop) .attr('text-anchor', 'middle') .attr('fill','white') .attr('stroke','white') .attr('stroke-width','6') .attr('stroke-linejoin','round') .attr('font-family', 'monospace') .attr('font-size', '0.8em') .text((d) => d); // FOREGROUND const twoDayLabelFG = chartEls.append('text') .selectAll('tspan') .data(['24 hours']) .enter().append('tspan') .attr('class', 'oneLabel') .attr('x', 0) .attr('y', 0 + marginTop) .attr('text-anchor', 'middle') .attr('font-family', 'monospace') .attr('font-size', '0.8em') .text((d) => d); } if (waitingData.location === 'Arkansas') { // BACKGROUND const twoDayLabelBG = chartEls.append('text') .selectAll('tspan') .data(['72 hours']) .enter().append('tspan') .attr('class', 'oneLabel bg') .attr('x', 0) .attr('y', 0 + marginTop) .attr('text-anchor', 'middle') .attr('fill','white') .attr('stroke','white') .attr('stroke-width','6') .attr('stroke-linejoin','round') .attr('font-family', 'monospace') .attr('font-size', '0.8em') .text((d) => d); // FOREGROUND const twoDayLabelFG = chartEls.append('text') .selectAll('tspan') .data(['72 hours']) .enter().append('tspan') .attr('class', 'oneLabel') .attr('x', 0) .attr('y', 0 + marginTop) .attr('text-anchor', 'middle') .attr('font-family', 'monospace') .attr('font-size', '0.8em') .text((d) => d); } }32:Tea3,function drawUltraChart(ultrasoundData) { const width = multWidth; const height = multHeight; const marginTop = 5; const marginRight = 5; const marginLeft = 5; // style things const radius = 25; const strokeWidth = 1; const darkRed = '#aa0124'; const darkTeal = '#013d3e'; const white = '#ffffff'; // data things const n = ultrasoundData.length; const waitingLength = ultrasoundData.waitingLength; // select "div" const parentEl = d3.select(this); // draw chart element const chartEls = parentEl.append('g') .selectAll('g') .data([ultrasoundData]) .join('g') .attr('class', 'chartEl'); // draw headlines const stateLabel = chartEls.append('g') .attr('class', 'stateLabelGroup'); stateLabel.append('text') .attr('class', `stateLabel ${ultrasoundData.location}`) .attr('x', (0 - (marginLeft + marginRight))) .attr('y', -height) .attr('font-family', 'sans-serif') .attr('font-size', '0.8em') .attr('font-weight', '600') .text(ultrasoundData.locationAbbr); // create texture const textureNone = textures.lines() .orientation('vertical') .strokeWidth(1) .size(8) .stroke('#ffffff'); chartEls.call(textureNone); // draw main circle if (ultrasoundData.hasRequirement === 1) { const mainCircle = chartEls.append('circle') .attr('cx', '0') .attr('cy', '0') .attr('r', radius + marginTop) .style('stroke', white) .style('stroke-width', strokeWidth) .style('fill', 'white') .style('fill-opacity', '0.4'); // draw corresponding requirement if (ultrasoundData.displayDescribe === 1) { // display/describe chartEls.append('circle') .attr('cx', '0') .attr('cy', '0') .attr('r', (radius * 0.6) + marginTop) .style('stroke', darkRed) .style('stroke-width', strokeWidth) .style('fill', darkRed) .style('fill-opacity', '0.6'); } else if (ultrasoundData.viewOpp === 1) { // view chartEls.append('circle') .attr('cx', '0') .attr('cy', '0') .attr('r', (radius * 0.6) + marginTop) .style('stroke', darkTeal) .style('stroke-width', strokeWidth) .style('fill', darkTeal) .style('fill-opacity', '0.6'); } } else { const mainCircle = chartEls.append('circle') .attr('cx', '0') .attr('cy', '0') .attr('r', (radius * 0.75) + marginTop) .style('stroke', 'white') .style('stroke-width', '1') .style('fill', textureNone.url()); } // draw labels if (ultrasoundData.location === 'Alaska') { // BACKGROUND const twoDayLabelBG = chartEls.append('text') .selectAll('tspan') .data(['No ultrasound', 'requirements']) .enter().append('tspan') .attr('class', 'oneLabel bg') .attr('x', 0) .attr('y', (d, i) => { return (0) + (i * 14); }) .attr('text-anchor', 'middle') .attr('fill','white') .attr('stroke','white') .attr('stroke-width','6') .attr('stroke-linejoin','round') .attr('font-family', 'monospace') .attr('font-size', '0.8em') .text((d) => d); // FOREGROUND const twoDayLabelFG = chartEls.append('text') .selectAll('tspan') .data(['No ultrasound', 'requirements']) .enter().append('tspan') .attr('class', 'oneLabel') .attr('x', 0) .attr('y', (d, i) => { return (0) + (i * 14); }) .attr('text-anchor', 'middle') .attr('font-family', 'monospace') .attr('font-size', '0.8em') .text((d) => d); } }33:[{"id":"cd00f0695fee20e80ffb7e4dc6203a1a0ca4abb09cebd030e711ca6026fe4b1788554b120aa5e76c2d6de0bc5fc8b7888cbbde352fc53d352bc934d2db492c3b","href":"https://static.observableusercontent.com/files/cd00f0695fee20e80ffb7e4dc6203a1a0ca4abb09cebd030e711ca6026fe4b1788554b120aa5e76c2d6de0bc5fc8b7888cbbde352fc53d352bc934d2db492c3b","name":"waitingPeriods@1.json","type":"application/json","lastModified":1647010817631.86,"size":6489},{"id":"a6eda0e973a2b73f1be7ae256364617147b8c96a8b18f6929f675d5d8b5bafb958242f4a872b6050fb250f23971aaa6667ce3e8346cf849ce8511e2e6c96a081","href":"https://static.observableusercontent.com/files/a6eda0e973a2b73f1be7ae256364617147b8c96a8b18f6929f675d5d8b5bafb958242f4a872b6050fb250f23971aaa6667ce3e8346cf849ce8511e2e6c96a081","name":"ultrasound@1.json","type":"application/json","lastModified":1647291509785.721,"size":6718}] 2f:{"title":"Abortion Small Multiples","cells":[{"id":0,"value":"# Abortion Small Multiples","pinned":false,"hidden":false,"mode":"md"},{"id":3,"value":"> *The original versions of theses charts were originally published in [this story](https://projects.fivethirtyeight.com/abortion-restrictions-by-state/), by Anna Wiederkehr and Amelia Thomson-DeVeaux.*","pinned":false,"hidden":false,"mode":"md"},{"id":12,"value":"### Load data","pinned":false,"hidden":false,"mode":"md"},{"id":35,"value":"waitingData = FileAttachment(\"waitingPeriods@1.json\").json()","pinned":false,"hidden":false,"mode":"ojs"},{"id":52,"value":"> *This data comes from the [Guttmacher Institute](https://www.guttmacher.org/state-policy/explore/counseling-and-waiting-periods-abortion)*","pinned":false,"hidden":false,"mode":"md"},{"id":939,"value":"ultrasoundData = FileAttachment(\"ultrasound@1.json\").json()","pinned":false,"hidden":false,"mode":"ojs"},{"id":941,"value":"> *This data comes from the [Guttmacher Institute](https://www.guttmacher.org/state-policy/explore/counseling-and-waiting-periods-abortion)*\n> ","pinned":false,"hidden":false,"mode":"md"},{"id":14,"value":"### Load libraries","pinned":false,"hidden":false,"mode":"md"},{"id":22,"value":"d3 = require(\"d3@7\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":598,"value":"textures = require('textures@1.2.0/dist/textures.js')","pinned":false,"hidden":false,"mode":"ojs"},{"id":61,"value":"### Load states","pinned":false,"hidden":false,"mode":"md"},{"id":67,"value":"states = [\"Alaska\",\n \"Alabama\",\n \"Arkansas\",\n \"Arizona\",\n \"California\",\n \"Colorado\",\n \"Connecticut\",\n \"District of Columbia\",\n \"Delaware\",\n \"Florida\",\n \"Georgia\",\n \"Hawaii\",\n \"Iowa\",\n \"Idaho\",\n \"Illinois\",\n \"Indiana\",\n \"Kansas\",\n \"Kentucky\",\n \"Louisiana\",\n \"Massachusetts\",\n \"Maryland\",\n \"Maine\",\n \"Michigan\",\n \"Minnesota\",\n \"Missouri\",\n \"Mississippi\",\n \"Montana\",\n \"North Carolina\",\n \"North Dakota\",\n \"Nebraska\",\n \"New Hampshire\",\n \"New Jersey\",\n \"New Mexico\",\n \"Nevada\",\n \"New York\",\n \"Ohio\",\n \"Oklahoma\",\n \"Oregon\",\n \"Pennsylvania\",\n \"Rhode Island\",\n \"South Carolina\",\n \"South Dakota\",\n \"Tennessee\",\n \"Texas\",\n \"Utah\",\n \"Virginia\",\n \"Vermont\",\n \"Washington\",\n \"Wisconsin\",\n \"West Virginia\",\n \"Wyoming\"]","pinned":false,"hidden":false,"mode":"ojs"},{"id":75,"value":"### Write a few vars + translator function","pinned":false,"hidden":false,"mode":"md"},{"id":796,"value":"columns = 9;\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":904,"value":"multWidth = 40;","pinned":false,"hidden":false,"mode":"ojs"},{"id":909,"value":"multHeight = 40;","pinned":false,"hidden":false,"mode":"ojs"},{"id":219,"value":"function translate(d, i) {\n return `translate(\n ${(50) * (2 * (i % columns) + 1)},\n ${(65) * ((2 * Math.floor(i / columns)) + 1)}\n)`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":24,"value":"### Write chart function","pinned":false,"hidden":false,"mode":"md"},{"id":92,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":954,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":790,"value":"### Draw chart","pinned":false,"hidden":false,"mode":"md"},{"id":811,"value":"In the U.S., half of states impose a waiting period between when a woman receives the counseling and when she can have an abortion. In most states with a waiting period, the waiting period is 24 hours, but two states have a 48-hour waiting period and six states require women to wait 72 hours.","pinned":false,"hidden":false,"mode":"md"},{"id":149,"value":"waitingChart = {\n const backgroundColor = '#EEE3D7';\n const width = 950;\n const height = 780;\n \n const svg = d3.create('svg')\n .attr('width', width)\n .attr('height', height)\n .style('background', backgroundColor);\n\n svg.append('g')\n .attr('class', 'wrapper')\n .attr('transform', 'translate(20,20)')\n .selectAll('g.smallMultiples')\n .data(waitingData)\n .join(\n enter => enter.append('g')\n .attr('class', 'multiple')\n .attr('width', multWidth)\n .attr('height', multHeight)\n .attr('transform', translate),\n )\n .each(drawWaitingChart);\n\n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":38,"value":"> *These mandatory waiting periods may require a woman to make two trips to the health care provider if the state requires the woman to receive in-person counseling and then wait a set amount of time until the abortion appointment. Data as of Feb. 1, 2022. Source: Guttmacher Institute.*","pinned":false,"hidden":false,"mode":"md"},{"id":934,"value":"In 17 states, an ultrasound is required, even though that’s not considered medically necessary for a first-trimester abortion. In six states, the provider has to display and describe the ultrasound image. And in eight states, the provider has to offer the woman an opportunity to view the image.","pinned":false,"hidden":false,"mode":"md"},{"id":960,"value":"ultraChart = {\n const backgroundColor = '#EEE3D7';\n const width = 950;\n const height = 780;\n \n const svg = d3.create('svg')\n .attr('width', width)\n .attr('height', height)\n .style('background', backgroundColor);\n\n svg.append('g')\n .attr('class', 'wrapper')\n .attr('transform', 'translate(20,20)')\n .selectAll('g.smallMultiples')\n .data(ultrasoundData)\n .join(\n enter => enter.append('g')\n .attr('class', 'multiple')\n .attr('width', multWidth)\n .attr('height', multHeight)\n .attr('transform', translate),\n )\n .each(drawUltraChart);\n\n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":975,"value":"> *In New Hampshire, North Carolina and Oklahoma, an ultrasound is required but the abortion provider is not required to offer the woman an opportunity to see the ultrasound image. Data as of Feb. 1, 2022. Source: Guttmacher Institute.*","pinned":false,"hidden":false,"mode":"md"}],"files":"$W33","stdlib":"1","titling":"auto"}