Female STEM Majors

This bar chart is based on data from National Girls Collaborative Project and shows that in 2013 even though women earned more than half of all bachelor's degrees in the US they are still a minority in many STEM fields

Built with blockbuilder.org

forked from curran's block: Extremist Murders in the US

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    body {
      margin:0px;
    }
    .label, .number {
      font-size: 16pt;
      font-family: 'san-serif';
      alignment-baseline: middle;
      fill: #36454f;
    }
    .subtitle {
      font-size: 20pt;
      font-family: 'impact';
      alignment-baseline: middle;
      fill: #890089;
    }
    .bar {
      fill: pink;
    }
  </style>
</head>

<body>
  <script>
    const width = 960;
    const height = 500;
    const margin = {
      left: 50,
      right: 190,
      top: 90,
      bottom: 52
    }
    
    const svg = d3.select("body").append("svg")
        .attr("width", width)
        .attr("height", height);
    
    svg.append('text')
        .attr('class', 'subtitle')
        .attr('x', margin.left)
        .attr('y', 86)
        .text('Percentage of US Bachelor\'s Degrees Earned by Women in 2013 by Major');
    
    
    const g = svg.append('g')
      .attr('transform', `translate(${margin.left}, ${margin.top})`)
    
    const data = [
      {
        name: "All Bachelor's Degrees",
        value: 57.3
      },
      {
        name: "All Science and Engineering Fields",
        value: 50.3
      },
      {
        name: "Mathematics",
        value: 43.1
      },
      {
      	name: "Physical Sciences",
      	value: 39
      },
      {
        name: "Engineering",
        value: 19.3
      },
      {
        name: "Computer Science",
        value: 17.9
      }
    ];
    
    const innerWidth = width - margin.left - margin.right;
    const innerHeight = height - margin.top - margin.bottom;
    
    const xValue = d => d.value;
    const yValue = d => d.name;
    
    const xScale = d3.scaleLinear()
      .domain([0, d3.max(data, xValue)])
      .range([0, innerWidth]);
    
    const yScale = d3.scaleBand()
      .domain(data.map(yValue).reverse())
      .range([innerHeight, 0])
      .padding(0.272);
    
    const groups = g.selectAll('g').data(data);
    const groupsEnter = groups
      .enter().append('g')
        .attr('transform', d => `translate(0, ${yScale(yValue(d))})`);
    
    groupsEnter
      .append('rect')
        .attr('class', 'bar')
        .attr('width', d => xScale(xValue(d)))
        .attr('height', yScale.bandwidth())
        .attr('fill', 'black');
    
    groupsEnter
      .append('text')
        .attr('class', 'label')
        .attr('x', 15)
        .attr('y', yScale.bandwidth() / 2)
        .text(yValue);
    
    const percentFormat = d3.format(",.1%");
    const xPercent = d => percentFormat(xValue(d) / xScale.domain()[1]);
    
    groupsEnter
      .append('text')
        .attr('class', 'number')
        .attr('x', d => xScale(xValue(d)) + 10)
        .attr('y', yScale.bandwidth() / 2)
        .text(d => `${xValue(d)}%`);

</script>
</body>

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