Wage Gap // source http://jsbin.com/tohono

<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
  <script src="https://code.highcharts.com/modules/heatmap.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <div id="container" width="400px" height="600px"></div>
<script id="jsbin-javascript">
$(function() {
  var rawData = [[0,0,897], [1,0,734],
             [0,1,680], [1,1,611],
             [0,2,1080],[1,2,841],
             [0,3,616], [1,3,548]];
  var raw2 = [[897, 734],[680,611],[1080,841],[616,548]];
  
  $('#container').highcharts({
    chart: {
      type: 'heatmap'
    },
    title: {
      text: 'Gaps in the wage gap: earnings per white male dollar',
      style: {
        'font-size': '11pt'
      }
    },
    subtitle: {
      text: 'Based on median weekly earnings of full-time wage and salary workers, 2014'
    },
    xAxis: {
      categories: ['Men', 'Women']
    },
    yAxis: {
      categories: ['White', 'Black', 'Asian', 'Latino'],
      reversed: true,
      title: {text: null}
    },
    colorAxis: {
      maxColor: '#d7191c'
    },
    tooltip: {
      formatter: function() {
        return this.series.yAxis.categories[this.point.y] + ' ' + this.series.xAxis.categories[this.point.x].toLowerCase() + ' had a median weekly earning of $' + raw2[this.point.y][this.point.x];
      }
    },
    credits: {
      href: 'https://www.bls.gov/cps/cpsaat37.htm',
      text: 'from Labor Force Statistics from the Current Population Survey, Bureau of Labor Statistics'
    },
    series: [{
      data: getPerDollar(rawData, 0),
      dataLabels: {
        enabled: true,
        style: {
          textShadow: 'none'
        },
        format: '${point.value: 0.2f}'
      }
    }]
  });
  
  function getPerDollar(array, index) {
    var scaled = [];
    
    // compare value of each entry to value at index
    for (var j = 0; j < array.length; j++) {
      var x = array[j][0];
      var y = array[j][1]; // keep same dimensions
      var value = array[j][2] / array[index][2];
      scaled.push([x, y, value]);
    }
    return scaled;
  }
});
</script>

Modified http://code.jquery.com/jquery-2.1.1.min.js to a secure url

Modified http://code.highcharts.com/highcharts.js to a secure url

Modified http://code.highcharts.com/modules/heatmap.js to a secure url

https://code.jquery.com/jquery-2.1.1.min.js

https://code.highcharts.com/highcharts.js

https://code.highcharts.com/modules/heatmap.js

https://code.jquery.com/jquery-2.1.1.min.js

https://code.highcharts.com/highcharts.js

https://code.highcharts.com/modules/heatmap.js