(function() {

  // Fake JSON data
  var json = {countries_msg_vol: {
    AU: 113, FR: 97, BG: 36, NL: 187, JP: 31, NO: 41, MX: 261, DE: 178, TR: 55, IT: 51, US: 212,
    PL: 42, ES: 52, GB: 238, HK: 98, TW: 32, NZ: 12, BR: 78, BB: 45, UY: 56, CA: 98, SG: 45, TG: 9, Other: 204 
  }};
  
	// D3 Bubble Chart 

	var diameter = 400;

	var svg = d3.select('#graph').append('svg')
					.attr('width', diameter)
					.attr('height', diameter);

	var bubble = d3.layout.pack()
				.size([diameter, diameter])
				.value(function(d) {return d.size;})
         // .sort(function(a, b) {
				// 	return -(a.value - b.value)
				// }) 
				.padding(3);
  
  // generate data with calculated layout values
  var nodes = bubble.nodes(processData(json))
						.filter(function(d) { return !d.children; }); // filter out the outer bubble
 
  var vis = svg.selectAll('circle')
					.data(nodes, function(d) { return d.name; });
  
  vis.enter().append('circle')
			.attr('transform', function(d) { return 'translate(' + d.x + ',' + d.y + ')'; })
			.attr('r', function(d) { return d.r; })
			.attr('class', function(d) { return d.className; });
  
  function processData(data) {
    var obj = data.countries_msg_vol;

    var newDataSet = [];

    for(var prop in obj) {
      newDataSet.push({name: prop, className: prop.toLowerCase(), size: obj[prop]});
    }
    return {children: newDataSet};
  }
  
})();