Skip to content

Instantly share code, notes, and snippets.

@bradoyler

bradoyler/index.html

Created December 14, 2017 21:56
Show Gist options
  • Save bradoyler/93540472d177711b9a7ac3fa2b4a3552 to your computer and use it in GitHub Desktop.
Save bradoyler/93540472d177711b9a7ac3fa2b4a3552 to your computer and use it in GitHub Desktop.
Download ZIP
JS Bin // source http://jsbin.com/facoxam
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="U.S. Airline Quality Scores (2016)">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.2.3/d3.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/billboard.js/1.1.1/billboard.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/billboard.js/1.1.1/billboard.min.js"></script>
<title>U.S. Airline Quality Scores (2016)</title>
</head>
<body>
<h3>U.S. Airline Quality Scores (2016)</h3>
<div id="bbchart4" style="max-width:940px; margin:auto;"></div>
<script id="jsbin-javascript">
'use strict';
var data = [['Alaska', -0.39], ['American', -1.35], ['Delta', -0.4], ['ExpressJet', -1.36], ['Frontier', -2.24], ['Hawaiian', -0.69], ['JetBlue', -0.6], ['SkyWest', -0.97], ['Southwest', -0.88], ['Spirit', -2.01], ['United', -1.05], ['VirginAmerica', -0.5]];
var sorted = data.sort(function (a, b) {
return b[1] - a[1];
});
var columnData = sorted.map(function (item) {
return item[1] + 5;
});
columnData.unshift('Major US Airlines'); // add the column header
var labels = sorted.map(function (item) {
return item[0];
}); // create array of labels
bb.generate({
data: {
columns: [columnData],
type: 'bar'
},
axis: {
y: {
tick: {
format: function format(d) {
return d.toFixed(1);
}
},
label: 'Score'
},
x: {
type: 'category',
categories: labels,
show: true
},
rotated: true
},
tooltip: {
show: true
},
bindto: '#bbchart4'
});
</script>
<script id="jsbin-source-css" type="text/css">
</script>
<script id="jsbin-source-javascript" type="text/javascript">const data = [
['Alaska', -0.39],
['American', -1.35],
['Delta', -0.4],
['ExpressJet', -1.36],
['Frontier', -2.24],
['Hawaiian', -0.69],
['JetBlue', -0.6],
['SkyWest', -0.97],
['Southwest', -0.88],
['Spirit', -2.01],
['United', -1.05],
['VirginAmerica', -0.5]
]
const sorted = data.sort((a, b) => b[1] - a[1])
const columnData = sorted.map(item => item[1] + 5)
columnData.unshift('Major US Airlines') // add the column header
const labels = sorted.map(item => item[0]) // create array of labels
bb.generate({
data: {
columns: [columnData],
type: 'bar'
},
axis: {
y: {
tick: {
format: (d) => (d).toFixed(1)
},
label: 'Score'
},
x: {
type: 'category',
categories: labels,
show: true
},
rotated: true
},
tooltip: {
show: true
},
bindto: '#bbchart4'
})</script></body>
</html>
Raw
jsbin.facoxam.js
'use strict';
var data = [['Alaska', -0.39], ['American', -1.35], ['Delta', -0.4], ['ExpressJet', -1.36], ['Frontier', -2.24], ['Hawaiian', -0.69], ['JetBlue', -0.6], ['SkyWest', -0.97], ['Southwest', -0.88], ['Spirit', -2.01], ['United', -1.05], ['VirginAmerica', -0.5]];
var sorted = data.sort(function (a, b) {
return b[1] - a[1];
});
var columnData = sorted.map(function (item) {
return item[1] + 5;
});
columnData.unshift('Major US Airlines'); // add the column header
var labels = sorted.map(function (item) {
return item[0];
}); // create array of labels
bb.generate({
data: {
columns: [columnData],
type: 'bar'
},
axis: {
y: {
tick: {
format: function format(d) {
return d.toFixed(1);
}
},
label: 'Score'
},
x: {
type: 'category',
categories: labels,
show: true
},
rotated: true
},
tooltip: {
show: true
},
bindto: '#bbchart4'
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment