CS Degrees Awarded 1971-2011

This shows total number of bachelors, masters, and doctoral degrees in computer science (and related fields) awarded each year between 1971 and 2011.

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: 8pt;
        font-family: sans-serif;
      }
      .axis-label, .legend-label {
        fill: #635F5D;
        font-size: 12pt;
        font-family: sans-serif;
      }
    </style>
  </head>
  <body>
    <svg width="960" height="500"></svg>
    <script>
      const xValue = d => d.Year;
      const xLabel = 'Year';
      const fValue = d => (d.Women / d.Men);
      const yValue = d => (d.Women +d.Men);
      const yLabel = 'Degrees Awarded';
      //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)
        .tickSize(-innerWidth);

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

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();

g.selectAll('rect').data(data)
          .enter().append('rect')
            .attr('x', d => xScale(xValue(d)))
            .attr('y', d => yScale(yValue(d)))
            .attr('fill', d => colorScale(colorValue(d)))
            .attr('fill-opacity', .75)
            .attr('height', 10)
        		.attr('width', 10);

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