bubbletree-map.html

---
layout: default
title: Country & Regional Analysis
---
	
<script type="text/javascript">
(function ($) {

  window.wdmmg_cramap = {};
  
  var os_path = 'http://assets.openspending.org/openspendingjs/master';
  var year = '2010';

  yepnope.errorTimeout = 1000;

  yepnope([
   { load: [
   	os_path + '/lib/vendor/raphael-min.js',	
   	os_path + '/lib/aggregator.js',	
   	os_path + '/lib/vendor/bubbletree/2.0/bubbletree.js'
     ], 
     complete: function() {
       // fall back to local bubbletree
       if (!window.BubbleTree) {
         yepnope(os_path + '/lib/vendor/bubbletree/2.0/bubbletree.js?nocacheplease='+Math.random());
       }
     }
   },	
   { load: [
    os_path + '/lib/vendor/base64.js',
   	os_path + '/lib/vendor/vis4.js',	
   	os_path + '/lib/vendor/Tween.js',	
   	os_path + '/lib/vendor/jquery.history.js',	
   	os_path + '/lib/vendor/bubbletree/1.0/bubbletree.css',
   	'css/cra-map.css',
   	os_path + '/lib/vendor/chroma.js',
   	os_path + '/lib/vendor/jquery.qtip.min.js',
   	os_path + '/lib/vendor/kartograph.min.js',
   	os_path + '/lib/vendor/bubbletree/2.0/bubbletree.cofog.js'
     ],
     complete: function() {

		$('#preloader .txt').html('loading spending data');

		var $tooltip = $('<div class="tooltip">Tooltip</div>');
		$('.bubbletree').append($tooltip);
		$tooltip.hide();
		
		var map_tooltips, 
			formatAmount = BubbleTree.Utils.formatNumber;
	
		function updateLegend(title, colors, limits) {
			var $lg = $('#cm-map-legend');
			$lg.html('');
			$lg.append('<div class="title">Expenditure on '+title+'</div>');
			$.each(colors, function(i,col) {
				var row = $('<div class="row" />'),
					lbl = formatAmount(limits[i])+'&nbsp;–&nbsp;'+formatAmount(limits[i+1])+(i==colors.length-1?' (£)':'');
				row.append('<div class="color" style="background:'+col+'"></div>');
				row.append('<div class="lbl">'+lbl+'</div>');
				$lg.append(row);
			});
		};
	
		var onNodeClick = function(node) {
		
			var 
			// create a nice colorscale based on the selected bubble color
			hcl = chroma.hex(node.color).hcl(),			
			colsc = new chroma.ColorScale({
				colors: [
					chroma.hcl(hcl[0], Math.min(1,hcl[1]), .95),
					chroma.hcl(hcl[0], Math.min(1.2,hcl[1]), .8),
					chroma.hcl(hcl[0], Math.min(1.4,hcl[1]), .65),
					chroma.hcl(hcl[0], Math.min(1.6,hcl[1]), .5),
					chroma.hcl(hcl[0], Math.min(1.8,hcl[1]), .35),
					chroma.hcl(hcl[0], Math.min(2,hcl[1]), .2)
				],
				limits: chroma.limits(node.breakdownsByName, 'q', 6, 'amount')
			});
			
			// update map legend
			updateLegend(node.label, colsc.colors, colsc.classLimits);
			
			// apply colors to map
			wdmmg_cramap.map.choropleth({
				data: node.breakdownsByName,
				value: 'amount',
				colors: function(d) {
					if (d === null || isNaN(d.amount)) return '#ccc';
					return colsc.getColor(d.amount);
				}
				//,duration: 200
			});
			
			map_tooltips = {};
			
			$.each(node.breakdownsByName, function(k, v) {
				map_tooltips[k] = [v.label.replace('_', ' / '), '<div class="lbl">Expenditure on '+node.label+'</div><div class="amount">£ '+v.famount+'</div>'];
			});
			
			wdmmg_cramap.map.tooltips({ 
				content: map_tooltips,
				delay: 300
			});
			// create tooltips
		};
		
		$(function() {
			// init bubbletree
			new OpenSpending.Aggregator({
				apiUrl: 'http://openspending.org/api',
				dataset: 'ukgov-finances-cra',
				drilldowns: ['cofog1', 'cofog2', 'cofog3'],
				cuts: ['year:'+year],
				rootNodeLabel: 'Grand Total ('+year+')', 
				breakdown: 'region',
				callback: function(data) {
					
					$('#preloader').remove();
					$('#cm-map').show();


					wdmmg_cramap.bt = new BubbleTree({
						data: data,
						container: '#cm-bubbletree',
						bubbleType: 'icon',
						nodeClickCallback: onNodeClick,
						firstNodeCallback: onNodeClick,
						rootPath: 'icons/',
						tooltip: {
							qtip: true,
							delay: 800,
							content: function(node) {
								return [node.label, '<div class="desc">'+(node.description ? node.description : 'No description given')+'</div><div class="amount">£ '+node.famount+'</div>'];
							}
						},
						bubbleStyles: {
							'cofog-1':  BubbleTree.Styles.Cofog1,
							'cofog-2':  BubbleTree.Styles.Cofog2,
							'cofog-3':  BubbleTree.Styles.Cofog3
						},
						clearColors: true, // remove all colors coming from OpenSpending API
					})
				}
			});
			
			// init map
			
			var map = wdmmg_cramap.map = $K.map('#cm-map');
    	 	map.loadStyles('css/cra-map.css', function() {
				map.loadMap('img/gbr.svg', function() {
					map.addLayer('IRL');
					map.addLayer({ 
						id: 'GBR', 
						key: 'region'
					});
				}); // map.loadMap(function())
     		}); // map.loadStyles(function())
     		
     		$('#cm-map').hide();
		}); // complete: function() {
     
     }
   }
  ]); // yepnope()   
})(jQuery)
</script>
    
    
<div id="cra-map">
  <div id="preloader" style="text-align: center; padding: 100px"><img src="img/ajax-loader.gif" style="vertical-align:top" /> &nbsp;<span class="txt">loading javascript libraries</span></div>

  <div id="cm-bt">
  	<div class="bubbletree-wrapper">
  		<div id="cm-bubbletree" class="bubbletree"></div>
  	</div>	
  </div>
  <div id="cm-map-legend"></div>
  <div id="cm-map"></div>
</div><!-- /#cra-map -->