-
Notifications
You must be signed in to change notification settings - Fork 7
/
countries.html
109 lines (90 loc) · 3.2 KB
/
countries.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="kinetic-v5.1.0.min.js"></script>
<script type="text/javascript" src="releases/js/treemap-1.0.min.js"></script>
<script type="text/javascript" src="countries.json"></script>
<script type="text/javascript">
$(function(){
var WIDTH = 700;
var HEIGHT = 700;
var stage = new Kinetic.Stage({
container: "container",
width: WIDTH,
height: HEIGHT
});
var layer = new Kinetic.Layer();
var textLayer = new Kinetic.Layer();
var renderer = function(x,y,w,h,n) {
if (n.data) {
var opacity = 1;
var halign = 'left';
var textY = y + treemap.yMargin(n.frame);
if (n.nodes) {
opacity = 0.3;
halign = 'center';
textY = y + n.frame.height * 0.2;
}
var text = new Kinetic.Text({
x: x + treemap.xMargin(n.frame),
y : textY,
text:n.data,
fontSize:treemap.fontSize({width:WIDTH,height:HEIGHT},n.frame),
fontFamily: "Tahoma, Geneva, sans-serif",
fill: 'black',
width : n.frame.width,
height: n.frame.height,
opacity:opacity,
align : halign
});
textLayer.add(text);
}
if (!n.nodes || n.nodes.length == 0) {
var rect = new Kinetic.Rect({
x:x,
y:y,
width:w,
height:h,
stroke:"white",
strokeWidth:1,
fill: n.parent.color
});
layer.add(rect);
}
};
var regions = {};
countryList.forEach(
function(v, i) {
var country = v[0];
var cia = v[1];
var imf = v[2];
var region = v[3];
var w = Math.max(cia,imf);
if (!regions[region]) {
regions[region] = {data: region, nodes:[]};
}
regions[region].nodes.push({weight: w, data: country});
}
);
var colors = ['#FF8080', '#62A342', '#89C4FF', '#82B4CD', '#D8C0F2', '#FFBD5C', '#dddd00', '#82B482', '#FF6666', '#999966', '#8533D6'];
var world = {frame: {x:0, y : 0, width:WIDTH, height:WIDTH}, nodes : []};
for (var region in regions) {
world.nodes.push(regions[region]);
}
for (var i in world.nodes) {
world.nodes[i].color = colors[i % (colors.length-1)];
}
treemap.minFontSize = function(){return 10;};
treemap.squarify(world, renderer);
stage.add(layer);
stage.add(textLayer);
});
</script>
<html>
<head>
<title></title>
</head>
<body>
<div id="container"></div>
</body>
</html>