Skip to content

Instantly share code, notes, and snippets.

@stefanw

stefanw/index.html

Created March 4, 2013 11:32
Show Gist options
  • Save stefanw/5081689 to your computer and use it in GitHub Desktop.
Save stefanw/5081689 to your computer and use it in GitHub Desktop.
Download ZIP
Top Recipient Aggregation Prototype
Raw
index.html
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<title>Top Recipients</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<!-- CSS -->
<!-- <link href="css/bootstrap.css" rel="stylesheet"> -->
<!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="js/html5shiv.js"></script>
<![endif]-->
</head>
<body>
<form>
<label>Choose Dataset:
<select id="datasets">
<option>Loading...</option>
</select>
</label>
<br/>
<label>Choose Recipient Dimension:
<select id="to">
</select>
</label>
<label>Choose Year:
<select id="year">
</select>
</label>
<button id="aggregate">Get Top 100 Recipients</button>
</form>
<a href="#" id="download">Download</a>
<table id="table">
<thead>
<tr>
<th>Rank</th>
<th>Recipient</th>
<th>Amount</th>
<th>Year</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="http://openspending.org/static/openspendingjs/lib/vendor/accounting.js"></script>
<script src="http://openspending.org/static/openspendingjs/lib/utils/utils.js"></script>
<!-- end script boot section -->
<!-- templates/view/_widgets.html widget_js -->
<script type="text/javascript" src="script.js"></script>
</body>
</html>
Raw
script.js
$(function(){
var datasetUrl = 'http://openspending.org/datasets.json';
var apiUrl = 'http://openspending.org/api/2/';
var getTop = function(dataset, options) {
var year = options.year || 2011;
var dd = '';
if (options.year) {
dd = 'time.year|';
}
var num = options.count || 100;
var to = options.to || 'to';
var cuts = 'time.year:' + year;
var url = apiUrl + 'aggregate?dataset=' + dataset + '&drilldown=' + dd + to + '&cut=' + cuts + '&order=amount:desc';
var d = $.Deferred();
$.getJSON(url, function(data){
d.resolve(data.drilldown.slice(0, num));
});
return d.promise();
};
var modelCache = {}, timeCache = {};
var getModel = function(dataset, options) {
var url = 'http://openspending.org/' + dataset + '/model.json';
var d = $.Deferred();
if (modelCache[dataset]){
return modelCache[dataset];
} else {
$.getJSON(url, function(data){
modelCache[dataset] = data;
d.resolve(modelCache[dataset]);
});
}
return d.promise();
};
var getTime = function(dataset, options) {
var url = 'http://openspending.org/' + dataset + '/time.distinct.json';
var d = $.Deferred();
if (timeCache[dataset]){
return timeCache[dataset];
} else {
$.getJSON(url, function(data){
var times = {};
for (var i = 0; i < data.results.length; i += 1) {
times[data.results[i].year] = true;
}
timeCache[dataset] = times;
d.resolve(timeCache[dataset]);
});
}
return d.promise();
};
$.getJSON(datasetUrl, function(data){
$('#datasets').html('');
$.each(data.datasets, function(i){
var dataset = data.datasets[i];
if (dataset.category !== 'spending') {
return;
}
$('#datasets').append('<option value="' + dataset.name +'">' + dataset.label + '</option>');
});
$('#datasets').change(function(e){
getModel($(this).val()).then(function(data){
$('#to').html('');
$.each(data.mapping, function(key) {
$('#to').append('<option value="' + key + '">' + (data.mapping[key].label || key) + '</option>');
});
if (data.mapping.to) {
$('#to').val('to');
}
});
getTime($(this).val()).then(function(data){
$('#year').html('');
$('#year').append('<option value="">All</option>');
$.each(data, function(key) {
$('#year').append('<option value="' + key + '">' + key + '</option>');
});
if (data['2012']) {
$('#year').val('2012');
}
});
});
$('#aggregate').click(function(e){
e.preventDefault();
var dataset = $('#datasets').val();
var options = {};
options.to = $('#to').val();
options.model = modelCache[dataset];
options.year = $('#year').val();
getTop(dataset, options).then(function(data){
var tbody = $('#table tbody');
tbody.html('');
var csv = 'rank,label,amount,year,url,uri\n';
$.each(data, function(i){
var dd = data[i];
var tr = $('<tr>')
.append($('<td>').text(i + 1))
.append($('<td>').append($('<a>', {href: dd[options.to].html_url}).text(dd[options.to].label)))
.append($('<td>').text(OpenSpending.Utils.formatAmountWithCommas(dd.amount, 2, options.model.dataset.currency)))
.append($('<td>').text(dd.time.year));
csv += '' + (i + 1) + ',"' + dd[options.to].label.replace('"', '\\"') + '",' + dd.amount + ',' + dd.time.year + ',' + dd[options.to].html_url + ',' + dd[options.to].uri + '\n';
tbody.append(tr);
});
$('#download').attr('href', 'data:text/csv;charset=utf-8;base64,' + btoa(csv));
});
});
});
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment