Doctorate recipients, by major field of study, 2015

The data describes the recipients number of Doctorate degree in a variety of major field of studies. This data is downloaded from National Science Foundation (NSF) at

Data from National Science Foundation.

This Scatter plotting chart was forked from Curran Kelleher's block: Scatter Plot with Ordinal Axis.

<!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>
    <title>Top Internet Countries Visualization</title>
    <style>
      body {
        margin: 0px;
      }
      .domain {
        display: none;
      }
      .tick line {
        stroke: #C0C0BB;
      }
      .tick text {
        fill: #838f8d;
        font-size: 10pt;
        font-family: sans-serif;
      }
      .axis-label {
        fill: #635F5D;
        font-size: 20pt;
        font-family: sans-serif;
      }
    </style>
  </head>
  <body>
    <svg width="960" height="500"></svg>
    <script>
      const xValue = d => d.name;
      const xLabel = 'Major';
      const yValue = d => d.value;
      const yLabel = 'PhD recipients';
      const margin = { left: 150, right: 100, top: 20, bottom: 110 };

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', 90)
          .text(xLabel);

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

const xScale = d3.scalePoint();
      const yScale = d3.scaleLinear();
      
      const xAxis = d3.axisBottom()
        .scale(xScale)
        .tickPadding(15)
        .tickSize(-innerHeight);

const yTicks = 5;      
      const yAxis = d3.axisLeft()
        .scale(yScale)
        .ticks(yTicks)
        .tickPadding(15)
        .tickSize(-innerWidth);

const row = d => {
        const netUsersWithCommas = d['value'];
        return {
          name: d['name'],
          value: +netUsersWithCommas
        };
      };
			
      const top6 = data => data.slice(0, 6)
      
      d3.csv('data.csv', row, data => {
        data = top6(data);
        xScale
          .domain(data.map(xValue))
          .range([0, innerWidth]);

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

g.selectAll('circle').data(data)
          .enter().append('circle')
            .attr('cx', d => xScale(xValue(d)))
            .attr('cy', d => yScale(yValue(d)))
            .attr('fill', 'black')
            .attr('fill-opacity', 0.6)
            .attr('r', 8);

xAxisG.call(xAxis);
        yAxisG.call(yAxis);
      });
    </script>
  </body>
</html>

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