stefanw/index.html

## 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>

## 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));
      });

    });


  });

});
	<!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>
	$(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));
	});

	});


	});

	});