sughodke/index.html

## index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>
  body {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    width: 960px;
    height: 500px;
    position: relative;
  }

  #subdivision {
    position: absolute;
    top: 20px;
    left: 20px;
  }

  #subdivision input {
    width: 200px;
  }

</style>
<div id="subdivision">
  <input type="range" min="1896" max="2012" value="2004" step="4">
  <output name="subdivision">2004</output>
  <div id="buffer"></div>
</div>

<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/async/0.2.7/async.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.4.4/underscore-min.js"></script>
<script src="https://dl.dropboxusercontent.com/u/8068328/freebasejs/client_side/freebase.min.js"></script>

<script>
  function loadData(e) {
    $('#buffer').html('loading');
    var db = {};
    e = e || 2004;

    query =
    [{
      "country": null,
      "medal": null,
      "event~=": e+"*",
      "type": "/olympics/olympic_medal_honor"
    }];

    $.freebase.paginate(query, function(entries) {
      entries.forEach(function(e) {
        db[e.country] = db[e.country] || {};

        db[e.country][e.medal] = db[e.country][e.medal] + 1 || 1;
      });

      //console.log(db);

      $('#buffer').html("<pre>"+JSON.stringify(db, null, "  ")+"</pre>");
    });
  }

  $(document).ready(loadData());
</script>
<script>
var output = d3.select("output");

var input = d3.select("input")
    .on("change", function() { output.text(+this.value); })
    .on("mouseup", function() { loadData(+this.value); });

</script>
	<!DOCTYPE html>
	<meta charset="utf-8">
	<style>
	body {
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	width: 960px;
	height: 500px;
	position: relative;
	}

	#subdivision {
	position: absolute;
	top: 20px;
	left: 20px;
	}

	#subdivision input {
	width: 200px;
	}

	</style>
	<div id="subdivision">
	<input type="range" min="1896" max="2012" value="2004" step="4">
	<output name="subdivision">2004</output>
	<div id="buffer"></div>
	</div>

	<script src="http://d3js.org/d3.v3.min.js"></script>
	<script src="http://code.jquery.com/jquery-latest.js"></script>
	<script src="http://cdnjs.cloudflare.com/ajax/libs/async/0.2.7/async.min.js"></script>
	<script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.4.4/underscore-min.js"></script>
	<script src="https://dl.dropboxusercontent.com/u/8068328/freebasejs/client_side/freebase.min.js"></script>

	<script>
	function loadData(e) {
	$('#buffer').html('loading');
	var db = {};
	e = e \|\| 2004;

	query =
	[{
	"country": null,
	"medal": null,
	"event~=": e+"*",
	"type": "/olympics/olympic_medal_honor"
	}];

	$.freebase.paginate(query, function(entries) {
	entries.forEach(function(e) {
	db[e.country] = db[e.country] \|\| {};

	db[e.country][e.medal] = db[e.country][e.medal] + 1 \|\| 1;
	});

	//console.log(db);

	$('#buffer').html("<pre>"+JSON.stringify(db, null, " ")+"</pre>");
	});
	}

	$(document).ready(loadData());
	</script>
	<script>
	var output = d3.select("output");

	var input = d3.select("input")
	.on("change", function() { output.text(+this.value); })
	.on("mouseup", function() { loadData(+this.value); });

	</script>