Skip to content

Commit 4b3750a

Browse files
pudopudo
committed
Merge pull request #5 from gka/feature/cra-map
Feature/cra map
2 parents 84656a9 + 1537c1a commit 4b3750a

7 files changed

+446
-0
lines changed

‎cra-map.html

+144
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,144 @@
1+
---
2+
layout: default
3+
title: Country & Regional Analysis
4+
---
5+
6+
<script type="text/js">
7+
(function ($) {
8+
9+
window.wdmmg_cramap = {};
10+
11+
yepnope([
12+
{ load: 'http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js' },
13+
{ load: 'css/cra-map.css' },
14+
{ load: 'http://assets.openspending.org/openspendingjs/master/lib/vendor/raphael-min.js' },
15+
{ load: 'http://assets.openspending.org/openspendingjs/master/lib/aggregator.js' },
16+
{ load: 'http://assets.openspending.org/openspendingjs/master/lib/vendor/bubbletree/1.0/bubbletree.js' },
17+
{ load: 'http://assets.openspending.org/openspendingjs/master/lib/vendor/vis4.js' },
18+
{ load: 'http://assets.openspending.org/openspendingjs/master/lib/vendor/Tween.js' },
19+
{ load: 'http://assets.openspending.org/openspendingjs/master/lib/vendor/jquery.history.js' },
20+
{ load: 'http://assets.openspending.org/openspendingjs/master/lib/vendor/bubbletree/1.0/bubbletree.css' },
21+
{ load: 'js/libs/chroma.js' },
22+
{ load: 'js/libs/kartograph.min.js' },
23+
{ load: 'js/libs/bubbletree.cofog.js',
24+
complete: function() {
25+
26+
$('#preloader .txt').html('loading spending data');
27+
28+
var $tooltip = $('<div class="tooltip">Tooltip</div>');
29+
$('.bubbletree').append($tooltip);
30+
$tooltip.hide();
31+
32+
var tooltip = function(event) {
33+
if (event.type == 'SHOW') {
34+
// show tooltip
35+
vis4.log(event);
36+
$tooltip.css({
37+
left: event.mousePos.x + 4,
38+
top: event.mousePos.y + 4
39+
});
40+
$tooltip.html(event.node.label+' <b>'+event.node.famount+'</b>');
41+
var bubble = event.target;
42+
43+
$tooltip.show();
44+
} else {
45+
// hide tooltip
46+
$tooltip.hide();
47+
}
48+
};
49+
50+
var onNodeClick = function(node) {
51+
52+
var
53+
// create a nice colorscale based on the selected bubble color
54+
hcl = chroma.hex(node.color).hcl(),
55+
colsc = new chroma.ColorScale({
56+
colors: [
57+
chroma.hcl(hcl[0], Math.min(1,hcl[1]), .95),
58+
chroma.hcl(hcl[0], Math.min(1.2,hcl[1]), .8),
59+
chroma.hcl(hcl[0], Math.min(1.3,hcl[1]), .7),
60+
chroma.hcl(hcl[0], Math.min(1.4,hcl[1]), .6),
61+
chroma.hcl(hcl[0], Math.min(1.5,hcl[1]), .5),
62+
chroma.hcl(hcl[0], Math.min(1.6,hcl[1]), .4),
63+
chroma.hcl(hcl[0], Math.min(1.8,hcl[1]), .3),
64+
chroma.hcl(hcl[0], Math.min(2,hcl[1]), .2)
65+
],
66+
limits: chroma.limits(node.breakdownsByName, 'q', 8, 'amount')
67+
});
68+
69+
// apply colors to map
70+
wdmmg_cramap.map.choropleth({
71+
data: node.breakdownsByName,
72+
value: 'amount',
73+
colors: function(d) {
74+
if (d === null || isNaN(d.amount)) return '#ccc';
75+
return colsc.getColor(d.amount);
76+
}
77+
//,duration: 200
78+
});
79+
};
80+
81+
$(function() {
82+
// init bubbletree
83+
new OpenSpending.Aggregator({
84+
apiUrl: 'http://openspending.org/api',
85+
//localApiCache: 'aggregate.json',
86+
dataset: 'ukgov-finances-cra',
87+
drilldowns: ['cofog1', 'cofog2', 'cofog3'],
88+
cuts: ['year:2008'],
89+
rootNodeLabel: 'Grant total',
90+
breakdown: 'region',
91+
callback: function(data) {
92+
93+
$('#preloader').remove();
94+
95+
wdmmg_cramap.bt = new BubbleTree({
96+
data: data,
97+
container: '#cm-bubbletree',
98+
bubbleType: 'icon',
99+
nodeClickCallback: onNodeClick,
100+
firstNodeCallback: onNodeClick,
101+
rootPath: 'icons/',
102+
//tooltipCallback: tooltip,
103+
bubbleStyles: {
104+
'cofog-1': BubbleTree.Styles.Cofog1,
105+
'cofog-2': BubbleTree.Styles.Cofog2,
106+
'cofog-3': BubbleTree.Styles.Cofog3
107+
},
108+
clearColors: true, // remove all colors coming from OpenSpending API
109+
})
110+
}
111+
});
112+
113+
// init map
114+
115+
var map = wdmmg_cramap.map = $K.map('#cm-map');
116+
map.loadMap('img/gbr.svg', function() {
117+
map.addLayer('IRL');
118+
map.addLayer({ id: 'GBR', key: 'region' });
119+
}); // map.loadMap(function())
120+
121+
}); // complete: function() {
122+
123+
}
124+
}
125+
]); // yepnope()
126+
})(jQuery)
127+
</script>
128+
129+
130+
<div id="cra-map">
131+
<h2 class="page-header">Country & Regional Analysis</h2>
132+
133+
<div id="preloader"><img src="img/ajax-loader.gif" style="vertical-align:top" /> &nbsp;<span class="txt">loading javascript libraries</span></div>
134+
135+
<div id="cm-bt">
136+
<div class="bubbletree-wrapper">
137+
<div id="cm-bubbletree" class="bubbletree"></div>
138+
</div>
139+
</div>
140+
<div id="cm-map">
141+
142+
</div>
143+
</div><!-- /#cra-map -->
144+

‎css/cra-map.css

+56
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
/*
2+
* styles for cra map
3+
*/
4+
5+
#cra-map {
6+
position: relative;
7+
height: 550px;
8+
}
9+
10+
#cm-bt {
11+
width: 550px;
12+
}
13+
14+
#cm-bt .bubbletree-wrapper {
15+
height: 500px;
16+
width: 550px;
17+
}
18+
19+
#cm-bubbletree .label {
20+
background: transparent;
21+
padding: 0;
22+
margin: 0;
23+
}
24+
25+
#cm-bubbletree .label .amount {
26+
font-weight: normal;
27+
}
28+
29+
#cm-bubbletree .label .desc {
30+
font-family: "OpenSansLight","Helvetica Neue",Helvetica,Arial,sans-serif;
31+
font-weight: normal;
32+
line-height: 1.2em;
33+
}
34+
35+
#cm-bubbletree .label2 {
36+
line-height: 1.2em;
37+
font-family: "OpenSansLight","Helvetica Neue",Helvetica,Arial,sans-serif;
38+
}
39+
40+
41+
#cm-map {
42+
position: absolute;
43+
left: 550px;
44+
top: 60px;
45+
width: 390px;
46+
height: 500px;
47+
}
48+
49+
#cm-map svg .IRL {
50+
stroke: none;
51+
fill: #ddd;
52+
}
53+
54+
#cm-map svg .GBR {
55+
stroke: #fff;
56+
}

‎img/ajax-loader.gif

2.49 KB
Loading

0 commit comments

Comments
 (0)