TOP 20 Majors With Median Earnings

This bar chart variant with tilted axis labels shows top 20 majors with the most medium earnings.

This bar chart was forked from curran's block: Tilted Labels . Data from FiveThirtyEight: college-majors.

<!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: #8E8883;
        font-size: 8pt;
        font-family: sans-serif;
      }
      .axis-label {
        fill: #635F5D;
        font-size: 30pt;
        font-family: sans-serif;
      }
    </style>
  </head>
  <body>
    <svg width="960" height="500"></svg>
    <script>

const xValue = d => d.major;
      const xLabel = 'Major';
      const yValue = d => d.median;
      const yLabel = 'Median earnings';
      const margin = { left: 150, right: 70, top: 20, bottom: 200 };

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 - 60)
          .attr('y', 140)
          .text(xLabel);

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

const xScale = d3.scaleBand()
        .paddingInner(0.3)
        .paddingOuter(0.2);
      const yScale = d3.scaleLinear();

const xAxis = d3.axisBottom()
        .scale(xScale)
        .tickSize(-innerHeight);

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

const row = d => {
        const median = d['Median'];
        return {
          major: d['Major'],
          median: +median.replace(/,/g, '')
        };
      };

d3.csv('dataset3.csv', row, data => {
        xScale
          .domain(data.map(xValue))
          .range([0, innerWidth]);

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

g.selectAll('rect').data(data)
          .enter().append('rect')
            .attr('x', d => xScale(xValue(d)))
            .attr('y', d => yScale(yValue(d)))
            .attr('width', d => xScale.bandwidth())
            .attr('height', d => innerHeight - yScale(yValue(d)))
            .attr('fill', 'steelblue');

xAxisG.call(xAxis);
        xAxisG.selectAll('.tick line').remove();
        xAxisG.selectAll('.tick text')
            .attr('transform', 'rotate(-45)')
            .attr('text-anchor', 'end')
            .attr('alignment-baseline', 'middle')
            .attr('x', -5)
            .attr('y', 6)
            .attr('dy', 0);

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

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