31:T430,md`Among scientists and engineers, men were more likely than women to work in an S&E occupation in 2017. However, women were more likely than men to work in an S&E-related occupation, which includes health occupations. The net result is that female scientists and engineers were more likely than male scientists and engineers to work in a non-S&E occupation. Having a degree in an S&E field, does not always translate to employment in S&E occupations. This could be due to reasons such as personal interests, life circumstances, or lack of perceived and actual employment opportunities. Although women have reached parity with men among S&E bachelor’s degree recipients, owing to high rates in Psychology and Social Sciences, they are still underrepresented in S&E occupations, particularly in Computer Science and Engineering. Continued efforts need to be made to expose women to Science, technology, engineering, and mathematics (STEM) from a young age, encourage attainment of S&E higher education, to eventually meet the demand for workers in STEM-related jobs. `32:T1146,function generateChart(dataF, FIELDS, layout){ const {ROWS, COLS, width, height, refColName, HEADER} = layout const svg = d3.create("svg") .attr("width", width) .attr("height", height); const w = width * 0.96 const h = height * 0.8 const hInner = h/ROWS - 30 const wInner = w/COLS - 20 const main = svg.append('g') .attr('class', 'main') .attr('transform', `translate(${width * 0.05}, ${height * 0.1})`) function getYOuter(i){ if(i<=2){ return 0 } else if(i>2 && i<=5){ return h * (1/ROWS) } else { return h * (2/ROWS) } } function getXOuter(i){ if(i === 0 || i === 3 || i === 6){ return 0 } else if(i === 1 || i === 4 || i === 7){ return w * (1/COLS) } else if(i === 2 || i === 5 || i === 8){ return w * (2/COLS) } } const colorScale = d3.scaleOrdinal() .domain(YEARS) .range(COLORS) const yScale = d3.scaleLinear() .domain([0, 100]) .range([hInner, 0]) const totalPeople = d3.sum(dataF, d => parseInt(d[refColName].replace(/,/g, ""))) const widthScale = d3.scaleLinear() .range([0,wInner-30]) .domain([0, totalPeople]) FIELDS.map((FIELD,index)=>{ const years = main.append('g') .attr('class', 'years') .attr("transform",`translate(${getXOuter(index)},${getYOuter(index)})`) const yAxis = years.append('g') .attr("transform",`translate(${wInner},${30})`) .call(d3.axisLeft(yScale) .tickValues([0, 25, 50, 75, 100]) .tickSize(wInner) //.tickFormat(d3.format(',%')) ) .call(g => g.select(".domain") .remove()) .call(g => g.selectAll(".tick:not(:first-of-type) line") .attr("stroke-opacity", 0.2) .attr("stroke-dasharray", "2,2")) .call(g => g.selectAll(".tick text") .attr("x", -4) .attr("dy", -4)) .call(g => index === 0 && g.select(".tick:last-of-type text").clone() .attr("x", -36) .attr("text-anchor", "end") .text("Percent women")) const dataAccessor = d => parseInt(d[`Total_${[FIELD]}`].replace(/,/g, "")) const cumulativeSum = dataF.map(dataAccessor).map((sum => value => sum += value)(0)) const year = years.selectAll('.year') .data(dataF) .join( enter => enter.append('g') .attr('class', d => `${FIELD}-${d.year}`) ) year.attr("transform",`translate(${0},${30})`) year .append('rect') .attr('height', d => hInner - yScale(+d[`Perc_${[FIELD]}`])) .attr('width', d => widthScale(parseInt(d[`Total_${[FIELD]}`].replace(/,/g, "")))) .attr('x', (d, i) => i === 0 ? 0 : widthScale(cumulativeSum[i-1])) .attr('y', d => yScale(+d[`Perc_${[FIELD]}`])) .attr('fill', d => colorScale(d.year)) .attr('stroke', '#50514f') year .append('text') .attr('text-anchor', 'middle') .attr('font-size', 10) .attr('x', (d, i) => (i === 0 ? 0 : widthScale(cumulativeSum[i-1])) + widthScale(parseInt(d[`Total_${[FIELD]}`].replace(/,/g, "")))/2) .attr('y', d => yScale(+d[`Perc_${[FIELD]}`])/2 + hInner/2) .attr('font-family', 'sans-serif') .attr('font-weight', 'bold') .text((d,i) => (widthScale(cumulativeSum[i-1]) > 35) ? Math.round(d[`Perc_${[FIELD]}`]/100 * parseInt(d[`Total_${[FIELD]}`].replace(/,/g, ""))) : "") year .append('text') .attr('text-anchor', 'middle') .attr('font-size', 8) .attr('x', (d, i) => (i === 0 ? 0 : widthScale(cumulativeSum[i-1])) + widthScale(parseInt(d[`Total_${[FIELD]}`].replace(/,/g, "")))/2) .attr('y', d => yScale(+d[`Perc_${[FIELD]}`])/2 + hInner/2 + 12) .attr('font-family', 'sans-serif') .attr('font-weight', 'bold') .text((d,i) => (widthScale(cumulativeSum[i-1]) > 35) ? 'women' : "") year .append("text") .attr('class', 'title') .attr('x', wInner * 0.5) .attr('y', 5) .attr('font-size', 12) .attr('text-anchor', 'middle') .text(FIELD) }) svg.append("text") .attr('class', 'title') .attr('x', width * 0.5) .attr('y', height * 0.05) .attr('font-size', 18) .attr('font-weight', 'bold') .attr('text-anchor', 'middle') .text(HEADER) return Object.assign(svg.node()); }33:T15db,function generateChart1(dataF, FIELDS, layout){ const {ROWS, COLS, width, height, refColName, HEADER} = layout const svg = d3.create("svg") .attr("width", width) .attr("height", height); const w = width * 0.96 const h = height * 0.8 const hInner = h/ROWS - 30 const wInner = w/COLS - 20 const main = svg.append('g') .attr('class', 'main') .attr('transform', `translate(${width * 0.05}, ${height * 0.1})`) function getXOuter(i){ if(COLS === 1) return 0 if(i<=2){ return 0 } else if(i>2 && i<=5){ return w * (1/COLS) } else { return w * (2/COLS) } } function getYOuter(i){ if(ROWS === 1) return 0 if(i === 0){ return 0 } else if(i === 1){ return h * (1/ROWS) } else if(i === 2){ return h * (2/ROWS) } else if(i === 3){ return h * (3/ROWS) } } const yScale = d3.scaleLinear() .domain([0, 100]) .range([hInner, 0]) const totalPeople = parseInt(dataF.find(d=>d['Category'].trim() === 'Non-S&E occupations_all')['Total'].replace(/,/g, "")) const widthScale = d3.scaleLinear() .range([0,wInner-30]) .domain([0, totalPeople]) FIELDS.map((FIELD,index)=>{ const years = main.append('g') .attr('class', 'years') .attr("transform",`translate(${getXOuter(index)},${getYOuter(index)})`) const yAxis = years.append('g') .attr("transform",`translate(${wInner},${30})`) .call(d3.axisLeft(yScale) .tickValues([0, 25, 50, 75, 100]) .tickSize(wInner) //.tickFormat(d3.format(',%')) ) .call(g => g.select(".domain") .remove()) .call(g => g.selectAll(".tick:not(:first-of-type) line") .attr("stroke-opacity", 0.2) .attr("stroke-dasharray", "2,2")) .call(g => g.selectAll(".tick text") .attr("x", -4) .attr("dy", -4)) .call(g => index === 0 && g.select(".tick:last-of-type text").clone() .attr("x", -36) .attr("text-anchor", "end") .text("Percent women")) const dataF1 = dataF.filter(d => d['Category'].trim() === FIELD) const dataAccessor = d => parseInt(d[`Total`].replace(/,/g, "")) const cumulativeSum = dataF1.map(dataAccessor).map((sum => value => sum += value)(0)) const year = years.selectAll('.year') .data(dataF1) .join( enter => enter.append('g') .attr('class', d => `${FIELD}-${d['Occupation'].trim()}`) ) year.attr("transform",`translate(${0},${30})`) year .append('rect') .attr('height', d => hInner - yScale(+d[`Perc`])) .attr('width', d => widthScale(parseInt(d[`Total`].replace(/,/g, "")))) .attr('x', (d, i) => i === 0 ? 0 : widthScale(cumulativeSum[i-1])) .attr('y', d => yScale(+d[`Perc`])) .attr('fill', 'whitesmoke') .attr('stroke', '#50514f') year .append('text') .attr('text-anchor', 'middle') .attr('font-size', 10) .attr('x', (d, i) => (i === 0 ? 0 : widthScale(cumulativeSum[i-1])) + widthScale(parseInt(d[`Total`].replace(/,/g, "")))/2) .attr('y', d => yScale(+d[`Perc`]) - 15) .attr('font-family', 'sans-serif') .attr('font-weight', 'bold') .text((d,i) => (d[`Perc`]/100 * parseInt(d[`Total`].replace(/,/g, "")) > 119000 && d[`Perc`]/100 * parseInt(d[`Total`].replace(/,/g, "")) <= 330000) ? d3.format(",")(d[`Perc`]/100 * parseInt(d[`Total`].replace(/,/g, ""))) : "") year .append('text') .attr('text-anchor', 'middle') .attr('font-size', 10) .attr('x', (d, i) => (i === 0 ? 0 : widthScale(cumulativeSum[i-1])) + widthScale(parseInt(d[`Total`].replace(/,/g, "")))/2) .attr('y', d => yScale(+d[`Perc`]) - 5) .attr('font-family', 'sans-serif') .attr('font-weight', 'normal') .text((d,i) => (d[`Perc`]/100 * parseInt(d[`Total`].replace(/,/g, "")) > 119000 && d[`Perc`]/100 * parseInt(d[`Total`].replace(/,/g, "")) <= 330000) ? d["Occupation"] : "") year .append('text') .attr('text-anchor', 'middle') .attr('font-size', 10) .attr('x', (d, i) => (i === 0 ? 0 : widthScale(cumulativeSum[i-1])) + widthScale(parseInt(d[`Total`].replace(/,/g, "")))/2) .attr('y', d => yScale(+d[`Perc`])/2 + hInner/2) .attr('font-family', 'sans-serif') .attr('font-weight', 'bold') .text((d,i) => d[`Perc`]/100 * parseInt(d[`Total`].replace(/,/g, "")) > 330000 ? d3.format(",")(d[`Perc`]/100 * parseInt(d[`Total`].replace(/,/g, ""))) : "") year .append('text') .attr('text-anchor', 'middle') .attr('font-size', 10) .attr('x', (d, i) => (i === 0 ? 0 : widthScale(cumulativeSum[i-1])) + widthScale(parseInt(d[`Total`].replace(/,/g, "")))/2) .attr('y', d => yScale(+d[`Perc`])/2 + hInner/2 + 10) .attr('font-family', 'sans-serif') .attr('font-weight', 'normal') .text((d,i) => d[`Perc`]/100 * parseInt(d[`Total`].replace(/,/g, "")) > 330000 ? d['Occupation'] : "") year .append("text") .attr('class', 'title') .attr('x', wInner * 0.5) .attr('y', 0) .attr('font-size', 12) .attr('text-anchor', 'middle') .text(FIELD) }) svg.append("text") .attr('class', 'title') .attr('x', width * 0.5) .attr('y', height * 0.05) .attr('font-size', 18) .attr('font-weight', 'bold') .attr('text-anchor', 'middle') .text(HEADER) return Object.assign(svg.node()); }34:[{"id":"4c59e7e019f4bf99c1799d185d7e6c8ea47b1adaf1421da761cf14e0a45e6240c52c272fb439d21a1e3591cefddf4f321d97bb6cfa10ce69b92e061693dc4691","href":"https://static.observableusercontent.com/files/4c59e7e019f4bf99c1799d185d7e6c8ea47b1adaf1421da761cf14e0a45e6240c52c272fb439d21a1e3591cefddf4f321d97bb6cfa10ce69b92e061693dc4691","name":"S&E_degree_stats@3.csv","type":"text/csv","lastModified":1616298075491.728,"size":2756},{"id":"384ce09db9f1393d6bea22b40b44d7f7bffd475b1481374527dbd0d8e75ea3b90f68fdaaa7b9536e2062a923f746fa00f27fa2f52dee34242ef477a7831f6bb6","href":"https://static.observableusercontent.com/files/384ce09db9f1393d6bea22b40b44d7f7bffd475b1481374527dbd0d8e75ea3b90f68fdaaa7b9536e2062a923f746fa00f27fa2f52dee34242ef477a7831f6bb6","name":"S&E_employment_stats_full_2017@1.csv","type":"text/csv","lastModified":1616381053689.167,"size":4209}] 2f:{"title":"U.S. Women in Science & Engineering","cells":[{"id":0,"value":"md`# U.S. Women in Science & Engineering\nFor the past decade, women remain underrepresented in science and engineering (S&E). This means that their representation in S&E education and S&E employment is smaller than their representation in the U.S. population. While the total number of female bachelor's degree holders has grown, improvements in proportion of bachelor's degrees awarded to women is insignificant and has remained below 50% across all S&E fields, with the exception of Psychology, social sciences, and agricultural sciences. Women are even more underrepresented in S&E occupations, particularly in engineering.\n\n###### The [data](https://ncses.nsf.gov/pubs/nsf19304/data) in the visualizations come from surveys conducted by the National Center for Science and Engineering Statistics (NCSES), National Science Foundation; National Center for Education Statistics (NCES), Department of Education; Census Bureau, Department of Commerce; and Bureau of Labor Statistics, Department of Labor.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":228,"value":"html`

Bachelor’s Degrees awarded to U.S. women, 2006, 2011, 2016

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":120,"value":"swatches({\n color: d3.scaleOrdinal(YEARS, COLORS)\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":407,"value":"html`

Width of each rectangle represents total number of bachelor's degrees awarded in that year

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":265,"value":"generateChart(dataF, ['All sciences', 'Non-S&E', 'Engineering'], {ROWS: 1, COLS: 3, width: width, height: height/2, refColName: `Total_Non-S&E`, HEADER: 'Comparison of Sciences, Engineering, Non-S&E fields'})","pinned":false,"hidden":false,"mode":"ojs"},{"id":263,"value":"generateChart(dataF, SE_FIELDS, {ROWS: 3, COLS: 3, width: width, height: height, refColName: `Total_Social sciences`, HEADER: 'Type of Science and engineering (S&E) fields'})","pinned":false,"hidden":false,"mode":"ojs"},{"id":414,"value":"md`\n\nFrom 20016-2016, women held a majority of the bachelor’s degrees in Psychology and Biological sciences. These were the highest rates among the S&E fields. Social sciences. In the field of social sciences, women also earned a majority of bachelor’s degrees consistently.\n\nComputer sciences and Engineering both have one of the lowest shares of women degree recipients among the S&E fields, Although the number of women receiving computer sciences or engineering bachelor's degrees has increased, women’s share of bachelor's degrees has increased only slightly for Engineering and reduced for Computer Sciences.\n\nFor Mathematics and Physical sciences, women remain underrepresented, but fare better than Computer sciences and Engineering. The total number of bachelor's degrees awarded to all sexes is low in these 2 fields, compared to other fields.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":388,"value":"html`

U.S. women as scientists and engineers, 2017

Scientists and engineers here refer to individuals under the age of 76 who have a bachelor's or higher degree, are living in the United States, and have an S&E or S&E-related degree or occupation.

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":517,"value":"html`

Width of each rectangle represents total number of scientists and engineers of both sexes employed in that occupation

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":312,"value":"generateChart1(dataEmployment, ['Science occupations', 'Engineering occupations', 'S&E-related occupations', 'Non-S&E occupations'], {ROWS: 4, COLS: 1, width: width, height: height, refColName: \"Total_Non-S&E occupations\", HEADER: 'Employed female scientists and engineers, by occupational group'})","pinned":false,"hidden":false,"mode":"ojs"},{"id":419,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":247,"value":"md`\n

\n##### This is my entry for the Womens' History Month Dataviz Contest organized by Observable, focused on exploring & celebrating women's rights & milestones through history: https://observablehq.com/@observablehq/womens-history-month-dataviz-contest\n
\n##### Code to generate the marimekko chart modified and adapted from: https://observablehq.com/@karimdouieb/europe-electricity-production\n

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":334,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":257,"value":"SE_FIELDS = ['Agricultural sciences', 'Biological sciences', 'Computer sciences', 'Earth, atmospheric, and ocean sciences', 'Mathematics and statistics', 'Physical sciences', 'Psychology', 'Social sciences', 'Engineering']","pinned":false,"hidden":false,"mode":"ojs"},{"id":205,"value":"YEARS = ['2006', '2011', '2016']","pinned":false,"hidden":false,"mode":"ojs"},{"id":210,"value":"COLORS = ['#f25f5c', \"#247ba0\", \"#70c1b3\"]","pinned":false,"hidden":false,"mode":"ojs"},{"id":13,"value":"data = d3.csvParse(await FileAttachment(\"S&E_degree_stats@3.csv\").text())","pinned":false,"hidden":false,"mode":"ojs"},{"id":326,"value":"dataF = data.filter(d=>YEARS.indexOf(d.year) !== -1)","pinned":false,"hidden":false,"mode":"ojs"},{"id":310,"value":"dataEmployment = d3.csvParse(await FileAttachment(\"S&E_employment_stats_full_2017@1.csv\").text())","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"height = width * 0.8","pinned":false,"hidden":false,"mode":"ojs"},{"id":5,"value":"d3 = require(\"d3\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":192,"value":"import {swatches} from \"@d3/color-legend\"","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W34","stdlib":"1","titling":"auto"}