Women in Comp Science with Total Number of Degrees Awarded

This shows the proportion of bachelors, masters, and doctoral degrees in computer science (and related fields) awarded to women each year between 1971 and 2011. It illustrates that women represented more than 50% of undergraduate CS degrees awarded from 1982 through 1987,but declined to ~40% until 2003, when the percentage of degrees began to drop again, reaching ~20% in 2007. At the same time, there has been a steady rise in the portion of doctoral degrees award to women, starting at less than 5% in 1971, and rising steadily to reach almost 30% in 2008. The trend in Masters degrees appeasr to be a middle path, showing a general trend upward, with peaks 1985 (40%) and 2000 (50%), with valleys in 1995 and 2006 that correspond to the decrease in undergraduate degrees awarded.

The data comes from National Center for Education Statistics - Table 349. The table shows the number of bachelors, masters, amd doctoral degrees awarde to men and women.

Data set file (in MS Excel format) can be found here Original data set was reformated (unstacked) in excel to facilitate visualization.

ORIGINAL DATA SOURCE: U.S. Department of Education, National Center for Education Statistics, Higher Education General Information Survey (HEGIS), "Degrees and Other Formal Awards Conferred" surveys, 1970-71 through 1985-86; Integrated Postsecondary Education Data System (IPEDS), "Completions Survey" (IPEDS-C:87-99); and IPEDS Fall 2000 through Fall 2011, Completions component. (This table was prepared July 2012.)

forked from curran's block: Stylized Scatter Plot with Color Legend

forked from sajudson's block: Women in Comp Sci

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <script src="https://d3js.org/d3.v4.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3-legend/2.24.0/d3-legend.min.js"></script>
    <title>Women in Computer Science: Degrees Awarded 1971-2011</title>
    <style>
      body {
        margin: 0px;
      }
      .domain {
        display: none;
      }
      .tick line {
        stroke: #C0C0BB;
      }
      .tick text, .legendCells text {
        fill: #8E8883;
        font-size: 12pt;
        font-family: sans-serif;
      }
      .axis-label, .legend-label {
        fill: #635F5D;
        font-size: 14pt;
        font-family: sans-serif;
      }
    </style>
  </head>
  <body>
    <svg width="960" height="500"></svg>
    <script>
      const xValue = d => d.Year;
      const xLabel = 'Year';
      const yValue = d => (d.Women / d.Men);
      const rValue = d => (d.Women +d.Men)/500;
      const yLabel = '% Degrees Awarded to Women';
      //const xValue = d => d.Year;
      //const xLabel = 'Year';
      ///onst yValue = d => d.Men + d.Women;
      //const y2Value = d => d.Men;
      //const y3Value = d => d.Women;
      //const yLabel = 'CS Degrees Awarded';
      const colorValue = d => d.Degree;
      const colorLabel = 'Degree';
      const margin = { left: 120, right: 300, top: 20, bottom: 120 };

const svg = d3.select('svg');
      const width = svg.attr('width');
      const height = svg.attr('height');
      const innerWidth = width - margin.left - margin.right;
      const innerHeight = height - margin.top - margin.bottom;

xAxisG.append('text')
          .attr('class', 'axis-label')
          .attr('x', innerWidth / 2)
          .attr('y', 75)
          .text(xLabel);

yAxisG.append('text')
          .attr('class', 'axis-label')
          .attr('x', -innerHeight / 2)
          .attr('y', -60)
          .attr('transform', `rotate(-90)`)
          .style('text-anchor', 'middle')
          .text(yLabel);

colorLegendG.append('text')
          .attr('class', 'legend-label')
          .attr('x', -30)
          .attr('y', -40)
          .text(colorLabel);

const xScale = d3.scaleLinear();
      const yScale = d3.scaleLinear();
      const rScale = d3.scaleSqrt();
      const colorScale = d3.scaleOrdinal()
        .range(d3.schemeCategory10);

const xAxis = d3.axisBottom()
        .scale(xScale)
        .tickPadding(15)
        .tickFormat(d3.format('0'))
        .tickSize(-innerHeight);

const yAxis = d3.axisLeft()
        .scale(yScale)
        .ticks(5)
        .tickPadding(15)
        .tickFormat(d3.format('.0%'))
        .tickSize(-innerWidth);

const colorLegend = d3.legendColor()
        .scale(colorScale)
        .shape('circle');

const row = d => {
        d.Men = +d.Men;
        d.Women = +d.Women;
        d.Year = +d.Year;
        return d;
      };

d3.csv("dataCS.csv", row, data => {
        xScale
          .domain(d3.extent(data, xValue))
          .range([0, innerWidth])
          .nice();

yScale
          .domain(d3.extent(data, yValue))
          .range([innerHeight, 0])
          .nice();

//set minimum/max size for circle
        rScale
          .domain(d3.extent(data, rValue))
          .range([2, 30])
          .nice();

g.selectAll('circle').data(data)
          .enter().append('circle')
            .attr('cx', d => xScale(xValue(d)))
            .attr('cy', d => yScale(yValue(d)))
            .attr('fill', d => colorScale(colorValue(d)))
            .attr('fill-opacity', 0.34)
            .attr('r', d => rScale(rValue(d)));

xAxisG.call(xAxis);
        yAxisG.call(yAxis);
        colorLegendG.call(colorLegend)
          .selectAll('.cell text')
            .attr('dy', '0.1em');
      });
    </script>
  </body>
</html>

https://d3js.org/d3.v4.min.js

https://cdnjs.cloudflare.com/ajax/libs/d3-legend/2.24.0/d3-legend.min.js