xxxxxxxxxx
<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>
<script id="jsbin-source-html" type="text/html">
<html>
<head>
<script src="//code.jquery.com/jquery-2.1.1.min.js"><\/script>
<script src="//code.highcharts.com/highcharts.js"><\/script>
<script src="//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>
</body>
</html></script>
<script id="jsbin-source-javascript" type="text/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></body>
</html>
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